Case Study: University of Virginia Website

In the UI/UX bootcamp I’m taking with Ironhack we had a prompt to perform a case study on a university website. I chose University of Virginia (virginia.edu) because I’m from Virginia, but more importantly, there is an Alderman Library on campus and since it is named after me, this clearly makes me the owner of the library. While I wait for my payments from UVA for the licensing so they can use my last name, I went ahead and took a look at the site to see if it can be improved from a usability standpoint. I sat down with my fiancé Jason and had him run through the following prompts:

1. Take a look at the website for a few seconds, and give me some adjectives and phrases to describe it
2. How do you feel about the site’s navigation?
3. Can you find:
   - The school mascot?
   - Does the school offer Arabic language instruction?
   - Nearest airport to the school?

Seven Second Impression

I can’t write every single word my fiancé said about the site because … well, language … but the censored version is: boring, ugly, I hate it, it looks like a medical website, why is this picture so enormous?, why is all the content hidden under these gigantic images?… he had a lot to say.

Navigation

The top navigation works fine, but what Jason found was that each page you clicked into had “700 links on it in all different formats and all these pictures I have to scroll past to get to the content.” As he continued navigating the site, it became more clear that the top navigation was not sufficient — it might look nice, but it doesn’t function nice and that’s what matters. Each of the links in the nav bar takes you to an intermediary page where more links are presented and it’s kind of a mess.

The ironic part is that finding the Alderman Library is very easy given there’s a link to “libraries” in the navigation… but we can’t find anything else

Finding What You Need

• Mascot: Jason clicked on “Life at UVA -> Start Here,” which he immediately responded negatively to (there are great background videos on the pages, but they are pointless and they force you into an experience that’s missing the top navigation!). He then went to “Athletics” — he didn’t see anything immediately obvious that would identify the mascot. He did somehow click off the site and onto the “Hoo Crew” website, but on the Athletics page there was a blog article about “Cavalier Athletes.” Because we are bad Virginia people, and neither of us has actually ever willingly watched sports events, we assume the mascot is the Cavaliers, but we don’t actually know this.
• Arabic language instruction: “I couldn’t even find the mascot… how am I gonna find this?” was all I got at first. He then went to the “International Studies” page, but that was mostly about study abroad opportunities, and nothing was about the curriculum. After another minute, we moved onto the next task.
• Nearest Airport: After a few moments of silence…“I’ll look it up on Google.”

From this user review of the site, I determined that the primary issues are with the site’s overall navigation/linking structure and with the page content itself — pages are overwhelmed with huge images, beautiful videos playing in the background, but minimal actual content.

For this exercise, since my fiancé couldn’t actually find anything on the site, I chose to work on how to improve the site’s overall navigation and linking structure.

Crazy Eights

If you folder a piece of paper in half four times, you create 8 blank scenes you can draw in. This is the base layout for running a “Crazy Eights” exercise, which is fast prototyping ideas to resolve an issue or problem you find on a website. The most difficult thing about Crazy Eights is quickly coming up with ways to solve the problem at hand, but limiting the amount of time you spend on this task helps keep you from overthinking things. The second most difficult thing is interpreting my handwriting and drawings.

I promise what is shown above are all about the site’s navigation. I actually found it unhelpful to work on this in crazy eights because the main issue I found had to do with site architecture — designing the layout would come after site architecture is defined. I ultimately wanted to fix the funnel of links for the site and eliminate the intermediary “more links” pages that interrupted the navigation flow once you clicked on a link from the top navigation.

The Final Result

By re-thinking the site architecture, cleaning up the navigation and bringing some of the sub-page links into a mega menu format, visitors to the site will be able to cleanly identify the links they need to get to quickly. This way they’ll have more time to visit the Alderman library too :-)