Redesigning IA & Content Strategy for National University of Singapore’s Faculty of Science Website

Departments within large universities, such as National University of Singapore (NUS), face overwhelming information architecture challenges. These departments are required to address the needs of a varied audience; yet at the same time, need to feel connected in some way to the larger university website.

MY ROLE

As a UX designer tasked with the redesign of NUS Faculty of Science’s website, I wanted to identify the existing business goals of the department and website, reevaluate the site’s IA and content strategy, and ultimately find a way to position and meet the experience and needs of prospective undergraduate students, while avoiding having to rebuild the entire website.

Disclaimer: I am in no way affiliated with National University of Singapore (NUS). This was done for General Assembly UX Design Immersive to exercise newly-acquired UX/UI tools and skills.

GOALS & OBJECTIVES

  • To design a new version of the NUS Faculty of Science website for both web and mobile platforms
  • To reevaluate and strategize the website’s content strategy and information architecture, so to easily and quickly address the goals and needs of the user: prospective undergraduate students
  • To retain the existing branding, business goals, and current volume of information

RESEARCHING THE UNIVERSITY

Branding & Business Goals: I first began my research by identifying key elements in the existing branding, layout, and business goals of the NUS Faculty of Science website. Analyzing the current website, I was able to clearly recognize that the primary goals of Faculty of Science with its website are to highlight faculty achievements, research breakthroughs by students and faculty, news and events happening within the department; and to maintain a close relationship with alumni and colleagues in the field. The current branding of the website is aligned with that of the larger university’s website in type and color; and with other departmental sites in layout.

After this initial analysis, I was curious to discover is how the needs of prospective undergraduates can fit within these existing business goals. Despite the ultimate objective of my redesign was prioritize the user needs, I did not want to neglect the business goals of the website and kept them in mind throughout my process.

Sitemap: Using Omnigraffle, I sketched out the sitemap of the global navigation in the header of the home page.

After which, I highlighted the pages that would be highly used by prospective undergraduate students.

Card Sorting: I conducted both open and closed card sorting with the navigation of the home page, in hopes to discover impressions a new user to the site would have. This was important to my research as prospective undergraduate students are mostly likely to be new users and visitors to the site.

The findings of the card sorting concluded that the biggest problem was the labeling of items in the navigation: they were either too broad or confusing, and their definitions did not match users’ interpretations and expectations in real life.

“I’m putting all the university admission cards in ‘Outreach’ because outreach to me means getting more applicants.”
“I’m assuming the group ‘Giving’ means giving to students, so I’ll put all the scholarship and financial aid stuff in there.”
“These cards with the word ‘Science’ are too broad.”
“I’m just putting the cards with the word ‘programmes’ together.”

Heuristics Analysis: Important to my research was a critique of the site by evaluating its heuristic principles. I applied Abby Covert’s 10 Heuristics IA Principles to analyze what was currently being done well and what needed to improve.

There was a lot of positive things that the website had: multiple ways to reach content; global header, layout, and search are all consistent; and the breadcrumb navigation in content pages helps the user know where he/she is within the site. That being said, there was a lot to improve, such as the labeling of the navigation and secondary pages; the difficulty of learning and navigating the dropdown menu for new users; and the inconsistency in pages across channels and how it fails to meet user expectations. Throughout my process from research to design, I made sure to validate and cross-analyze any ideation or redesign against these IA principles.


RESEARCHING THE PERSONA

Mark is a 17-year-old junior in high school. He is starting the college application process. He is an excellent student but has no idea where to begin in evaluating potential schools. He thinks he might be interested in majoring in Physics but he also loves Chemistry. Mark still isn’t sure whether he wants to live on campus and needs all the financial aid and scholarship opportunities he can find.

Task Flow Analysis: I chose to focus on Mark’s need to find college programs; and more specifically, picking a major. I drew out a task flow for Mark to find information on majoring in Physics at NUS Faculty of Science.

The findings of the task flow analysis showed that it would take Mark eight user actions through six page states to reach his final destination.


COMPETITIVE & COMPARATIVE ANALYSIS

Task Flow Analysis: I looked to other universities and selected one local and one foreign university to compare the same task flow.

Comparing these task flows, it is apparent that NUS Faculty of Science does not have the shortest route to the persona’s final destination. However, it also did not have the longest, which meant that there was room to improve and leverage against competitors.

Interaction Design: Because majority of problems discovered during the research process were associated with the site’s global navigation, redesigning the global navigation menu, which includes its UI, is important.

