Wharton Usability Case Study
As part of the last Ironhack exercise, we were asked to choose one University website (from a given list) and do a Usability Case Study.
The main objectives of these post are:
ONE. User test — Find the main pain point for the users
TWO. Brainstorm Solutions
THREE. Come up with a low-fi prototype
The University website chose was: Wharton
The Wharton School of the University of Pennsylvania is the business school of the University of Pennsylvania, a private Ivy League university in Philadelphia, Pennsylvania. Established in 1881 through a donation from Joseph Wharton, the Wharton School is the world’s oldest collegiate school of business. Furthermore, Wharton is the business school which has produced the highest number of billionaires in the US.
ONE, User Testing.
User Background
Carl. Male on his early 30s. He lives in North America and has a Technical Education. He lives in a metropolitan area.
He likes to learn new things and he is used to technology. He works in a company that creates apps.
Test
For the test I showed him the website and asked him a few questions.
- What’s your first impression?
After a few minutes, he said it looks clean but it feels like the footer is on the top of the page, which he finds weird. Also he notices on the complex navigation from the main menu. - Find the school mascot.
He didn’t complete the task. He clicked in About Wharton and click a few links around there but couldn’t find anything. After a few minutes he gave up. - Find if the school offers foreign language instruction for Arabic.
He wasn’t sure where to look for it. He clicked program for Individuals, and try to find it there. He also click on the top menu — All Programs and ended up in a page where the programs where organized by date. He comment a few times that this website was very focused on selling instead of on showing the course programs and classes. After a long while he checked with he program finder and he got the response : they don’t offer this program. - Find the nearest airport to the school .
He chose to find the Philadelphia campus nearest airport since he thought that was the main University. He clicked on the footer additional links, click on Philadelphia and then Directions to Penn.. and found an error page. Then he gave up.
TWO, Pain Points
From the test done to the user, I can see that the menu is very complex and not easy to navigate. Also, quite annoying that everytime you hover it opens. I understand this can be user-friendly at times, but I am not sure if it is the same when you have one menu at the bottom and another main menu right after… everytime you want to get to the top menu the hover triggers and it is annoying.
I am going to focus on this issue, since it seems the main problem.
As we can see, the navigation is already complex. I understand they tried to place the quick links on the top of the page, and then the main navigation with a mega menu.
I noticed that the user had problems thinking about where to click. The fact that when clicking all programs he got a list of the programs organized by date was confusing. Why by date?
I realized that they needed to place the program finder feature because users probably were not able to find what where they looking for. Not sure if organizing courses by date was the best option neither.
I am sure this is a nice solution, for users who know what they are looking for. But if you are a future student and want to know more about what they offer, is a little bit more complicated than this.
So I think to create a less complicated navigation could be the answer. I understand Universities in general have a huge amount of content to show, but if you make it easier for the user to navigate around the pages is going to be more pleasant for the user, so you have a chance to gain more students.
THREE. Prototyping
The first thing I did is to delete the top menu, which was confusing and to make a much more simpler mega menu. Put all the programs under the same menu, so they can search for Individuals, Organization or Online.. and then place About on top and Faculty.
The rest of links could go on the footer, such as Program Finder, News, Resources, Registration and Contact us.
The content of the home page could be different. There is no need to repeat what you are saying on the top menu, so the first three boxes could be used to featured something the university is proud of, like testimonials, or rankings..etc.
And the other three boxes could be videos talking about the different programs, and attractive things for futre students. We have to keep in mind, mainly new students will visit the homepage.
CONCLUSION
After doing this exercise, I realized that is easy to get lost on different problems and issues. When doing the user testing, is better to be present (on the same room), so that way you can see how the user interacts with the product. Sometimes you can noticed things they don’t say, that can be important for the usability. Like I found that the user got a little annoyed when hovering the mega menu, but he just told me it looked complex.
The mega menus are widely used in university’s websites, but I wonder if we can come up with a better, easier and less crowed concept to replace this menus…?
Also, to focus on one problem can be difficult. I tried to fix the most generic issue but obviously this could be improved by focusing on other small interactions, and this probably will require more time.
Thank you for reading!
