NTU School of MAE
TLDR Version
Problem:
The existing main and local navigation items do not fit well with the categories under which most users think the correct information should be classified.
Solution:
Help users find the correct information faster by understanding how users categorise, associate, and find information.
Final Prototype:
Low fidelity prototype.
Results:
All participants of the prototype usability test agreed that it was easy to use, and that they would use the proposed site frequently. Most of them agreed that the site was well integrated, and that they felt confident using it.
OVERVIEW
Project 2 for the User Experience Design Immersive at General Assembly was an individual project to redesign the information architecture and key pages layout of an assigned school website.
(Hypothetical) Client: Management of NTU School of MAE
Duration: 4 weeks
Deliverable:
- Information architecture for the NTU School of MAE website for all 3 personas
- Prototype with key interactions for at least one of the 3 personas' tasks on desktop platform
- Usability Test Report
- Client-facing presentation
About NTU School of MAE
Nanyang Technological University (NTU) is an autonomous university in Singapore. The School of Mechanical and Aerospace Engineering (MAE) is one of the schools housed by NTU College of Engineering.
Project Brief
- Redesign the information architecture and key pages layout of the assigned school website.
- The redesign should meet the user goals represented by the 3 given personas, the goal of the university - increase application and enrolment rates, and its existing brand.
- Test designs with users and follow usability heuristics.
RESEARCH
Personas
The 3 personas were given as follow:
Content Inventory and Audit
Content inventory and content audit were performed in tandem for the purpose of getting familiar with the existing content, so as to track which content need to be revised, which content needs to be created due to gaps, where content should be mapped to if being moved.
Getting familiar with the existing content helped me understand what is on the website, spot duplication of information, and understand if information was located properly, if the content is up-to-date, and if there is content that users request (based on the personas' needs and pain points) but isn't currently available on the website.
It was discovered that almost 30% of the "pages" were PDF, some of which were duplicative of existing pages. The organization of content was ill-conceived and not accommodating of user experience. For example, there were seven main navigation categories, however, over 50% of the content was in only one of these categories. This lopsided distribution of content created too many layers of navigation and contributed to poor content discovery and recall. This revelation helped clarify the scope of what I was dealing with.
R aw data collected for every page: navigation title, page name, URL, content hierarchy, file format, call-to-action, comments
Competitive Analysis
In order to better understand NTU School of MAE's advantage and opportunities for growth in the tertiary education industry in Singapore, the websites of top engineering schools across the globe, Johns Hopkins Whiting School of Engineering (JHU WSE) and University of Michigan College of Engineering, were examined.
JHU WSE website shows clear call to action button to Apply and to Donate. It offers cascading hover drop-downs up to third level links to allow people to preview content found deeper in the hierarchy before clicking.
Michigan Engineering website shows clear visual hierarchy of local navigation, breadcrumbs to see user location, featured contact person with profile photo (making it personal and a quick access to relevant contact info), and a compelling headline.
Usability Test
Twelve participants who fit the given personas (4 participants for each persona) were recruited for a usability test of the current website on laptop. The goal of this usability test was to observe how they use the current website to get feedback on the website functionality and gain insights into their satisfaction and pain points.
Most users were unsure and enquired whether they found the correct information while navigating on the website. A few of them thus utilised the search field most of the time and were unaware that using the search field would draw search results from the entire NTU website. Furthermore, the search field did not always return the relevant results.
Overall, most users did not know where to find the right information they needed quickly. This was mainly because the existing main and local navigation items did not fit well with the categories under which most users thought their required information should be classified. Not knowing where they were on the website during navigation added on to their problem. Therefore, they ended up feeling frustrated and prospective students could be discouraged from applying to the school if the website was perceived to be complex.
Based on my research findings, I defined the problem that I wanted to solve as follows:
The existing main and local navigation items do not fit well with the categories under which most users think the correct information should be classified.
SOLUTION
My proposed solution was defined as follows:
Help users find the correct information faster by understanding how users categorise, associate, and find information.
Content Strategy
The goal of the content strategy was to make the content findable and usable for users. Given that the business goal, audience and user needs had already been defined in this project, findings from the content audit and usability test were used to drive the content redesign - organization (information architecture) and presentation (interface design).
Card Sort
A hybrid card sort was conducted with 9 participants (3 participants for each persona) using OptimalSort. Participants were given 30 cards (that represent the website information) and 8 category labels (that represent the proposed main navigation categories). At the same time, they were observed and inquired about their rationale during the card sort.
The goal of a card sort was to understand how users expect to see information classified on the website, and to understand how users conceptualise different items. The card sort results could then be used to group and label the website information in a way that makes the most sense to users.
Instead of an open or closed card sort, a hybrid card sort was conducted to evaluate predetermined categories, along with any categories created by participants, so as to avoid the risk of them making do with categories they might not entirely agree with. In addition, sufficient number of category labels were set for users to sort all the cards into, so the hybrid card sort leaned towards a closed one. Having participants in an open card sort to create too many categories on their own might deter them from participating.
The standardisation grid shows how the number of times a particular card appears in a standardised category.
The dendrogram provides another way to quickly spot popular groups of cards, and to get a general sense of how similar (or different) the participants' card sorts were to each other. As there were fewer than 30 participants in this card sort, the best merge method was used to show how many percentages of participants agreed with parts of the groupings.
More details of the card sort results are available on my shared results address on Optimal Workshop.
Overall, the card sort results were conclusive enough to proceed with coming up with an information architecture draft.
Tree Test
A tree test was done on the information architecture draft with 15 participants (5 participants for each persona) using Treejack. Participants were given scenarios and tasks (specific to the personas that each of them represented) to find out if they could successfully find the relevant information on the information architecture draft. At the same time, they were observed and inquired about their rationale during the tree test.
The goal of a tree test was to understand how easily users could find information, where and why they get lost, and if they understood the labels and structure easily. The tree test results could then be used to evaluate the findability.
More details of the tree test results are available on my shared results addresses on Optimal Workshop as follow:
Persona Mark's Tree Test Result Set 1
Persona Mark's Tree Test Result Set 2
Persona Mark's Tree Test Result Set 3
Persona Mark's Tree Test Result Set 4
Persona Jessica's Tree Test Result Set 1
Persona Jessica's Tree Test Result Set 2
Persona Jessica's Tree Test Result Set 3
Persona John's Tree Test Result Set 1
Persona John's Tree Test Result Set 2
Persona John's Tree Test Result Set 3
Persona John's Tree Test Result Set 4
Overall, the tree test results were conclusive enough to prove the proposed site structure would work before getting into the interface design.
Information Architecture
The proposed information architecture shortened the path between users' first clicks and their intended destinations.
The existing information architecture has a lopsided distribution of content that created too many layers of navigation and contributed to poor content discovery and recall. The highlighted items contain the relevant information for the personas' needs and pain points.
The new information architecture provides a faster and more user-friendly information access.
Interface Design
The driving force behind the interface design was how users find content on a website. Based on the usability test on the current website, there are generally 2 main ways that users find content on the website:
Users know exactly what they are looking for, know how to describe it, and might even know where to start looking. So, they are likely to go right into menus (or use a site's search function). When the information is organised properly (or search function returns relevant results), users are likely to be able to find what they want. Therefore, this is where a well-designed and -tested information architecture is key in my solution because users can then identify which navigation items to choose from.
Users have an idea of what they might want to know, but might not know how or where to find. They might use the menus to explore if there is anything that seems to be relevant. Therefore, this is where navigational labels should be carefully considered and were also tested as part of testing the information architecture. At the same time, related links and contextual links were provided based on the related topics that users would be viewing. These guided users find what they need faster without having to go to menus each time.
Related links: "Why NTU?", "Affordability", "International Students"
Contextual links: "scholarships" in the body, and department/office contact information
FINAL PROTOTYPE
A low fidelity prototype was created with Axure.
Usability Test
Six participants who fit the persona of Mark were recruited for a usability test of the prototype on laptop (Project deliverable: Prototype with key interactions for at least one of the 3 personas' tasks on desktop platform). The goal of this usability test was to observe how they use the prototype (e.g. noting where they begin navigation as well) to get feedback on the website functionality and whether it was more usable and findable than the current website.
Generally, all participants found it easy to find information on the prototype. They also commented on how some new features (such as fly-out menu up to the third level links, and dropdown selection list on home page) facilitate their navigation. Most importantly, the main and location navigation items fit well with the categories that they think the information should be classified under.
Fly-out menu up to the third level links
Dropdown selection list on home page
The project succeeded in producing a design concept that all participants of the prototype usability test agreed that it was easy to use, and that they would use the proposed site frequently. Most of them agreed that the site was well integrated, and that they felt confident using it.
Users managed to find all of the right information on the prototype with the same amount of time. This is a drastic improvement from the current website.
All participants agreed that the prototype was easy to use, and that they would use the site frequently. The majority of participants (83.3%) agreed that the prototype was well integrated, and that they felt confident using the prototype.
User Flows
The goal of user flows was to map the flows that take users from their entry pages through conversion funnels. There could have been several entry points, not necessarily starting from the home page and/or in a linear flow. However, for simple comparison, user flows starting from the home page were mapped out for the existing website and prototype. Generally, it was evident that the paths between users' first clicks and their intended destinations were significantly shortened.
RETROSPECTIVE
What went well?
I enjoyed the process of user research the most because it widened my perspective on everything — it was interesting to learn how people perceived the context, content, and labels based on their personal experiences, exposure, awareness, and actual motivations. This process was also the most challenging at the same time because I can expect the unexpected — what was not intended was that some users, to avoid thinking about the meaning of the category names that seem alien to them, would resort to using search field constantly.
Although I was new to Axure, creating an interactive prototype on Axure became easier and faster than expected once I grasped the essence of it.
What could have been different?
If I had more time, I would work on the visual design of the prototype, and conduct usability tests on the prototype for personas Jessica and John as well. In addition, I should have retained the global navigation that occurs on every page of other NTU sites for page consistency, even though it might pose some navigational confusion for users based on the usability test on the current website.
Learnings
- Start any project off on the right note — begin with a good attitude, plan and action to avoid rework later.
- Allocate buffer time for working with unfamiliar software applications — never let a tool usage become the Achilles heel.
- Look back on the project objective every now and then to ensure every actions made thus far align with the objective.
