Usability Case Study: Oglethorpe University
How might we provide prospective students with the best digital experience.
Last Ironhack assignment before the bootcamp starts ! The goal here is to use all knowledge learnt throughout the prework to realize a usability case study.
I chose to analyse Oglethorpe University’s website.
My first impression is of a clear, bright and consistent website, but I’m quick to identify some weaknesses in interactions: for instance I would have appreciated a dropdown menu for the header, to see the subsections nestled under ACADEMICS, EXPERIENCE or ATHLETICS. Maybe just a hover effect would have been fine, as we are looking at the site through a desktop.
I wanted to get a better insight of the usability so I realized a usability test with a target user for Oglethorpe :
I asked her to complete the following tasks:
First impression of the website.
What she thinks about the navigation of the site.
Without leaving the website nor using the search function, ask her to find: the school mascot ; if the school offers foreign language instruction for Arabic ; the nearest airport to the school.
She had a first good impression of the website:
Good: Clear and bright, uncluttered, familiar and easy to grasp (scrolling websites are really in these days).
Less good: Not enough personality, looks like a template barely edited, no navigation bar nor scroll bar to get back to the top once you’ve scrolled down to the bottom, difficult to understand which part of the website you’re currently in.
Moving onto the three tasks, they were harder to complete:
- Find the school mascot.
Since there was no clear indication on the homepage, she tried clicking all options offered: LIFE, LEGENDS & TRADITIONS, CAMPUS LIFE, SPORTS… The lack of details for each tab made it impossible to understand what was encompassed.
Eventually we managed to find ‘Petey the Petrel’ on the sports page, after using the search bar: even there, the path was impossible to reverse.
Task result: fail
2. Find if the school offers foreign language instruction for Arabic.
The first step was easy: obviously the info should be available in the ACADEMICS part. However, once that page was reached, my user felt overwhelmed by way too much informations, none of them really useful to a prospective student.
My guinea pig seemed lost and clicked on several options before finally finding a list of all majors… and concluding that maybe yes, maybe no. There is a mention of a Japanese course so technically Arabic should appear if it were available, but she’s unsure
Task result: failed
3. Find the nearest airport to the school.
“Easy, it’s going to be in the ‘About’ section”. Turns out the ‘About’ section is very busy and throwing confusing informations. The landing page feels like you are back to the ‘Academics’ tab, with a emphasis on program and values rather than practical informations like address, phone number, opening hours, etc.
She finally spotted the tab ‘Maps’ in the menu, but unfortunately the information can’t be found in that section, which only displays Google Maps’API. Believe it or not, there is no ‘Contact’ section on Oglethorpe’s website. What was my user’s first lead, as you would normally expect, it is even not present on the site.
Task result: failed
Drawing the conclusion & identifying pain points
Oglethorpe’s website shows two different problems:
- Content: there is a gap between section titles and the content nestled within. Affordance is far from being great, as we could see with the ‘About’ section…
- Structure: the site’s architecture is not clear enough to understand which part of the site you’re in while you are navigating. For instance, the burger menu on the right side of the homepage is redundant and provides informations you would have expected from the header. Its content being hidden, a user won’t necessarily click on it.
This allowed me to draw the following conclusion:
Our main pain point here is the navigation.
The architecture should be made clearer so users don’t feel lost while browsing the website for a specific piece of intel.
This could be improved through the following actions:
- The header menu needs to provide more details about each section’s content.
- The burger menu on the right needs to be redesigned, to provide useful informations (and not just be a copycat of the header menu).
- Breadcrumbs on each page will improve the navigation and clarify the architecture.
Prototyping a solution
1Clarifying the site’s content by adding a simple hover effect on the header. It is now easier to understand what is expected to find within each page.
2Rethinking the purpose of the burger menu on the far right of the website.
The burger menu is traditionally used to show practical informations, easy to access. As it was shown earlier in the user test, it is quite cumbersome to scroll down the whole page to find Oglethorpe’s useful informations. The redesigned burger menu should make them accessible with just one click. This should solve the issue of finding the nearest airport: first click on the burger menu, then a second on “How to reach us” to open a dedicated page with all access informations by road, train, air.
3Helping you to find your way through the site’s architecture, once you click on one of the options offered in the header.
Inserting breadcrumbs provides more clarity about your situation ; it is now easy to understand which section you are browsing.
Conducting that usability study was very interesting to understand that you don’t always need to change everything and start again from zero. A simple twitch on minor interactions could help a lot.
It is also important to realize that sometimes a website too exhaustive could be confusing. In that precise case, a blog could be a smart way to present life on the campus, so the website could focus more on practical informations centered on academic content.