Visual Cognition Lab

Improving the usability of my lab's website.

Visual Cognition Lab

While a student at UC Riverside I worked as a Research Assistant in the Visual Cognition Lab. While working there I noticed that our website could use some updating to provide a better experience for the lab’s participants.

My goals were to make information more accessible, provide an accurate representation of the current state of the lab, and give the lab a new brand identity.


June 2020 – September 2020

More than aesthetics

I knew that the website needed to undergo some UI changes, but I also wanted to find areas where the experience could be improved. To do this I asked myself questions such as:

Interviewing lab participants

I was lucky enough to be able to talk directly with the main users of the lab’s website: lab participants. While doing my daily calls for recruiting participants I would ask questions about the website. I was able to identify what parts of the website needed to be reformatted.

Throughout my time working in this lab I was able to interview dozens of participants. I felt that I had a good outline of the directions that I wanted to update the website.

Original website

All pages of the old site were reviewed to see what content needed to be kept, removed, or reorganized. Along with reviewing design elements the purpose and functionality of the site were evaluated.

An animation showing each page of the old design

Refreshed interface

There was a complete overhaul of the website’s designs and layouts. Design decisions were based on feedback received from previous phone call interviews.


Relevant home page

Based on information gathered from interviews, the hero section was designed to have content that lab participants needed; the lab’s phone number, a way to email the lab, and direction information.


Easier navigation

Previously the home page was cluttered with information. These cards display what content is available on the site while allowing an easier way to access it all.


New team members

Updating the People section to include all of the new graduate students and research assistants gives an accurate representation of the current state of the lab’s personnel.


Scannable content

To make the research section easier to read and more visually aligned the overall width was shrunk, text color was changed to fall within contrast guidelines, and paragraph headers were used to make the information more scannable.


Consistent interfaces

Going to the Direction previously rerouted you to a different URL with an entirely different interface. This was fixed by keeping this section within the same URL and applying the same styling as the rest of the website.

Lab identity

Establishing a visual identity for the lab with consistency throughout all pages of the site was crucial to the redesign.


Accessible anywhere

Previously the site was only optimized for desktop. Making the site easy to use on mobile was crucial especially for the directions section. Accessing directions to the lab while in the car is a key situation that the previous designs did not cater to.



Next steps

These designs are currently being coded and should be ready for publishing soon.