Redesigning the NUS Faculty of Science Information Architecture & Content Strategy


The Brief

Redesign the information architecture and content strategy of the NUS Faculty of Science website.

The Challenge

The solution will need to:

  1. Meet the needs of a varied audience
  2. Connect back to the mother brand

Time Frame

2 weeks

Team

1 Pax

Tools

Pen & paper, Sketch, Omnigraffle, InVision, Powerpoint, Google Forms, Google Folder

The Process

Double Diamond Method
  1. User Research

The following personas were provided.

In order to derive deeper user insights for the 3 personas provided, a series of phone interviews were conducted with 2 prospective international students, 2 current undergraduate students and 2 prospective graduate students.

Below additional insights were derived:

  • Current students — they don’t use the Faculty of Science (FOS) website much after their 1st few months in NUS as most information is found within intranets or learning management systems. In those first few months however, two common pain points were brought up 1) use of inside baseball terms (terms unclear to anyone not working or studying in NUS) and 2) what system does what and the links to access them.
    >> design implication #1 — revise taxonomy to improve clarity
    >> design implication #2 — consolidate links and descriptions of various systems in the form of a ‘cheat sheet’ to increase convenience and provide more value to users
  • Prospective international students — they refer to the NUS Undergraduate Admissions website instead of the FOS website for information as the Admissions website contains all the information they need. They turn to their seniors, mentors and teachers if they want to learn more about college-specific information such as student life, what major to read etc. instead of going through the website. They have very short attention span and will skip through content that is too lengthy.
    >> design implication #3 — redirect users to Admissions website
    >> design implication #4 — explore content formats such as infographics or incorporating more visuals to break up text-heavy content and delight users
  • Prospective local graduate students — these are busy working professionals with limited time. They prefer to email or talk to an Admissions Officer who can address all their enquiries or to a lesser extent, gather required information from a programme brochure. As taking a postgraduate course is a hefty investment, in terms of both time and money, they like to attend events such as programme previews before making their decision. Brand image and currency of content curriculum plays a big part in their consideration.
    >> design implication #5 — CTAs to download brochure, online chat; contact information and event information need to be prominently featured to increase findability
    >> design implication #6 — ensure all information required is easily accessed without having to go through multiple user steps to improve accessibility
    >> design implication #7 — ensure content is current and aesthetics of website reflect the prestige of the NUS brand adequately. This will improve credibility.

Contextual inquiries were also performed with a prospective undergraduate student and a prospective graduate student, with each of them tasked to search for admissions requirements for a programme of their interest and additional information they might be interested in.

Insights derived from Contextual Inquiries:

  • KS, the prospective graduate student was not sure what was the difference between ‘Research Programmes’ and ‘Coursework Programmes’ and found it cumbersome to have to navigate through 3 webpages before he was finally able to access list of programs available. The M. Sc. in Quantitative Finance webpage came across dated, there was no programme brochure he could download and additional information such as class profiles, program outcomes (post-programme salary & employment statistics) were missing. 
    >> Design implication #8— reduce steps taken to get to programme information, incorporate programme brochure & additional information
  • Ben, the prospective undergraduate student had difficulty finding information on student life in NUS which was buried under ‘Home’ > ‘Current Students’ > ‘Ready for Career’ or ‘Home’ > ‘Undergraduate’ > ‘Information for Prospective Students’ > ‘Science Prospectus 2015’. 
    >> Design implication #9 — feature required information upfront and prominently

2. Brand Research

The first issue spotted was that the site was not mobile responsive which affects findability and accessibility >> Design implication #10 — make site mobile responsive

Navigational Sitemap of NUS FOS Website

A navigational sitemap was mapped out in order to understand how the site is structured. The following issues were uncovered:

  • Many 404 pages
  • Too deep (4 levels) and broad (10 levels) leads to click fatigue & hinders findability and usefulness
  • Certain information required by personas not found which decreases usefulness, controllability and credibility of the site. Eg. ‘Student body make-up’, ‘Student-Teacher ratio’, ‘Campus housing’, ‘Childcare services’
  • Duplicated content housed within FOS and other NUS websites. Eg. Fees

Design implication #11 — simplify navigation

To determine the new navigation and labelling, closed-and-open card sorts were conducted with 8 users, 5 closed and 3 open.

Findings of closed-and-open card sorts uncovered the following:

  • Users were confused by usage of numerous inside baseball terms, which confirmed findings uncovered during user interviews
  • In the open card sorts conducted, users had the tendency to first sort according to their roles, i.e. they first gathered all content relevant to them in 1 group (role funnel) and subsequently further sorted the content via user goals (function funnel)

Competitive analysis — Task Flow Analysis

Task Flow Competitive Analysis — Number of user steps and page states required for user to navigate from homepage to programme page

Competitive Analysis — Content Strategy

Apart from comparing user flows, I also looked at the content strategy for both NUS Business School and Harvard Business School.

Content Templates of Harvard Business School Homepage (Left) and MBA Homepage (Right)

Both the global navigation of Harvard Business School (HBS) and NUS Business School (NBS) websites are organised via a mix of user roles and user goals. However, NUS Business School homepage included local navigation based on user roles that would allow different audiences to access relevant content quickly, the homepage also included contextual links to all their programmes which again, increased findability as well as accessbility.

Further down the homepage was a display of the school’s accreditations which increased credibility.

The content strategy of the NBS and HBS websites also addressed all of Mark’s and John’s needs and pain points. 
>> Design implication #12 — Consider utilizing content strategy of HBS and NBS for NUS FOS website

Content Templates of NUS Business School Homepage (Left) and MBA Homepage (Right)

After going through the findings yielded from sitemapping, card sorting and competitive analysis, the following design solution and revised navigation + taxonomy was proposed.

Initial Paper Prototype (Desktop version)

The proposed navigation was iterated with further rounds of closed card sorting, with the final navigation depicted below:

Revised global navigation for NUS FOS website

Usability Tests

3 usability tests were conducted with the paper prototype with the following scenario and tasks.

Scenario 
John, a 38 yo Quantitative Analyst, is considering further studies to for career advancement. His mentor recommended he take up a Masters in Quantitative Finance. He still lives close to his alma mater, NUS Faculty of Science, thus that would be one of his considerations. He is also concerned about cost and possible financial aid.

Task
1. Look up the Master of Science in Quantitative Finance programme via the NUS Faculty of Science website
2. Find out the total costs associated with the program and if there are financial schemes that can help offset the cost.

After a few rounds of iterations, I proceeded to medium fidelity prototyping and also developed the mobile version.

The working prototype (desktop version) can be accessed via https://invis.io/HD5I9Q1FG

Mobile Wireframes v1

Next Steps

  1. Perform more usability tests with both desktop and mobile versions, iterate and refine design
  2. Populate remaining content inventory sheets
  3. Populate remaining content templates
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.