T-Cube

Professors at Georgia Tech use uses a website called T-Square to inform students of announcements and assignments and to upload resources for their classes. T-Square has poor usability on a laptop or desktop and there was no mobile version, which meant accessing it on a phone is very difficult and tedious. For a Mobile Apps and Services course, my group created T-Cube, a mobile web app designed to improve upon the functionality of T-Square while on the go. This project won second place at the Convergence Innovation Competition in 2012 under the “Campus Community” category.

I mocked up images 1 – 5 using Balsamiq. I used Balsamiq because the designs are detailed enough to communicate my ideas to my teammates but rough enough to still elicit constructive criticism. These images show the progression of designs we considered. Iterations were based on discussions between the front-end developer and me.

Images 6 – 9 show screenshots of the final design that was implemented. The final version was mostly developed by the front-end developer, but I helped some with the HTML, CSS, and overall design.

Group:
Kelsey Francis
Stephan Lee
Christopher Martin
Nitya Noronha
Kevin Terraciano

First Iteration

Our original inspiration was the UI found in some Windows Phone apps, which were generally fairly minimal with pages positioned horizontally. In the first screen you see a list of assignments. The “Feed” page is located to the right, and can be seen barely peeking out on that side. If the user selects one item, a detailed description of the assignment would slide out.

Second Iteration

We quickly decided against the Windows Phone idea, realizing that its navigation concept could be difficult to immediately understand and that it would be difficult to develop elegantly. In this design there is a main feed (a feature that currently does not exist on T-Square) that displays the most recent announcements and assignments from all courses that are due the soonest. You could also look for this information by class. These two screens show the basic organization of the feed.

Third Iteration

This iteration has a similar version of the feed, but the major change is the bar on the top. We found out that this bar (with the home and menu icons) would be required if the app was to be included in a series of mobile web apps provided by the school. On the first two screens there is a back arrow that would take the user to the main navigation screen (the third screen). From here the user could choose to look at the main feed or select a specific course.

Fourth Iteration

The idea of moving left and right through screens was getting confusing, so we decided to have the bar drop down to reveal the menu when the user touched it. In these screens you see the same navigation as the previous design, but when the user selects a course they see the options available for that course. Touching the menu bar (at the bottom now) would cause it to slide back to the top, revealing the main feed again.

Fifth Iteration (phew)

Finally, we came up with a design that we felt made the most sense and was feasible to create. The main feed in the lower left screen is still basically the same, but the user accesses the navigation menu by touching or dragging the dark bar under the “T2” bar. Any selection within the navigation menu opens that page and collapses the navigation.

Main Feed

This is the main feed. Recent, time-sensitive items are collected in one place, minimizing clicks and excessive navigation. More detail is shown if an item is chosen.

Navigation Menu

Touching the bar under the title brings down the Navigation menu. This menu can be collapsed again or a different page can be selected.

Course Home

Selecting a course takes the user to that course’s home page where a menu of options is presented.

Course Resources

For example, if the user selects “Resources” they are brought to this page containing documents the professor has uploaded. To go back the user may touch the “Back” button or access the Navigation menu again.

This was our video entry into the 2012 Convergence Innovation Competition. This project won second place in the Campus Community category.