ntueee.png

NTU Website Redesign

ntueee.png

NTU School of Electrical and Electronic Engineering Website Redesign

 

Overview:

Role: UX Designer

Team: Mildred Cheng, Raphael Seng, Lim Jie Ying

Duration: 2 week sprint

Prototype: NTU EEE Redesigned Website

Project: My group worked together to redesign the Information Architecture and key pages of the Singapore Nanyang Technological University’s School of Electrical and Electronic Engineering (NTU EEE) website. We had two weeks to complete this project and conducted various analysis of the current website and how it could be improved, and finally validated with usability tests.


What are the goals of the school?

  • Upkeep brand as a world-class university

  • Enhance attractiveness of school for researchers and students

  • Engage alumni

 

What’s the problem?

  Current Website

Current Website

Competitive Analysis: We conducted a competitive analysis of competing schools; according to the pain points and needs of the personas that were given to us.

NUS performed the best in terms of how easy and how quickly (number of clicks/levels, ability to find) we reached our destinations. This analysis allowed us to see what was wrong with the website, but specific to the personas given.

Heuristic Evaluation: We evaluated the current NTU EEE website using Jakob Nielsen’s Usability Heuristics. This provided us with the basis of what we had to tackle for the redesign and concluded the following:

  • Inconsistent page layouts

  • Presence of many broken links and empty pages

  • Information deeply embedded into the website and difficult to find

  • Superfluous information and assumes users are familiar with acronyms

 

Personas: We were given personas to work with and to redesign the website based on their needs and pain points.

mark.png
john.png
Screen Shot 2018-12-05 at 8.54.24 PM.png
 

Redesigning & testing

Design Principles: We developed some design principles according to the heuristics identified.

  • Keeping the design simple

  • Consistency

  • Keeping breadth and depth in check

  • CRAP (Contrast, Repetition, Alignment, Proximity)

  • Maintain flow

  • Brand guidelines

adult-business-meeting-business-people-1438072.jpg

Re-sorting: Our card sort and tree test were very important in the re-sorting of the IA because it allowed us to see exactly what users expected. The card sort was done by inputting a slightly altered (according to previous heuristics) sitemap with primary and secondary levels. The results obtained from the card sort allowed us to draft our first iteration of a redesigned sitemap, and then reinsert that into a tree test for validation again.

 

Usability Tests: We conducted three rounds of usability tests where we asked NTU students to perform specific tasks according to our chosen persona, Jessica’s needs and pain points of a current student.

  Table shows the first two usability tests done according to tasks, and what changes were made (curriculum and modules were not tested the second time because all participants were able to find it easily the first time)

Table shows the first two usability tests done according to tasks, and what changes were made (curriculum and modules were not tested the second time because all participants were able to find it easily the first time)

  User flow of current website

User flow of current website

  User flow of redesigned website

User flow of redesigned website

 

Our final results showed that participants were able to complete the tasks much quicker on our redesigned website compared to the current existing website, and some participants were unable to even complete the tasks on the current website.

The current website scored a SUS score of 48.3/100, while our redesigned website scored 85/100. Therefore, we can conclude that the redesign was a success.

  Final information architecture

Final information architecture

 
ntueeescreens.jpg

NTU EEE Redesigned Website

  • Presence of sidebar to indicate user’s location

  • Consistency of layout

  • Working links

  • Breadth and depth of information minimised

  • Micro-interactions in order to maintain flow

  • Minimalism and simplicity

 

Thoughts

  • I learned that it is very important to use participants that are as close to your target audience as possible, simply because their prior knowledge and experiences can have large effects on the results.

  • In a redesign, finding out and proving what is wrong with the current website is just as important as the redesign itself.

  • Testing and iterating are always crucial.