Retrospective 2: Information Architecture
Redesign the information architecture (IA) of a university website and present a clickable prototype showing key page layouts
This was a team project with Erin Toh and we were assigned to redesign the NTU School of Electrical & Electronic Engineering’s website.
Research
We started off with a quick usability tear-down in which we assumed the personas and simulated their user-flows on the EEE website (something like a cognitive walk-through) while doing a heuristic evaluation at each step, noting which of Nielsen’s 10 was getting violated. A usability rating score of 1–5 was given so we could prioritise rectifying the low-scorers first.
Taking John’s user-flow for instance, it was quickly clear that he would have to go at least 6 levels deep (red squares) to achieve his goals. Some of the information he would be looking for is dispersed across different sections. The presence of a global header and a footer with items that link only to the main NTU website adds to the confusion. Moreover, there was nothing on the site that would keep visitors glued to it — no brand visibility, unaesthetic and inconsistent layouts.
To see what the competitors offered, we simulated the same user-flows in the websites of 3 local Singaporean universities (NUS, SMU, SUSS) and an international one (University of Maryland).
We did a similar usability/desirability tear-down and tabulated our qualitative and quantitative ratings. Here’s just a sample section:
Synthesis
Good IA doesn’t involve just one person arbitrarily deciding on what is good categorisation. We made 60 cards that covered the user needs of all 3 personas and sent it out for a Hybrid Card Sorting exercise to try to obtain a consensus on the different mental models people use to categorise things. The results were used to draft a proposed sitemap and conduct a Tree Test that gave us a 76% success rate, good enough to substantiate the draft sitemap.
Design
We sketched our wireframes for the redesigned website and proceeded to make our paper prototypes. The usability tests using the paper prototypes came to a screeching halt after 2 trials as our prototypes were too Lo-Fi and didn’t have the minimum info needed for our users to know what they were ‘clicking’. (And reworking and incorporating improvements were starting to get a bit painful. Also, trees!). So bye-bye paper and Hello Axure! Quick mock-ups were made and we proceeded to test the functionality before incorporating final (and superfluous) changes.
“Fail early. Fail often. Fail forward.” — Will Smith
Usability Testing
Five John-esque users were recruited to complete 8 tasks that mimicked the user needs in a non-leading manner. They were asked to think aloud and any observations or deviations were noted.
Success was defined as 80% task completion and a maximum of 30 sec per task. We used a rainbow spreadsheet to quickly record results during testing.
Iteration
From the results of the Usability Testing done on 5 representative users, we made the following iterations to our prototype:
- The ADMISSIONS section, while keeping the content unchanged, was renamed as APPLY ONLINE. 100% of the users accessed the admission requirements via the PROGRAMME section as opposed to how they had categorised it during the Card Sorting — under ADMISSIONS. Fees and Costs were also duplicated under PROGRAMMES as they expected it to be there as well.
- Items on the sidebars were made more readable by increasing font size, changing to all CAPS and the Related Links were changed from mere text to big buttons.
- New pages would open in new tabs so users wont lose context of the page they are currently at.
We threw in some colours, photos and design elements for purely cosmetic reasons, but using NTU’s design guidelines.
A heuristic evaluation was done to compare the ‘before’ and ‘after’. We might have been slightly biased with the scoring of the ‘after’, but we substantiated it with metrics from the Usability Testing wherever possible.
The final prototype with just the key page layouts and interactions.
Learning Outcomes
- It’s a bit ironical but the user experience of a prominent software used by UX designers — Axure is… um… I’m not sure if it is killing me or making me stronger?
- Card Sorting & Tree Test results are not the be all end all of it. You might be surprised at what the same users do during Usability Testing in the context of an actual website.
- I got a lot of visual design pointers just observing my teammate work.
- Working in a team is an entirely different ball game and you learn to get used to different working styles.
- Presentations are nowhere near as uncomfortable as I thought they would be, even when the subject is hair-hurtingly dry like IA.
Improvement Opportunities
- There is a whole rack of techniques to be acquired on Axure. We didn’t implement a few ideas (like making the website responsive) solely because we didn’t know how to do it quickly in Axure.
Resources
Card Sorting and Tree Testing done on Optimal Workshop. Content Audit done using Screaming Frog. Prototypes made using Axure. (We tried on Adobe Xd first but ditched it to get proficient in Axure instead.)
