P2_Mockup2

Redesigning the User Experience of NTU School of Mechanical Engineering's Website for Better Findability

Redesigning the User Experience of NTU School of Mechanical Engineering's Website for Better Findability

Rethinking the information architecture of a content heavy website to help users navigate seamlessly to find the information they seek.

Rethinking the information architecture of a content heavy website to help users navigate seamlessly to find the information they seek.

Responsibilities

Responsibilities

UX Design | UI Design

UX Design | UI Design

UX Techniques

UX Techniques

Content Audit | Market Research | Competitive Analysis | User Interview | Usability Testing | Hybrid Card Sorting | Tree Testing | Wireframing | Rapid Prototyping

Content Audit | Market Research | Competitive Analysis | User Interview | Usability Testing | Hybrid Card Sorting | Tree Testing | Wireframing | Rapid Prototyping

Tools

Google Sheets | Google Slides | Cards | Video & Microphones | Optimal Workshop | Sketch App | Axure

Team Members

Risiandi Jiang | Doren Ho | Suet Ning Wong | Ek Neng

Risiandi Jiang | Doren Ho | Suet Ning Wong | Ek Neng

My team and I were assigned to work on improving the user experience of NTU School of Mechanical Engineering website. We were provided with 3 different personas, each with their own pain points and needs that needed to be addressed.

The three personas were:

  1. Mark- a 17 year old, straight-A, junior high student looking to enrol into a university.
  2. Jessica- a 21 year old, current student in a university, needing to take up required courses.
  3. John- a 38 year old, working professional looking to upgrade his skills.

For this project, we focused on the first persona, Mark.

My team and I were assigned to work on improving the user experience of NTU School of Mechanical Engineering website. We were provided with 3 different personas, each with their own pain points and needs that needed to be addressed.

The three personas were:

  1. Mark- a 17 year old, straight-A, junior high student looking to enrol into a university.
  2. Jessica- a 21 year old, current student in a university, needing to take up required courses.
  3. John- a 38 year old, working professional looking to upgrade his skills.

For this project, we focused on the first persona, Mark.

P2_MarkPersona

Taking Stock of Website Content and Auditing It

Taking Stock of Website Content and Auditing It

We began the process by perfoming content inventory and auditing it. There was a total of over 900+ entries and we discovered a lot of broken links, outdated and duplicated contents.

We began the process by perfoming content inventory and auditing it. There was a total of over 900+ entries and we discovered a lot of broken links, outdated and duplicated contents.

CA_Sample

Content Audit was a tedious unglamorous work but proved to be an indispensable process and useful asset when tackling a site with large amount of information.

Content Audit was a tedious unglamorous work but proved to be an indispensable process and useful asset when tackling a site with large amount of information.

Recreating the Current Site Map

Recreating the Current Site Map

We had to recreate the current site map because the existing website didn't have one and we needed to get an overview of all the contents to understand the blueprint of the website and how it was structured. 

We had to recreate the current site map because the existing website didn't have one and we needed to get an overview of all the contents to understand the blueprint of the website and how it was structured. 

Csitemap

Competitive Analysis

Competitive Analysis

The team proceeded by doing further research on NTU's competitors' websites, namely, John Hopkins University, Michigan University and Singapore Management University. We performed internal usability testing based on the 3 persona's pain points and needs by employing time-on-task as a usability test metrics.

We proceeded by doing further research on NTU's competitors' websites. We selected 3 other universities, John Hopkins University, Michigan University and Singapore Management University as our competitors. We performed internal usability testing based on the 3 persona's pain points and needs by employing time-on-task as a usability test metrics.

P2-Competitive

Competitive Research Table based on our internal research analysis on NTU vs other universities.

Next, we reviewed the taxonomy of the site as a team and discussed how we could improve the labelling system of the mae.ntu.edu.sg site contents to reduce the confusion when executing certain tasks. We studied the areas which our competitors did better than our site by using time taken to accomplish certain tasks as benchmarks and developed an internal card sorting exercise. Employing hybrid card sorting, we use the existing labelling and allowed ourselves to create new ones if we felt it would help with the content organisation.

We then reviewed the taxonomy of the site and discussed how we could improve the labelling system of the mae.ntu.edu.sg site contents to reduce the confusion when executing certain tasks. We studied the areas which our competitors did better than our site by using time taken to accomplish certain tasks as benchmarks and developed an internal card sorting exercise. We employed hybrid card sorting where we use the existing labelling and allowed ourselves to create new ones if we felt it would help with the content organisation.

