This is the final exercise of the Ironhack prework! So for this final case, we had to perform a usability test on a website, identify pain points and propose a solution with a paper prototype.
I chose to work on the University of Michigan website. https://umich.edu
My user was given the following tasks:
- First impression on the website
- Impression about the navigation
- Task 1: find the school mascot
- Task 2: find if the school offers foreign language instruction for Arabic
- Task 3: find the nearest airpot to the school
The user was not allowed to use the « Quick search » tool.
At first sight, the site looks nice with a full-width colorful image. After scrolling down, the rest of the site is rather dark, and looks a bit « boxy ».
Task 1: find the school mascot
My user did not manage to find the school mascot just by browsing the menus. He looked into « About » menu then « Facts and History » and all its submenus, then « Visit » , « Campus information », « Sports clubs »…
After a long while browsing all the menus, we ended up using the Quick search tool. Given the result, it was simply impossible to complete the task: the information was part of articles published in alumni magazines, but also, it seems that the University does not have a mascot anymore (it used to be a wolverine obviously).
Task 2: find if the school offers foreign language instruction for Arabic
This task has been completed, but not easily. Reasons are that my user is not fluent in English and is not familiar with the American student system. My user went to « Prospective students » > Graduate students > Programs of study and looked in the list.
Task 3: find the nearest airport to the school
This task has been completed, but after a few trials. Surprisingly, at the end, my user went to the page footer with the university address and selected « Contact-us » link, which lead to another page with further contact numbers and a FAQ section with transportation information.
After the test, we found out that there were at least 4 ways to access the transportation page.
About the navigation
My user found that there was too much scroll on pages.
And also, we found that there were a lot of redundancies (different ways to access a same page) through the website. On one hand, we have more chance to find the information, but this creates a feeling of overwhelming information.
Main pain point
I will focus on the « long scrolling » problem on pages, which means that the page is too long. How to reduce the length of the page and improve clarity?
Pages may be long because:
- items are just listed alphabetically and not grouped in categories
- All submenus are visible
Apart from reorganizing the information architecture, I would suggest the following quick ways to reduce the length of pages:
- delete redundant information
- mask sub-level menus
On the above example, the “Campus Information > Maps & Directions” and “Visit >Maps, Directions & Transportation” menu lead exactly to the same “Find your way” page. There may be a way to merge both menus or delete one of them?
Masking sub-level menus should avoid the user to be overwhelmed by information and having the “block” visual effect.
Here is my suggestion of presentation.
I have put all the menus in accordion style menu, which is the most suitable element for large amount of content. The user can then see all the themes at a glance without scrolling.
Note: I have kept all the menus and submenus as they are actually on the website.
As for the other exercises, I did not know where to start from but ideas came progressively as I work on the exercise.
The case of the University of Michigan was interesting: behind the clean and nice homepage, there were some problems in the organization of information and also on the presentation.
I have finished my prework, I am looking forward to starting the bootcamp IRL!