Reimagining NTU EEE Website - A Case Study
Reimagining UX for NTU EEE Website - A Case Study
Attracting bright talents into the world of engineering
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.
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
Team Size: 3
User Researcher, UI Designer, Usability Researcher
Cart Sort, Tree Testing
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.
Based on the user interviews, we synthesize using affinity mapping and found these top three concerns:
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.
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:
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.
Information available is inconsistent across programmes; confusing the participants on which page they are at now.
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:
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.
Design Goals :
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
Proposed Information Architecture
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:
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:
Usability Test Outcomes
Disclaimer: This is a project team work done as part of General Assembly's User Experience Design Immersive 10-week Programme.
iGV MakeoverProject type
NTU EEE RedesignProject type
Travel AssistantProject type