Usability Case Study

Andrea Saavedra
4 min readOct 8, 2019

--

Princeton University is fourth oldest college in the United States. Founded in 1746. Located in the quiet town of Princeton, New Jersey. After, announcing its’ name the first couple of words that comes to mind are Ivy League, reputable and prestigious.

Graduation rate: 97%

Acceptance rate: 7%

Tuition: $51,870

Average cost of attendance: $73,450

Notable alumni are Jeff Bezos, JFK, F. Scott Fitzgerald, Richard Feynman and more. Most popular majors: Engineering; Social Sciences; Biological and Biomedical Sciences; Public Administration and Social Service Professions; and History.

Who?

The most frequent users that are browsing college sites are prospect students who interests to apply. Secondly, current students third, alumni. Probably after the list are donors, school college counselors to collect data, employees and businesses /organizations. The product content should prioritize for potential applicants. Anyways, current students mostly use the institution portal.

User Interview:

After, high school what’s next? COLLEGE. Largest demographic to browse site. Therefore, interviewed high school students who are preparing for college applications. They are searching for requirements, cost, degrees and campus life for preparation of their goals.

Princeton current website
Low fidelity of current homepage

After, observed prospect college students navigating Princeton’s website on a 13 inch Macbook. Noticed that there’s 2 top navigation bar does take extra space once arrive another at the bottom of page. Menu overload!

User Journey:

Once arrived at the homepage mentioned the center photography. Overwhelmed of the amount of information and content at the first page. Easily lost within the layout because it heavily concentrated of photos and inconsistent framework.

Scrolling down the screen sections were visually grouped from a large photo into a grid with thumbnail and description by categories:

Feature articles about diversity, news, events, @ princentonU, work @ princeton and ends with another navigation tool at the bottom.

“It’s a university not instagram!”

— Interviewer response

Not such a pleasant experience on a small screen.

Once I asked to find the mascot, suddenly became a “Where’s Waldo” type of moment! Princeton’s tiger wasn’t easily recognizable. It was found by going to the second navigation bar on top. Next, click on “one community” tab then, “athletics.” At last! It was found somewhere in background of an event photo.

However, finding the nearest airport or changing language was easy for the user. Couldn’t find language switch option in the site menu, but instead used google chrome translate extension.

Main Problem That Chose to Solve

“Less is more…”- Frank Lloyd Wright

Every response felt less engaged. Purpose of the site index is to attract attention especially to those interested in investing their education. Therefore, would prioritize that information therefore is easily accessible.

The image above provides a low fidelity of the layout of the original screen. According to whom were interviewed their first response were to scroll down all the way towards the end. Next, was to click at the navigation for particular subject of information like Admission & Aid and Meet Princeton.

What’s the site goal?

Engage viewers attention in manner where the institution information accessible. Consider language translation option in the menu that would useful for international students.

Plan to solve this problem:

Create a concise layout & consistence flow.

1- Simplify the navigation bar. No need for 3 in one page. Try to regroup or join some categories. Other option is to create an icon thats leads more topics to navagiate to.

2- Add UI elements such as link tabs or carousel for side way motion within a particular section. The latest or most prioritize content should be featured first.

3- Establish a clear visual hierarchy. Rearrange content, for instance social media “princentonU” info kept in bottom where closer to various outlets. Remove “work@” at the index and kept page to be easily found on the upper side tab.

Redesign

e. Photos of your paper prototype design

Paper Prototype

f. Share a few key things that you learned throughout this process

Good design should be clear & readability. Think of the screen as real estate where need prioritize what you want the user to see first then second and so on. Components like carsoul, link and

--

--