Princeton University: Usability Case Study and Redesign

Camille MELIN
Aug 31, 2018 · 7 min read

To achieve our prework at Ironhack Paris, our final exercise was to realize a website usability case study & to redesign this website. We had to work on a American university website and I choose to work on Princeton University’s website.

A few words about Princeton University

Princeton University

Princeton is a private research university of New Jersey founded in 1746 (it is the fourth-oldest institution of higher education in the USA). In Princeton, you can study for example humanities, social sciences, natural sciences & engineering.

Princeton is also renowned as a Sports University as it is a member of the famous Ivy League.

What we had to do ?

To test the usability of Princeton’s website, I had to interview a friend & ask him to navigate through Princeton’s website with a few goals to achieve.

First, I had to ask him about his first impression of the website, what he thought about it in a few words.

Then I had to ask him about his feeling about the navigation on this website & to finish he had to complete three tasks on Princeton’s website :

  • Find what is the school mascot
  • Find if the school offers foreign language instruction for Arabic
  • Find what is the nearest airport to the school

My friend’s interview: how did it go on Princeton’s website?

I interviewed Alexis, a 28 years old french man. As he was a student not so long ago, I assume he would be a good subject, able to represent Princeton’s target.

When I asked him about his first impressions he told me :

“This website looks modern, nice & enjoyable. At a glance, I would say everything seems easy to find & menus are understandable. ”

Further, when he began to navigate on the website, he added :

I like the fixed menu bar when you scroll the page. I also like that there are many photos on the website, it helps me get into the context easily. I think this website is quite fluide, navigation is fast but maybe there is too much information on it.”

Then we went for the three tasks he add to do on Princeton’s website. To help me keep track of what he did I decided to film my screen.

First, he had to find what Princeton’s mascot is. Let’s take a look at his path on the website:

Alexis trying to find Princeton’s mascot on their website! Not so easy :(

As you can see on the video, it was not so easy! Why? Because Princeton never mentions its mascot even though we can see it on several pictures (at 2' and 2'50" in the History category). So finally, Alexis gave up after 5 minutes.

Yeah, this is French…

As mascots are a powerful symbol in many American universities, I found it odd not to be able to find Princeton’s one on their website whereas you can find it in just a second through Wikipedia!

(Sorry for that French screenshot! But you can see on that shortcut I had directly in Google typing “Princeton University” that their mascot is the tiger!)

Then, he had to find if there was an Arabic language class at Princeton:

As you can see, Alexis took time to find this arabic class!

At first, I thought it would be easy for him because he directly went through the good menu (Academics) & submenu (Areas of Study). But after that good beginning, things got a bit complicated for him!

He scrolled a long minute through the programs’ list to read each category. At a moment he saw “German”, “French & Italien”, then “Portuguese & Spanish” & got disturbed thinking there was no Arabic Class as he didn’t see “Arabic” at the beginning of this long alphabetically sorted list.

But he continued, willing to pass the test! He scrolled the page up, found “Language & Culture” and then opened the category. There, he read the description and saw that there were “Near Eastern Studies”. From there he went to that last category and guess what? He found that there was an Arabic Language class! Hooray!

As you can see, it was not so easy and a lot of things were really confusing or redundant: for example, “French & Italian” was a whole program but was also mentioned in an other category whereas Arabic was just a part of a larger program in the list…

Finally, his last goal was to identify the nearest Airport to Princeton:

As you can see, this task was quite easy. He used the footer link “Maps & Shuttles” to access the good webpage. But you could also access it using the “Meet Princeton” menu & clicking on “visit us”.

If we want to be more precise, we should say that the task was just half done. The question was to find the nearest airport, but as you can see on the video, the information was not specified by the website. You just had a list of airport (no distance, no time to get from there to Princeton), a general map & links to airports’ websites. In addition, I would say that those links were a bit disturbing as you were totally leaving Princeton’s website by clicking on it!

What did I do to fix those pain points?

Finding the mascot

After digging a bit more in Princeton’s competitors websites, I tried finding their mascots and I realized that it was often highlighted and easy to find. I also saw that there was an “About this University” section in each website I visited.

So, to make the mascot easier to find, I decided to add a small icon of it next to the menu. This way, you would see it all the time as a symbol of this University. I also decided to create an “About Princeton” page in the “Meet Princeton” menu to find basic infos such as the one we have on the Google extract from Wikipedia. I also added picture of the mascot to make sure everyone would understand that yes, their mascot is The Tiger!

Here, you can see in yellow where I placed the mascot’s icon.

Finding the Arabic Language Class

Two things seems really confusing to Alexis & I:

First you had some areas of study directly in the menu (just under the “Areas of Study” Link) that made the menu too fussy.

Then, when you were in the Areas of Study section, you accessed a very long list of classes where some of them were very precise & other really general! That is what makes it confusing to find the Arabic language class.

So I decided to lighten the “Academics” menu by cutting off some links & I reorganized the Areas of Study sections using subsection for the more specific classes. This way, for example, all languages classes would be gathered in the larger category “Language & Culture”.

When you access the “Areas of Study” page, now you can use the alphabetical menu on the top to access directly a letter whereas scrolling all the way through the letter you are looking for.

As you can see, the “Language & Culture” category has been opened and you can see inside of it a short description just as it was before & now, all the specific programs that were considered as big categories in the previous version. You can click on a specific program such as “Near Eastern Studies” by clicking on it.

Finding the nearest Airport to Princeton

As you saw on the video, Princeton’s “Visit us” page suggests a lot of different airports! But they never say how far are they from those airports.

So I decided to add an “estimated travel duration” next to the airport to help visitors knowing easily which airport is the closest. I also decided to change the link to the airports’ websites and add a specific underlined hyperlink saying “visit”. I assumed it will help people understand that by clicking on this link they would go to the airport website. Last, this link would obviously open a new window to prevent them from leaving Princeton’s website.

What did I learn?

By doing this case, I learned how UX is important to help your customers reaching their goals easily & without any pain points. I found it really interesting to analyze what a customer would do on this website to identify where the problems where. I also learned that a website may be looking great (due to its UI), that is not what only makes it efficient!

Camille MELIN

Written by

UX/UI Design / Marketing & Communications.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade