National University of Singapore (Faculty of Law) Website Redesign

Information Architecture and Content Strategy Overhaul

BRIEF

I am tasked to redesign the Information Architecture (IA) and content strategy around an experience for users of a college websites. My design should meet the goals of the users (represented by the 3 given personas), the goals of the college, and its existing brand. The designs should be tested by users and follow IA heuristic best practices.

FIRST IMPRESSION COUNTS

Before i went into the analysis of the NTU Law’s website, I decided to seek opinions of people whom have yet visited the website.

I interviewed four people and the above are some of the highlight quotes about their impression of the website. From here, my key takeaway is that the website needs to be more colourful and increase the usage of visuals to capture their attention.

COMPETITIVE ANALYSIS

In order to increase the breadth and depth of my research, as well as get a sense for the overall University competitive landscape, I chose to compare NUS Law to two other competitor Universities (Nanyang Technological University and Singapore Management University):

Also, i adopted the Abby Covert’s Heuristic Evaluation approach to further analyze the website and here are some of the key findings:

From the heuristics evaluation, NUS Law’s website received 16 positive reviews but unfortunately 19 negative issues.

My key takeways: 
- Mobile-responsive
- Look-and-feel needs to be more consistent 
- More social media platforms

PERSONA

In this project, we were given three personas

While keeping all three persona’s in mind, for this project I focussed on Mark and his needs.

USER FLOWS COMPARISON

With the comparison of the other two unversities, SMU has the least clicks (two clicks) required from the user, while NUS was ‘ranked’ second with six clicks and lastly NTU required 7 clicks (however from some point in time users were brought to the homepage of NTU and not within the faculty website)

CARD SORTING

Card sorting is a process when participants place all of the the navigational topic onto flashcards, and asked individuals to place them into similar categories. This allows me to see how users would navigate around the website.

1ST ROUND: OPEN CARD SORTING

I’ve gotten three individuals to participate in the first round of card sort.

Quotes from the participants

This process brought several insights to light:
1. The namings of the global navigation are confusing
2. Essential information is not obvious enough

2ND ROUND: OPEN CARD SORT

With the open card sort, I gathered two individuals whose ages are closer to my given persona, Mark (17 years old). This approach allows them to name whatever categories they wish with the given flashcards on hand.

My observation was that the participants want simple-to-understand categories and the main key takeaway was a large number of cards were irrelevant to them. It was quite clear to me that what i deemed was important for Mark was actually not. Thus it’s important that when comes to card sorting, one need to find participants who are very demographically close to the target users.

3RD ROUND: CLOSED CARD SORT (WITH NEW CATEGORIES)

After the two rounds of card sorting and the observation of trends, I came up with proposed categories and gathered three individuals to sort them.

Three participants sorting with the proposed categories

From the observation, the individuals had no issue sorting out the information and could finish it within 15mins. As such, I proceeded to relook at NUS Law’s current site map and worked on a new site map.

SITE MAP

The current site map (as shown below) shows that there was 8 global headers and 5 levels of navigation. However, the essential information were found mainly at fourth level and that would require too much of navigation for new user like Mark.

Current site map
Highlighted areas are the key essential information where Mark needs

With the needs from Mark, I focussed on sorting the information which is highlighted above and worked on a new site map.

New site map

As you can see, I’ve narrowed the level of navigation from five to three and reduced the headers from eight to seven and renamed the global headers.

DESIGN ITERATIONS

With the above research, takeaways and analysis, I worked on the features requires based on priorities.

Key features that the new website would encompass

DESKTOP & MOBILE WIREFRAMES

With the features priorisation, I’ve worked on my design and allowed me to devise a new homepage that encompassed all those focused areas.

Desktop wireframes
Mobile wireframes

New features to be featured: 
- Rename of categories for global headers
- Increase the size of banner carousel 
- Showcasing more social media platforms
- Making use of visuals as part of active hyperlinks

USER TESTINGS

With the wireframes, I’ve came up with higher fidelity for users to test. I went through three rounds of tests and with the feedback given by individuals, below is the final look-and-feel of the website and mobile.

Final mobile template
Desktop template

With the new navigation, I reworked on the user flow with the task in mind for Mark to look for scholarship requirement.

The user now only requires from 6 clicks to 4 clicks and I’ve also managed to reduced the number of page stakes from 4 to just 1!

Here’s a video of the protoype of one of the user who managed to finish the task:

NEXT STEPS

  1. I would like to do more user testings on my proposed website
  2. More visual interaction design

PERSONAL REFLECTION

I would like to focus on obtaining more research and synthesizing the information that allows me to extract key take away points. I will spend more time on visuals on Sketch when doing wireframes as users will be able perform the tasks easily.

Like what you read? Give Esther She a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.