I began to tackle this opportunity by researching and looking to other websites (both universities and others) to see in particular the various ways global navigation and a dropdown menu could look and feel.

Le Coq Sportif (http://www.lecoqsportif.com/uk-en/)
Adidas (http://www.adidas.co.uk/)
Boston Globe (http://www.bostonglobe.com/)

Taxonomy & Classification: Another important step in my redesign was relabeling items in the navigation and reclassifying content pages — a common problem discovered during both the card sorting and heuristics analysis. Here’s a few examples of competitor universities and how they sorted and named items in their global navigation:

Cornell Tech (http://tech.cornell.edu/)
NYU College of Arts & Sciences (http://cas.nyu.edu/page/home)
UC Berkeley (http://www.berkeley.edu/)

DESIGN STUDIO & RAPID PROTOTYPING

Prioritizing Pages: Before sketching and wireframing, I used the sitemap of the Undergraduate navigation to decide which items and pages to design (based on the persona) and what to do in each redesign (based on results from heuristics analysis and card sorting).

Design Guidelines: As previously mentioned, I planned to use Abby Covert’s IA Heuristics Principles as a guideline to ideate and prioritize changes to make and to validate these changes. I selected and prioritized 12 areas for change and improvement to tackle in my redesign.

These design guidelines were selected by the frequency of the problem (how often it came up during research and analysis), the persona needs and goals, and feasibility.

Wireframing for Web: In sketching and wireframing the home page, I retained a lot of the elements that were positively critiqued in the heuristics analysis: global header, slideshow module, and layout. The biggest changes made were redesigning the dropdown menu, which includes contextual “helpful links.” This feature was inspired by an analysis of Boston University’s website: its dropdown menu includes a quicklinks section determined by top searches within the university.

Home page wireframe

I redesigned the sidebar navigation to directly address different target audiences. The press, news, and events modules were fused together and recreated to make it more engaging and friendly for new users, while retaining the site’s business goals (to highlight what was happening within the department and its achievements) and targeted audiences (faculty, alumni, and colleagues in the field). I also added the address of the department to the home page, a shared need across all targeted audiences and users.

Content page wireframes

In wireframing the content pages, I retained the breadcrumb navigation and layout (both positive points in the heuristics analysis), focusing on the redesign of the local navigation to make it concise with that of the home page; and to introduce more visual and engaging ways to present content in the body of the page.

Wireframing for Mobile: With the mobile version of the site, I retained and brought over elements from my website redesign, such as the slideshow module, news and events feed, and global navigation.

I made the UI of the dropdown similar to that of the website wireframe and redesigned the sidebar navigation and university intranet links to look and feel more mobile friendly.

I maintained the global navigation and quicklinks on all pages in the mobile site, allowing users to easily go back to previous pages or navigate to new pages during their browsing. I also embedded the local navigation of each page inside the body, to more concisely break up overwhelming amount of text in the body and avoid having multiple navigation modules in one page.

Rapid Prototyping, Usability Testing, & Iterative Design: Because the Faculty of Science website currently does not have a mobile-optimized version and prospective undergraduates (being teenagers) are always on their phone, I chose to prototype the mobile version of the site.

With the first iteration, I conducted three usability tests, giving each test participant the task of the persona: find information on a particular major.

Below are some of the findings and suggestions made from the usability tests:

1. Quicklinks icons need naming
2. Would like links to “Admissions” or “Apply” pages
3. Place local navigation before the body text to avoid the user scrolling through too much text to reach the links
4. Make local navigation into an “accordian menu” to decrease number of steps the user has to take to reach final destination

In the second iteration, I attempted to solve three of the suggestions (#2, #3, and #4 ) from the first set of usability tests; and usability tested with three more participants.

Conclusion: With the second and final iteration of the mobile prototype, I was able to accomplish 12/12 of the design guidelines chosen and prioritized at the start of the design studio.

After usability testing, I validated the prototype by comparing its task flow against the original task flow. The mobile prototype was able to accomplish the persona’s task of finding information on a specific major in five actions by the user, which is drastically reduced by the original task flow’s eight actions.


NOW WHAT?

If I were tasked to continue this project past rapid prototyping and usability testing, here are some of the next steps to take:

  • Prototype the web version and usability test
  • Create content inventory for all newly designed pages to give to developers
  • Reassess the goals and success of other secondary navigation
  • Fix all error pages within the site
  • Make all secondary and content pages consistent

Feel free to click around and explore NUS Faculty of Science mobile prototype on InVision. I would greatly appreciate any feedback and suggestions in the comment section below. Thank you!

One clap, two clap, three clap, forty?

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