InternalCardSorting

In all the excitement, we forgot to take some pictures of myself in the mix.

When we were done, the team was satisfied but I felt that it wasn’t enough because everything we had done so far were based on our assumptions. We agreed to do a few rounds as a test, to see if the results would be different from what we had. And if it was indeed different, we would do more for all the other personas and analyse the findings.

When we were done, the team was satisfied but I felt that it wasn’t enough because everything we had done so far were based on our assumptions. We agreed to do a few rounds as a test, to see if the results would be different from what we had. And if it was indeed different, we would do more for all the other personas and analyse the findings.

We discovered that the results of were drastically different from our internal card sorting.

P2-PublicCardSort2

We approached at least four strangers for each personas at various neutral locations such as Lido cinema, Starbucks and SMU to help us with the Card Sorting exercise.

We collated our results from card sorting into dendograms and employed the best merge methodology since we had less than 30 card sorting participants. Dendograms allowed us to visually see how users organise contents during the card sorting session and indicated where they would expect certain contents to be grouped under. This in turn helped us in developing the information architecture at a later stage.

We collated our results from card sorting into dendograms and employed the best merge methodology since we had less than 30 card sorting participants. Dendograms allowed us to visually see how users organise contents during the card sorting session and indicated where they would expect certain contents to be grouped under. This in turn helped us in developing the information architecture at a later stage.

P2-bestmerged

A sample of a dendogram based on Best Merge Methodology which helped to visually showcase how users categorise information during the Card Sorting sessions.

More Public User Testing on the Current Site

More Public User Testing on the Current Site

The team decided to approach John and Mark personas at the Starbucks at Plaza Singapura first. We went in pairs, and we took turns to play the role of the test administrator and the recorder. We managed, with their permission, to do an on-screen recording for us to further study their behaviours. We also asked them questions when they did something unexpected, such as, reaching out for the main global navigation for ntu.edu.sg instead of mae.ntu.edu.sg. when performing their tasks.

We decided to approach John and Mark personas at the Starbucks at Plaza Singapura first. We went in pairs, and we took turns to play the role of the test administrator and the recorder. We managed, with their permission, to do an on-screen recording for us to further study their behaviours. We also asked them questions when they did something unexpected, such as, reaching out for the main global navigation for ntu.edu.sg instead of mae.ntu.edu.sg. when performing their tasks.

“It looks like the main navigation. I didn’t pay attention to the actual site navigation because it didn’t stand out.”

Heuristic Evaluation and Developing the Information Architecture

Heuristic Evaluation and Developing the Information Architecture

I spearheaded the heuristic evaluation of the current site, noting down the issues the users had faced as well as ones that I spotted as a usability expert. The heuristic evaluation was based on Jakob Nielsen’s 10 standards of website usability.

I spearheaded the heuristic evaluation of the current site, noting down the issues the users had faced as well as ones that I spotted as a usability expert. The heuristic evaluation was based on Jakob Nielsen’s 10 standards of website usability.

P2-HeuristicEval

Examples of Heuristics Evaluation of the current site where issues are noted down and recommendations for improvements are made.

Once the heuristic evaluation process was done, I proceeded working on the new user flows. I developed three user flows for Mark, Jessica and John, respectively, that would cater to every possible path that a user might take while performing the tasks.

Once the heuristic evaluation process was done, I proceeded working on the new user flows. I developed three user flows for Mark, Jessica and John, respectively, that would cater to every possible path that a user might take while performing the tasks.

P2-UserFlows

The user flows illustrated above caters to every possible path a user might possibly make when performing their tasks.

Once the user flows for all three personas were completed and I understood how users would navigate around to find the contents they need, I proceeded to work on a new sitemap for the proposed re-design of the mae.ntu.edu.sg using the card sorting results as the foundation of a new information architecture.

Once the user flows for all three personas were completed and I understood how users would navigate around to find the contents they need, I proceeded to work on a new sitemap for the proposed re-design of the mae.ntu.edu.sg using the card sorting results as the foundation of a new information architecture.

P2-NewSitemap

The new sitemap was fundamentally based on the Hybrid Card Sorting results we received from the participants we approached during the research phase.

