Coursework > MyUCSC Redesign

The MyUCSC portal at UC Santa Cruz is the central resource for managing class schedules, finances, and serves as the central information resource available to students. However, in trying to provide the most resources as possible, potentially useful information becomes lost in an intricate and illogically-organized hierarchical menu. My group sought to work with the main users of the system - students - to determine how to better organize the resources and curtail redundancies.

Comparison of two distinct pages with nearly identical functionality and appearance.
A Websort-generated dendrogram.

The system's existing navigation contained nearly 150 links up to three hierarchical levels. A user survey identified links that students admitted more likely to just use a search engine to find than with MyUCSC. More were removed after we realized that there existed a number of duplicates or close redundancies in the list.

With then put the trimmed list of links into an online tool called WebSort, a service allowing open card sorting. After sharing this sort activity with more student volunteers, certain trends began to emerge in the organization; users kept categorizing the links the same ways.

At this point, we re-organized the smaller list into the four main categories that appeared using Websort. Links in these categories were grouped by compatibility, and overall menu depth was reduced from three levels to just one.

With fewer categories, top-level categories were organized as tabs while each section's links remained on the left side of the content area.

In addition to the reorganization, many of our initial student surveys suggested an interest in unification with other school services - such as the campus webmail - whose use often coincided with the student portal's. With this in mind, our prototype tried to combine these features to truly make the system a one-stop shop for UCSC students.

I built the prototype using HTML, CSS, and Javascript. Like the existing system, menu navigation and content appeared in separate frames. After studying how the existing system structured its navigation, I modified the prototype links so that once a user had authenticated with the existing system the prototype displayed exactly the same content as the existing system, albeit with our navigation on top. This allowed us to do very high-fidelity testing of our final prototype without the need to code "dummy", or placeholder, content pages.

stage 1 design stage 2 design stage 3 design
From left to right: three stages of iterative design refinements. These design iterations were made to make the prototype consistent with other UC Santa Cruz website color schemes and styling.

User testing consisted of giving participants a number of likely tasks that they had the ability to complete on both systems with success. The two interfaces were evaluated by the speed (time) and ease (confusion, stress, randomly clicking around) of which participants finished their tasks. In every test, participants performed better in both time and with ease (both self-reported and observed) than the existing system. Many participants commented on how much quicker it was to find what they wanted, and were equally amazed after failing to accomplish a task on the existing system just how oddly-organized it had been.

After minor aesthetic iterations, the final prototype was presented for a grade in an undergraduate Human-Computer Interaction course at UC Santa Cruz.