Redesigned page  |  Original page

In this project, I analyzed the website of the Brown University Visualization Research Lab (VRL) from the perspectives of usability, learnability, memorability, and accessibility. I then redesigned two web pages (Home page and Research page) that aim to address the identified issues.

The VRL site was chosen for this project because it's openly accessible and its purposes are clear:

• Introducing the lab to the audience
• Showcasing past results from the lab
• Providing readers with helpful information about the lab

Having those targets in mind allowed me to efficiently identify usability problems and find appropriate ways to improve the webpage.

I. Usability Problems

Below I summarized all identified problems of the original web page, grouped by their nature as being most related to usability, learnability, or memorability (click on problem statements or solutions to see screenshots).

Problem	Solution
Secondary titles like "Publications" are hidden until the user hovers the mouse over the panel buttons. (Plus, mouse hovering is hard for mobile users and impossible for keyboard users to perform, making the subsections inaccessible.) ➔	Ditch the drop-down menu and put secondary titles in the subsection. ➔
When user tries to click a secondary title, it is very easy to accidentally hover over buttons next to it due to a lack of visual cues.	Ditch the drop-down menu and put secondary titles in the subsection. ➔
The "areas" section is a long-winded list that lacks readability. ➔	Flatten the "Area" section. List research themes as click-to-view-detail cards on home page. ➔
Header buttons suffer poor affordance: they look like still images that are unclikable. ➔	Redesign the buttons and header layout. ➔
Useful information is buried too deeply within the website hierarchy. ➔	Place useful lab information on the side of the home page. ➔
Implications of multiple secondary “Home” titles are ambiguous (Users might mistake them as the home page of the website when they're not) and inconsistent across sections (e.g. "Home" of "areas" is a summary of research areas, whereas "Home" of "results" is just "Publications"). ➔	Ditch all "Home" secondary titles. Redesign the section structures.➔
*The WAVE web accessibility evaluation tool reported errors of missing lang attribute that allows facilities like automatic translation to work. Another crucial problem is that the navigation bar only shows the subsection menu onmouseover but not onfocus, making the functionalities inaccessible to keyboard users. This issue and its solution has been discussed in Problem 1 above.

II. Visual Redesign

Wireframing

Prototyping

III. Responsiveness Demo