Reimagining NTU EEE Website - A Case Study

Reimagining UX for NTU EEE Website - A Case Study

Attracting bright talents into the world of engineering

 

CHALLENGE BRIEF

Redesign the Information Architecture (IA) and key pages layout / wireframes of NTU EEE website. The design should meet the user goals represented by the 3 given personas, the goals of the school, and align its existing brand.

 

Disclaimer: This is a project work done as part of the General Assembly's User Experience Design Immersive 10-week Programme.

CHALLENGE BRIEF 

Me and two other teammates were assigned the NTU EEE website for our Project 2 assignment. It was the first team project the class were being grouped together for the UXDI programme and we only had two weeks to execute it. So, we first set out on project planning to better manage our milestones and to keep in check on the deliverables. Redesign the Information Architecture (IA) and key pages layout / wireframes of NTU EEE website.The design should meet the user goals represented by the 3 given personas, the goals of the school, and align its existing brand.


Team : Charissa Pang, Merle Fu, Muhamad Azrul

Role Played: User Researcher, UI Designer, Usability Researcher

Tools Used

Sketch, Axure

 

Team Size: 3

Project Duration

2 Weeks

 

Role played

User Researcher, UI Designer, Usability Researcher

METHODOLOGY APPROACH

Discovery 

Cognitive Walkthrough

Heuristics Evaluation

Competitive Analysis

Define

Design Goals

Sitemap

Cart Sort, Tree Testing

Information Architecture 

Develop

Wireframing

Prototype

Usability Testing

DISCOVERY

In view of the short project time, we chose to focus on John’s persona (returning alumni) from the given personas as our primary user. We interviewed those with a similar profile to validate their needs and pain points from the persona provided.

Picture1a
Screen-Shot-2018-12-07-at-1.58

Based on the user interviews, we synthesize using affinity mapping and found these top three concerns:

Cost


Programme Info 

Reputation

Total cost, financing options with the lowest rates of interest loans and available subsidies applicable to them to defray cost

Relevancy of curriculum, learning outcomes, application to their field of work

Renowned background, brand relationship and career prospects through student testimonials.

Heuristic Evaluation
Then, we assess NTU EEE's website to provide a frame for the redesign. The top three issues that came out from heuristic evaluation using Jakob Nielsen's 10 Usability Heuristics are:

Screen Shot 2018-12-03 at 1.22.26 PM
Screen Shot 2018-12-03 at 1.22.27 PM

Flexibility and efficiency of use

Time-consuming to click through and digest information. At times, participant needs to exit NTU EEE website to main NTU website.

 

User control and freedom

Information such as financial aid scheme is locked in separate PDF pages, making it cumbersome to compare. 

 

Consistency

Information available is inconsistent across programmes; confusing the participants on which page they are at now.

Competitive Analysis

Through competitive analysis, we looked at how others had done better and how did NTU compare among them. These are the top three issues that the website requires improvement on:

  • Navigation
  • Lack of consistency
  • Difficulty in finding the right information

We found the same issues while doing the cognitive walkthrough and looking at the personas user flow which solidifies what we need to focus on first.

Screen Shot 2018-12-03 at 1.22.30 PM

DEFINE

Design Goals :

  • Allow users to sieve out key information more efficiently and effectively
  • Facilitate easier and faster navigation on the NTU EEE website
  • Increase user satisfaction when using the NTU EEE website, with a more pleasant experience

With the huge amount of data pages, we initially did open card sorts using e-post-its to validate the thought process of the users. We asked them to group together what makes sense to them and look out for outliers. Based on their input, we drafted our 1st IA for the NTU EEE website. 

Current Information Architecture

Screen Shot 2018-12-07 at 2.45.44 AM

Proposed Information Architecture

Screen Shot 2018-12-07 at 2.45.50 AM

DEVELOP

With the refined IA, we proceeded with sketching of the wireframes for global navigation, key page templates, section pages, key custom functions and detail pages. We identified them first to ensure consistency across all the pages to be made.

After which, we create the mid-high fidelity version as we would need enough information and structure to be able to do a proper usability test. Here are some of the key components improvements:

  • Highlight ranking and reputation to bring out NTU EEE's identity and achievements for better branding engagement with the students
  • Clear separation between News, Events and Programmes to have clear hiearchy as participants did not see the relation
  • Consistent and clear main navigation bar, just one and not double which participants found misleading and confused
  • Programme details on a single page for easier navigation without going through different pages for related items
  • Financial aid calculator where students are able to filter easily without looking through a long pdf spreadsheet.
Screen Shot 2018-12-07 at 2.41.17 AM

Once we had our first working prototype developed using Axure RP, we sourced for participants who fit John’s persona (working professional looking to further studies, NTU alumni). In total, we had 6 participants for usability testing. They were asked to complete four tasks that represented the persona’s needs and pain points. These were also measured by the following metrics:

Quantitative Metrics

  • No. of Clicks
  • Duration taken to complete task
  • Satisfaction Ratings (1 - 10)

 

Qualitative Data

  • Paths taken by user
  • Observations
  • User Comments (Things I like/ can be improved on)

Usability Test Outcomes

Screen Shot 2018-12-07 at 2.36.20 AM
Screen Shot 2018-12-03 at 1.22.53 PM

NTU EEE Website

Insight

  • Time-consuming to click through and digest information. User needs to exit NTU EEE website to main NTU website, and does this without realising
  • Information is locked in separate PDF pages, making it cumbersome to compare.

Reflection

  • I would have done certain phases differently, like translating from sketch (lo-fi) to mid-fi (grayscale) to have a better conversation discussion on how best to design the website layout, its functionality and transitions.
  • Consider evaluating the websites using the SUS tool

Disclaimer: This is a project team work done as part of General Assembly's User Experience Design Immersive 10-week Programme.

Selected Works

iGV MakeoverProject type

NTU EEE RedesignProject type

Travel AssistantProject type