However, I felt that some contents were better placed under different parent categories. So I experimented with tree testing on the three I wanted to change. I was only able to get five participants that fit the Mark persona for tree testing, but the results were pretty conclusive, while keeping in mind that some of the participants were not native English speakers and might find the hypothetical situation they were put in might be a bit confusing.

However, I felt that some contents were better placed under different parent categories. So I experimented with tree testing on the three I wanted to change. I was only able to get five participants that fit the Mark persona for tree testing, but the results were pretty conclusive, while keeping in mind that some of the participants were not native English speakers and might find the hypothetical situation they were put in might be a bit confusing.

P2_TreeTest

Sample results from Tree Testing.

Wireframing on Sketch and Prototyping in Axure

Wireframing on Sketch and Prototyping in Axure

I began with very lo-fi wireframe sketches just to get a few ideas out of how I would envision a better UI for the mae.ntu.edu.sg site. After that, I started working on Sketch to develop the look & feel of the homepage.

I began with very lo-fi wireframe sketches just to get a few ideas out of how I would envision a better UI for the mae.ntu.edu.sg site. After that, I started working on Sketch to develop the look & feel of the homepage.

P2_Mockup1

Usability Testing and Usability Reporting

Usability Testing and Usability Reporting

I conducted independent guerrilla usability tests at various cafes in Holland Village and on GA premises. The purpose of the test was to assess the usability of the prototype interface design, information flow and information architecture. I had the participants perform eight tasks based on Mark’s needs and pain points by putting them in hypothetical scenarios.

I conducted independent guerrilla usability tests at various cafes in Holland Village and on GA premises. The purpose of the test was to assess the usability of the prototype interface design, information flow and information architecture. I had the participants perform eight tasks based on Mark’s needs and pain points by putting them in hypothetical scenarios.

P2-Tasks

A sample of tasks objectives and the hypothetical scenarios that were given to the Usability Test participants. The Participants were only given the hypothetical scenarios.

The results were surprisingly positive with 100% success rate!

P2-SuccessRates

All Usability Test participants were able to complete their task with 100% success rate.

P2-TimeTask

Time taken included loading time. It would be much shorter in the range of half a minute in average if I deducted the loading time.

Writing the usability report adds credibility to the re-design proposal. It also provides clients with the necessary data they need and validates the re-design proposal.

Writing the usability report adds credibility to the re-design proposal. It also provides clients with the necessary data they need and validates the re-design proposal.

Learnings

Learnings

  1. I learned the importance of each step of the process when tasked with a re-design of a website, especially getting insights from relevant users through exercises such as card sorting, tree testing, and usability testing.
  2. I would like to improve on the processes for card sorting and user testing, to make it more formal and thorough.
  3. When in doubt, test, test and test some more to ensure we achieve the best outcome possible for improved user experience.
  4. Some processes might be tedious and unglamorous such as content auditing and usability reporting, but they are essential, especially in a real work situation.
  5. Developing an expertise in the tools we use is crucial, especially softwares such as Axure and Sketch.
  1. I learned the importance of each step of the process when tasked with a re-design of a website, especially getting insights from relevant users through exercises such as card sorting, tree testing, and usability testing.
  2. I would like to improve on the processes for card sorting and user testing, to make it more formal and thorough.
  3. When in doubt, test, test and test some more to ensure we achieve the best outcome possible for improved user experience.
  4. Some processes might be tedious and unglamorous such as content auditing and usability reporting, but they are essential, especially in a real work situation.
  5. Developing an expertise in the tools we use is crucial, especially softwares such as Axure and Sketch. Note to self: Explore other tools such as Adobe XD to expand my repertoire of software skills.

If I had more time, I would:

If I had more time, I would:

  1. Improve on the UI design of the sub-pages and fine tune the interactions.
  2. Add in the breadcrumb that is sorely missing and which was pointed out by my users through Usability Testing.
  3. Design the rest of the user experience for the other two personas (Jessica and John)
  4. Add in scrolling interactions for the Scholarship page for the list of Scholarships available.
  1. Improve on the UI design of the sub-pages and fine tune the interactions.
  2. Add in the breadcrumb that is sorely missing and which was pointed out by my users through Usability Testing.
  3. Design the rest of the user experience for the other two personas (Jessica and John)
  4. Add in scrolling interactions for the Scholarship page for the list of Scholarships available.

Selected Works

ZipHR Mobile Check-InUX + UI Design

Perx Loyalty Reward AppUX + UI Design

SG-MoviesUX + UI Design

NTUInformation Architecture + UX + UI Design