Before and after screenshots of original site and medium-fidelity mock-up of our redesign.

Problem

In my Cognitive Aspects of Digital Design I course at UCSD, we were asked to complete a usability analysis of the Indiana University website (IU.edu), which – at the time – was poorly designed and difficult to use.

Following our analysis, we were tasked with redesigning the information architecture of the website. Our main goal was to determine what information is most important to a university website (especially a university hub website) and elevate it in the new design.

Process

We walked through Nielsen's 10 usability heuristics (such as visibility of system status, recognition rather than recall, and consistency and standards) to determine how usable the website was. For each heuristic, we noted several violations or conformations (i.e. examples of bad and good usability), then chose those we felt to be most significant to the user experience or exemplary of the site. We then created a user-friendly website documenting our findings.

The resulting documentation showed evidence of some adherence to – but mostly violations of – Nielsen's heuristics. This documentation provided a basis for our next assignment in which we were asked to create a mock-up of a redesigned IU.edu.

The original home page for IU.edu.
A sample from our usability analysis presentation.
Another sample from our usability analysis presentation.

We created five user personas – potential users of a university hub website, such as prospective students looking into academics, parents looking into tuition, etc. – and came up with realistic scenarios and goals for each type of user.

One of our personas.

Out next step was to compare several university hub websites to see what kind of structure each site used (that is, which elements those universities felt were most important). We began by looking at the top-level navigation of ten websites, then narrowed our analysis to five sites for a deeper analysis of structure. We looked at the elements that each site had, then compared each to see which elements were most common (and may therefore want to include in our redesign) and which were least common (and may therefore want to exclude).

A sample from our competitive analysis of 10 similar university hub websites.

The final portion of our project was to develop high-fidelity prototypes of the site with our redesigned information architecture. I designed the layout and elements in Adobe Photoshop, then exported the page to an HTML file. From there, I added some interactivity to the website via drop-down top level navigation menus using CSS. Additionally, several second-level sites were created to give a sense of what they might look like if the redesign was fully implemented.

Results

By the end of the project, we had created high-fidelity mock-ups of our version of the IU.edu website with improved usability and information architecture. The redesign addressed the specific needs and goals of the users far better than the original site.

A mock-up of a redesigned page, directing visitors based upon their informational needs.