Retrospective Document for National University of Singapore, Faculty of Science.
Universities that encompass many areas of study face large information architecture (IA) challenges. They need to address the needs of a varied audience and need to feel connected in some way to the larger University website.
To redesign the IA and content strategy around an experience for users of NUS FOS website.
To meet the goals of the given personas and NUS existing brand.
To test the new design with users and follow IA heuristic best practices.
First and foremost, we will compare the NUS main site and the FOS site to understand existing branding practices, layout organization and design decisions.
The header design of both sites are different. The FOS site uses a different shade of orange for the bar’s background with a different layout for the secondary navigation bar whereas the NUS global navigation is cleaner and properly aligned. The selected category is also highlighted in NUS’s standard blue and underlined in the standard orange.
The banner image for FOS’s site is fixed width and automatically changes after 3 seconds while NUS’s one is full width with sub images beneath for selection.
The body design of either sites are varied as well. The FOS’s site arranges the three different types of articles (Highlights, Published and Press Releases) from left to right. The NUS site displays the articles from top to bottom instead.
The NUS site utilizes a footer to house the 2nd tier categories as well as the NUS contact information. The social media links and legal disclaimers are also included here. The NUS site allocated a designated space for ‘Upcoming events’ instead of just a link.
The FOS site does not have a expansive footer like the main site and uses only a side navigation bar on the right with a series of quicklinks to direct users to another page that houses the information.
It is evident that the NUS site is responsive and mobile friendly while the FOS site is simply the web version displayed on a mobile device.
One important thing to take note is that the hover states of the FOS’s global navigation does not always work which resulted in many frustrating moments when searching for information on a mobile device. This turns away the younger generation prospective students who are more likely to use their smart phones or tablets to look for information.
Navigation Site Map
The first step to understand the current information architecture is by looking at the navigation site map. As it is not available, we have created our own version of the site map based on a few simple criteria.
- the flow ends when the link leads to an external landing page
- the flow ends if that particular FOS page has no other links
The categories are coloured coded and we have established several conclusion from our site map.
- Almost 40% of the categories lead to an external landing page which means most of the information is not stored within FOS site.
- There are several download actions which are mostly PDF downloads and not iOS-friendly.
- Empty pages and 404 Errors exist in the website which is unacceptable for any live websites.
- There are 8 tiers of information which means certain type of information is buried deeply in the website. Potential user click fatigue.
User Task Flows
From the personas, we have identified the profile of each person as well as the type of information they wish to obtain from the FOS site.
Apart from the user task flows for the NUS FOS site, two other Universities (local and overseas) were selected for the competitors analysis. The two Universities are:
- Massachusetts Institute of Technology, School of Science (MIT)
- Nanyang Technological University, Division of Physics and Applied Physics (NTU)
The competitor University with the lowest user steps/pages is selected for comparison with NUS FOS.
He is a prospective undergraduate student who is interested in pursuing the Physics Undergraduate Programme in NUS FOS. He will also need to find out about Campus housing details. And he uses his phone to uncover these information.
From the above, here are the user task flows:
MIT clearly outperforms NUS in this aspect with lesser steps and pages.
Even though NUS FOS has less steps, it was achieved by using the ‘Search’ bar as the Campus Housing details are not accessible from within the FOS site.
She is a current undergraduate student who is interested in knowing the upcoming events for NUS FOS. She will also require career advice. And she uses either phone or laptop to uncover these information.
From the above, here are the user task flows:
Both Universities are comparable as the quick-link to Upcoming Events exist on the main page.
NUS FOS outperforms their closest competitor which is MIT by having the least steps and pages to obtain the Career Advice Information. This means that the current steps should be retained.
He is a prospective graduate student who is interested in pursuing a Graduate Research Programme in Biological Sciences in NUS FOS. As he is single-dad, he will require childcare services information. He uses only laptop to uncover the information he requires.
From the above, here are the user task flows:
MIT outperforms NUS with lesser steps and pages.
Even though NUS FOS uses lesser steps and pages, the information was obtained through ‘Search’ bar as the childcare services information is not accessible from within the NUS FOS site.
Information Architecture Heuristics
Abby Covert’s 10 IA Heuristics Principles
The good and bad points from the Heuristics Analysis show which features we want to keep and which areas we want to improve.
From the bad points of the Heuristics Analysis, we have identified 10 key design issues that we will focus on for this iteration.
- Weak labels
- New tab for external page
- Not responsive
- Scattered key information
- Specific information not on global navigation
- No links to relevant information
- Important information not in FOS website
- Main navigation labels are not memorable
- Logo leads to NUS instead of FOS home page
- Poor organization of text within a page
Before we proceed on to our first prototype, we performed open and closed card sort to analyse how the current information are organized and grouping/naming of categories the users expect.
Closed card sort was practised first to find out about the users’ opinions of the current hierarchy of information.
Open card sort was used next to understand how users’ group certain categories intuitively.
By combining the results of both sorts, we have the results of what categories majority of the users got them correct and what they got wrong.
Across 80 card sort items, 8 users and 50 cards per user, here is the table of the results where red means majority got it wrong and blue means majority got it correct.
The findings of our Card Sorting is:
- Most of our users got the academic related information correct.
- However, there were great confusion at the following tier between Undergraduate and Graduate.
- The same goes for Prospective and Current Students
- Everyone sorted the items in Outreach’s category wrongly.
- The entire Dean’s Office category was misplaced. They were expecting to find write ups about the Dean’s Office instead of finding all the contact information there.
Another round of closed card sort was carried out to question our users on what names they will give to the group of items they have placed together. This is an important step where the categories of the website will be more user-friendly instead of University-friendly.
Categories that were re-arranged and renamed.
- ‘Undergraduate’ and ‘Graduate’ in the main navigation bar were grouped together to form ‘Prospective’. This is to reduce the massive confusion that was discovered during the card sort.
- ‘Current Student’ was renamed to just ‘Student’ and allocated to the top right Secondary Navigation Bar instead.
- ‘Staff’ was created to house all staff-related information.
- ‘Jobs’ was created to house the career opportunity within NUS. This is to avoid mixing up with ‘Career Advice’ or ‘Career Prospect’ which are directed to current students’ course of study.
- ‘Outreach’ was renamed to ‘Junior’ since all ‘Outreach’ items are programs specifically held for students in the junior level (Secondary school, Junior College, or Polytechnic)
Wireframe for Website
With the analysis results of our research, we are now able to create the wireframe for our web prototype using Sketch.
The design and layout of the web prototype was chosen to be consistent with the NUS main page which has many good design elements in it. This will also result in coherent branding throughout the University.
** to note: John, the prospective graduate student will be the selected persona that we will be designing for with our prototype. Website was chosen as John only uses laptop to search for the information.
Usability Testing of Wireframes
We performed usability tests for 3 users based on the two tasks for John’s persona. At this stage, we are only testing the accuracy of the first tier category names and will only accept their first try answer.
Task 1: You are interested to take up a graduate programme in NUS Faculty of Science, which label do you think will lead you to the programme information?
Expected answer: Prospective
Results: 100% Success and 0% Failure
Task 2: You want to check for childcare services in NUS, which label do you think will lead you to this piece of information? Exclude the use of ‘Search’ button.
Expected answer: Campus
Results: 33% Success and 66% Failure
Even with 1 out of 3 success for task 2, further conversation with the user revealed that it was a lucky guess and was planning to click on ‘Safety and Facilities’ instead.
From our usability tests, we were informed that renaming ‘Campus’ to ‘Campus and Services’ will be more appropriate to direct users there to find childcare services information. The reason is because ‘Campus’ is often linked to Map or Contact Information in the users’ minds.
Clickable Web Prototype
From our wireframes, we have included real content and images to make a more realistic testing environment for our users. Sketch, again was used to create this prototype fidelity.
The design was mainly adapted from NUS main page and refined based on the 10 design issues we identified during of IA Heuristics Analysis.
To reinforce what we have done about the issues, here are the results:
- Confusing labels have been removed and renamed to ‘Prospective’, ‘Junior’, Student’, ‘Staff’, ‘Campus & Services’ etc.
New tab for external page
- Quick fix for web developer.
- To be dealt with during Mobile Prototyping.
Scattered key information
- The new ‘Related Information’ bar helps to consolidate key information into one single page.
Specific information not on global navigation
- ‘Campus & Services’ category will help to house certain specific information that is useful to the user and made accessible from the global navigation.
No links to relevant information
- A more accurate ‘Related Information’ bar was created where it is based on user for for decision making.
Important information not in FOS website
- This is the Graduate Research Programme Course Fees Page which means key information are not stored within the FOS website instead of an external page.
Main navigation labels are not memorable
- Same as Weak Labels
Logo leads to NUS instead of FOS home page
- Certainly a quick and easy fix.
Poor organization of text within a page
- Proper paragrahing and spacing are applied to the body of text and images are used to add color and perspective to the long list of information.
Usability Testing for Clickable Web Prototype
We have tested the clickable web prototype based on the two specific tasks for John and here is one of the successful user test videos.
User Task Flow Comparison
So how does the user task flow for the redesigned site compare with the original task flow?
The new user task flow has improved and now matches the competitor (MIT)’s number of steps and pages.
The new childcare flow is still as short os the old FOS site but the information is now accessible from within the FOS page instead of having to use the ‘Search’ bar.
Conclusion and Next Steps
The clickable web prototype has achieved the objective it was set out to do. It is particularly heartwarming that based on the user tests, they are able to find our expected answers amidst the huge pile of information within the FOS site.
Here are some of the next steps we would like to explore with our next design iteration:
- Rest of Abby’s IA Heuristics findings.
As we have only dealt with 10 of the findings, the next steps will inevitably deal with the other bad-findings as we continue to refine and increase the number of good points while reducing the number of bad ones along the way.
- Mobile version prototyping.
Since we know that the NUS FOS website is not mobile friendly, we can devote some time for the next iteration to work on a mobile version so that NUS FOS will not lose potential students who are tech savvy and primarily uses mobile devices for searching.
- Site visitors’ movement analysis.
With regards to the ‘Related Information’ bar, it is important for us to track the movement of our users when they are using the website. The time spent as well as the movement within the website will help us determine what type of relevant information they wish to know while at a particular page. Improving the user decision task flow will certainly help to attract more prospective students to apply.
- Organization and re-labelling of information for the deeper tiers.
As we know that there are 8 tiers of information available via the old NUS FOS website, we should attempt to narrow it down to 4–5 tiers while regrouping and renaming categories.