NUS Faculty of Science Website Redesigned

Effective Information Architecture and Content Strategy

Opportunity Overview: The Faculty of Science(FOS) in NUS is facing large information architecture (IA) challenges while having to address the needs of a varied audience, and need to feel connected in some way to the larger University website

Project Goal: I will be redesigning the IA and content strategy around an experience for 3 personas of the FOS website. My design will meet the goals of our personas, the goals of the college, and its existing brand. I will have my designs will be tested by appropriate users and modeled after IA heuristic best practices.

Contextual Inquiry: I spoke with several current undergraduates in NUS FOS as well as recent graduates of the FOS. None of them used the home page to browse for faculty information; it was too tedious a process to navigate around the site.

They will instead ask seniors for specific URLs of important webpages and then simply bookmark these pages. Sometimes they have to request their seniors to sit down with them and point out the relevant page flows to get information they need.

My personal mission is to redesign the page such that our personas can experts and expertly browse through the FOS site to complete their individual tasks; first time, everytime.

Understanding my process:

Discover: Conducting user research and gain insights into behaviors of the relevant our relevant personas. We also want to draw learning points from other universities which incorporated effective IA strategies on their websites.
Define: Analysizing our data to gain meaningful conclusions on our research. This phase enables us to develop meaningful designs for our new website.
Develop: Sketching and creating Wireframes to communicate my design ideas. Multiple versions and various fidelities (low to medium) will be produced to finally lead to a interactiveprototype(s).
Deliver: Interactive Prototype will be tested by allowing test participants to complete the journey from home to browse for content and interact with it. Before and after user flow comparison will be createed to show how test subjects performed the tasks on my site compared to the original.

Defining success goals and metrics of redesign:

1. User must use less steps to arrive at their required information page for their task.

2. User must have reduction in required browsing time to complete their task.

3. Heuristic Evaluation scorecard must show improvement.

Tools Used for this Project

Branding of National University of Singapore

Knowing our Business Goals.

From modest beginnings in 1929, the Faculty of Science has grown into one of the largest Faculties in the National University of Singapore with more than 6,000 students and over 500 full-time staff.

Adhering to its rich history, I will be working closely with the Corporate Identity Guidelines: http://www.nus.edu.sg/identity/guidelines.php

Corporate Colours to be used are PMS 152 Orange, PMS 294 Blue
Font styles of Verdana, Frutiger, Times New Roman
Proper usage of the NUS Logo

Details of Personas

Although I was given 3 personas for this project, focus will be on the needs of Jessica on John. Mark is still an important persona and we will later find that my redesign caters for him as well.

Sitemap of currently website

How is information currently organized.

Summary of findings:

  1. There are 4 levels of information currently on the webpage; this can be reduced to just 2 or 3 levels straightaway.

2. Several duplicated navigation links such as ‘Overview’, ‘FAQ’, ‘Fees’, ‘Minors’. This makes it confusing for the users

3. ‘Current Student’ + ‘Prospective Students’ makes a potentially useful grouping for the information on the site.

4. The grouping of ‘Undergraduate’ and ‘Graduate’ is confusing; these 2 groups contained academic and administrative information. If my users needed miscellaneous information for Undergraduate Programs, I see them clicking here by mistake. Potentionally a group to change.

Comparative Analysis

With MIT School Of Science & NTU Division of Physics and Applied Physics

2 other Universities were chosen to have their websites for comparison. In addition, as our personas will potentially be accessing the website through mobile devices, I also studied the mobile responsiveness of both the MIT, NTU and NUS sites.

MIT is the only webpage with a mobile responsive design. NUS and NTU are both mobile unresponsive. This will greatly influence my design direction later on.

Splitting Graduate and Undergraduate under ‘Academic Programs’ is a great way for clearly separate each groups of students, yet is able funnel them towards this group for academic related information. I may take cues from this for my overall design.

Content Inventory

Cataloging individual modules of the FOS webpage

I created an inventory in Excel to catalog the important webpages for the FOS.

I realized that many modules can be reused such as the global navigation and the accordion modules.

The Header and Footers as well as the Quick-Links column on the right can we incorporated into my redesign. The content inventory enables me to effectively communicate my redesign to the developers and also gives them an easier job when I choose to reuse certain modules.

CardSorting & Interviews

Insights into users behavior of organizing information.

I start with a closed card sorting for the first round. This involves writing all the navigational topic on pieces of paper and instructing my participants to categorize them into pre-set groups. I then interviewed the participants to get a deeper understanding into their thought process during the card sorting.

Findings:

  1. Participants had difficulty making sense of cards with Acronyms such as ‘SMP’, ‘SRP’, ‘CHAOS’, ‘UPIP’, ‘S/U’. As these terms do not closely relate to our personas, I have decided to remove them.
  2. Participants complained about the vast number of cards with repeated meanings (I highlighted this during the Site Mapping earlier.) This feedback led to my decision to remove repeated cards.

I conducted a second round of card sorting, followed with interviews, again after editing the cards in response to the earlier participant feedbacks.

