Usability Case Study and Redesign of University website #Ironhack
For this exercise, we were asked to choose 1 university out of a list of 20 and run a usability test with a test user.
This test user had 7" for a first impression of the website and should then provide a small phrase or a group of adjectives to describe it. He should comment on its navigation and try to answer 3 questions without using the internal search function nor leaving the website.
Our task was to keep track of the clicks and detect pain points during the process for later evaluation.
University
I chose Virginia Tech which is a university offering about 280 undergraduate and graduate degree programs to more than 34,000 students.
Test user
My user described the site as “ok” with a simple design, clearly structured and modern as in scrollable.
The navigation of the site felt comprehensive but not engaging.
As to the 3 items he was asked to check out:
1. It took him 24 (!) clicks to identify the school mascot.
2. The answer to the question whether the university offers foreign language instruction for Arabic was negative (no info was found, in part maybe due to being unfamiliar with the US system and not knowing where to look) after only 2 clicks.
3. The nearest airport was made out after another 2 clicks.
Pain points
There are several things not quite working with this site, maybe the most important one being the lack of engagement it generates. One reason certainly lies in it’s visual design which seems rather random with numerous fonts, styles, colors, layouts…
Another pain point might be inconsistency of its navigation and menu handling.
Taking as an example the search for the mascot, right on the opening page, they introduce us to the “Hokies” and keep referring to them throughout the site…so one gets they must be related to the school (mascot) somehow. However, there is no image, caption, short description of what or who a Hokie is. One has to click one’s way all through the menu (which changes depending on what sub-menu one is in and behaves differently depending on where one clicks) to find the Hokie/mascot buried somewhere in History & Traditions, which undoubtedly is a good place for it to be - but it feels as it should be somewhere else as it’s referred to from the moment one lands on the page.
A similar thing happened with the searches for Arabic and the nearest airport: they were not to be found where one would expect.
Arabic is only to be found via the internal search function (as a Minor of a College and as one of the university’s language clubs, both on completely different websites).
The airport on the other hand is on the university’s own website but not under “Visit” (at the very top of the page) but in “Get directions” (at the very bottom of the page).
One last thing I found interesting: at around the 20th click during the mascot search, I asked him whether he didn’t want to try the “Explore” option.
He looked at me, a bit dazzled…he hadn’t even noticed it! To be honest, neither had I at the beginning…can you see it?? (well, I guess now that you know 😇 )
Evaluation
I would propose a re-design of the websites graphic design in order to enhance user engagement.
As they seem to be very proud of their Hokie experience, I’d try to make the mascot more visible. One way could be to use its colors consistently in the re-design of the site.
The main paint point I believe needs to be tackled though is the confused menu handling. The university wants to attract future students and therefore needs to provide a clear vision of their offer. It’s very confusing to not know where you are at every moment or having to click back and forth in order to figure out where the menu point you saw and wanted to check out was…even more so when apparently same tags lead to different sites.
Here’s an image to convey what the experience is like:
Paper prototype
The number of changes the website needs exceeds the scope of this exercise. So I’ve decided to focus on a possible re-design for the menu handling of the main page only, and even here I feel like it’s only possible to provide a sort of sneak preview…
The aim is to have a clear layout with an easy navigation experience.
Steps
- Assess what information is currently being displayed where on the website and why. What information is duplicated, where and why?
- What is the university’s goal and what do students expect from its website?
- Research best university websites: what do they do differently?
- Make a proposal that satisfies all parties involved.
With the amount of information Virginia Tech wants to convey, I found the layout of the “University of Maryland”-website rather appropriate as it displays everything on the first screen with information sliding out as selected while at the same time showing how we got there.
Findings
3 things have especially caught my attention:
One_ How different my user’s evaluation was from his first 7"-impression to actually using/navigating the site. It might look modern and clearly structured — and then be a piece of work to actually find the things you are interested in!
Two_ The realisation that probably nobody from the university itself has tried to find specific information on their website…
Three_ How difficult it is to come up with a really “good” UX/UI design despite having identified the things which aren’t working properly.
Final comment
I found it extremely difficult to make a re-design without the client’s input and real user feedback. There just are so many options — how to know which one’s the one??
