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.

For the test I showed him the website and asked him a few questions.

  1. 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.

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.

This is the current home page
The view when the menu is triggered

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?

All Programs Page — ordered 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.

One of the options — simplify the menu


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!

Experience Designer + Feminist + Bicycle lover.