Findings:

  1. One participants suggested creating a ‘Campus Facilities’ group in order to categorize important school amenities for the Personas such as John’s need for Childcare and Mark’s need for food and lodging etc.
  2. The groups ‘Giving’ and ‘Outreach’ at the global navigation bar did not make sense to anyone and was left empty during all the card sorting. Furthermore since both are irrelevant to our Personas, I will be removing them.

The Third round and the Fourth round of card sorting (conducted via the Sort Application) was concluded with the following findings:

  1. By changing the ‘Undergraduate’ group name to ‘Undergraduate Programmes’, my users automatically correctly sorted academic cards to this category. In response to that, I also changed the ‘Graduate’ group name to ‘Graduate Programmes’.
  2. Participants responded well when I created a the ‘Careers, Jobs, Internships’ group to categorize all career related cards for Jessica’s Persona specifically.

Heuristic Evaluation of the NUS FOS page

Abbey Covert’s 10 Heuristics

After an indepth analysis of the NUS FOS page was done, atable was created to summarize the positive and negative scores with reference to the 10 Heuristics developed by Abbey Covert. These Heuristics are useful in understanding how well designed the website is for user experience.

The scoring percentage uses the following formula:

100% x (Positive Heuristics)/ (Positive Heuristics + Negative Heuristics)

Despite the FOS page having a large number of positive heuristics, the overall score is still dismal.
Our redesign will aim to achieve a much higher score.

Task Flow Analysis

Comparing user task requirements across universities.

We will be focusing on the following tasks:

  1. Finding Career information for Jessica.
  2. Finding Childcare information for John.

The search bar cannot be used and the each task had to start from the respective faculty home pages.

Finding Career Information for Jessica
Time recording was taken after the completion of each task.
Although NUS was ahead of MIT and NTU, we will strive to reduce the number of steps to 2
Finding Childcare information for John
It is impossible for John to access Childcare information from the FOS Homepage. Using the search bar or google was the only way to land on the Childcare page for NUS.

New Sitemap Created:

Using the research we obtained and conducting the necessary analysis, we created a brand new site map.

This new sitemap was will be used to inform the creation of our wireframes, design studio and eventually the interactive prototype.

Paper Prototypes and Low Fidelity Wireframes (Mobile)

Poor design on mobile platform.

NUS FOS is currently not mobile optimize. Users will see the exact same desktop screen but in much smaller scale. Text are incredibly difficult to read and users have to constantly zoom in and out in order to navigate around.

We will focus our design for the mobile platform of the webpage first.

Paper Prototype (Mobile)

I started first by sketching the layout of the paper prototype.

Low Fidelity Wireframe (Mobile)

Design Keypoints

  1. Layout of the mobile version is congruent with Global NUS Layout.
  2. NUS Logo is always on the top left to align with the University’s guidelines.
  3. Drop down menu will be similar to desktop version for uniformity.
Medium Fidelity wireframe (Mobile)

Design Keypoints

  1. Mobile version is now user friendly and has similar design cues with the NUS global mobile version.
  2. Persona John can now achieve his task from mobile devices..

Medium to High Fidelity Wireframes (Desktop)

Redesigned NUS FOS Homepage
Redesigned NUS Homepage (with menu drop down)
Redesigned NUS Childcare content page

Prototype Usability Testing

Results after 4 usability tests.

Feedback on my desktop redesign proved very positive. I then moved forward to creating the interactive prototype.

1st Scenario: John is need to mail the childcare application form of his son to the Childcare Centre in NUS. He has forgotten the address and wonders if he can find it from the FOS website.

2nd Scenario: Jessica wants to get career advice from the Career Advisor Jenny Tan. Jessica plans to email Jenny to make an appointment.

Interactive Prototype: https://dl.dropboxusercontent.com/spa/f3s5pw8d7aeeb63/Exports/Project%203%20NUS%20Science%20Redesigned%20Desktop%20Prototype/Project%203%20NUS%20Science%20Redesigned%20Desktop%20Prototype.html

Summary of Success Goals and Metrics

How well did I perform after redesign?

Based on the following tasks:

  1. Finding Career information for Jessica.
  2. Finding Childcare information for John.

The original task design required Jessica to use 3 steps and she would take 45s. John however will not be able to completed his task despite how much time he takes (we set his time wasted on trying to do so as 3mins)

The redesigned webpage requires only a combined number of 7 steps and 60s of time for both tasks. This is an overall reduction of more than 75%.

Overall Heuristic Evaluation has improved by 7.6%

Next Steps:

  1. I would like to explore additional functions for my interactive prototype; search bar etc.
  2. In addition, I want to conduct more usability tests with these new functionalities to validate my earlier research or to make changes.
  3. I plan to work with the development team to create the mobile responsive webpage as soon as possible. Most students use mobile devices to explore and surf webpages and we definitely want to engage them from the moment the land on our URL.
  4. Hold individual meetings between the developers, designers and faculties to further our discussions of what additional information they require from me.

Personal Takeaways:

  1. Be specific about participants for card sorting activities; they must be as close to the personas as possible.
  2. Begin with the activity of Site Mapping first before conducting Card Sorting.
  3. Pick up data visualisation skills to better drawn insights from data.
One clap, two clap, three clap, forty?

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