UXDI Project #2: Redesigning Duke-NUS’s website
For our second project at GA’s UXDI course, we were given the task to redesign a university’s website and to satisfy the following requirements:
- Your design should meet the user goals represented by the 3 given personas, the goals of the university, and its existing brand
- Your designs should be tested by users and follow usability heuristics
These are the 3 user personas we were given as part of the brief.
Duke-NUS as a website
I started off with finding out visitor data from Similarweb.com and compared it with their competitors, NUS Medicine and NTU Medicine. One thing that stood out was that their average visitor time spent on the website was much longer than their competitors.
Being curious, I decided to start off with finding out why that was the case.
User Interviews, Testing & Card Sorting
In my first round of interviews, I asked prospective students and current students a few questions:
- Did they used the website at all? (Follow up question: Why or why not)
- Did they know what Duke NUS was about? (This question is to test their knowledge of brand awareness of Duke NUS)
- What information would be most important to them on the website as prospective or current students?
From this interview, I learnt that current students don’t use the website at all since their school portal and email basically covers it. Prospective students on the other hand want all the information they can get, and easily.
Prospective students wanted to know:
- Detailed information about the programme like majors/specialisations and how many credits to graduate
- How to apply
- How much it costs
- What makes the school stand out from the rest
User Testing on Current Website
I also gave my interviewees a certain set of tasks to fulfill on the current website such as:
- Where would you go to find how to apply to the programme?
- Can you find out about accommodation?
- Can you find out about extra curricular activities?
I recorded these with screen capture so I could look back and count the number of clicks and the navigation path they took, as well as comments that they made. They pointed out many issues with the website that irked them and caused them to abandon or quit finishing the task altogether.
The users were most frustrated with the navigation layout and not being able to use it to find pages that they needed.
This is my favourite part of the process hands down. From this simple user testing, the information I found out from my interviewees were invaluable. Simply because as a designer, I’ve stared at the website for too long, even the most obvious flaws with the website I didn’t really notice or had gotten used to it.
Lastly, I also conducted a card sorting exercise with my interviewees. This was done over Skype and face to face. The point of this testing is to see how people group information according to their mental models. For a website like Duke-NUS, I had over 40 cards. This proved to be quite a challenge for the users to sort through it.
2 patterns of card sorting emerged. Prospective students tended to sort it according to information type while current students sorted it accordingly to audience type.
Thanks to Gan, my classmate, I discovered a new program called xSort which allows you to analyse the results with the cluster analysis in the program itself rather than manually tabulating data (phew). However, xSort is not an online program, so for Skype interviews, I used Trello to conduct card sorting.
Problem Statements & Solution Statements
I can’t find what I need because the navigational layout is too cumbersome and complex. I spend too much time reading through the page to find what I need.
Redesign the navigation and improve the page layout
Proposed new sitemap
The new sitemap has a lot more Level 2 navigation (News / About Us / Admissions / Education / Research / Campus Life / Giving / Contact Us) as compared to the first. The reason is to make it easier for users to go straight to the content they are looking for without having to go too deep into the navigation structure.
Proposed new user flow
I proposed 2 new user flows. Depending on whether a user is exploring the website or going straight to what he/she wants to find. The new navigation allows him/her to do just that by skipping the Level 2 navigation if necessary.
New Page Structure
A new page layout was created for the website following the F-shape reading pattern. With clearer hierarchy — users can better scan the page for what they are looking for.
See my prototype: http://8rj963.axshare.com/home.html
(Not all pages are working!)
After initial feedback for the new proposed designs, I would like to prioritise the following:
- Further iterating on content journey for Mark, the prospective student
- Improving copywriting
- Doing further tree testing on the navigation
- Do more testing on the new draft to see if it really does cut short the time spent looking for content, which was the problem identified.
If I had more time
- Do competitive analysis
- Do more interviews especially with John’s persona, the returning student.
Because my classmates and I pooled together some of our data, I was able to share their resources on their heuristic evaluations and content audit. Also thanks to Terry, Gan & Nari for their help in sharing thoughts/ideas/interview sessions in this project.
2 weeks passes really quickly. Planning at the start is crucial. Also don’t be afraid to test, even wireframes on paper. The faster you test, the more you learn.