CASE STUDY
Vancouver Art Gallery
The Vancouver Art Gallery is a distinguished art museum situated in Vancouver, British Columbia, Canada. Renowned for showcasing the creations of pioneering contemporary artists on a global scale, the institution also curates exhibitions of historical art possessing international significance. Visitors are invited to join exhibition tours and engage in events hosted by the gallery.
CHALLENGE
The website of the Vancouver Art Gallery (VAG) has a complex user flow and lacks design coherence. The navigation system, coupled with inconsistent utilization of imagery and typography, results in a disconcerting and overwhelming presentation of information. Furthermore, the transition from desktop to mobile interfaces lacks fluidity and does not adequately account for the variations in screen sizes.
GOAL
As part of a self-driven project, my goal was to analyze the UX challenges present in the VAG’s website and, ultimately, address these issues by crafting responsive designs that are more accessible and user-friendly.
RESPONSIBILITIES
-
Conducting user research
-
Paper and digital wireframing
-
Conducting usability studies
-
Low- & high-fidelity prototyping
-
Iterating on designs
-
Responsive designs
Usability Research
Following a comprehensive usability study of the Vancouver Art Gallery's existing website, I gained valuable insights into the distinct user frustrations encountered. Noteworthy findings include:
Complicated Navigation
The navigation structure contains 6 primary menu items and 29 sub-menu items. Each sub-menu item inconsistently directs users to individual pages, many of which offer minimal information. This approach requires multiple clicks, leading to user frustration as they navigate through various pages in search of specific info.
Inconsistent Designs
The inconsistent utilization of typography and imagery throughout the website presents a challenge, causing confusion and hindering the ease of interpreting information. This lack of design uniformity contributes to difficulties in user orientation and familiarity.
Challenging Mobile Experience
The layout of information does not account for an optimal mobile experience, leading to user frustration. The current design does not effectively adapt to mobile devices, impeding users in accessing information seamlessly.
Low-Fidelity Wireframes
Focusing on the core features identified during user research, I drafted iterations of each screen using pen and paper. Then using my favourite ideas from the paper wireframes, I began to build digital wireframes. I focused on creating consistency and reliability in the user experience through uniform imagery and formatting.
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
After dozens of iterations, these are the wireframes that best represented user flow and met user needs. From these wireframes I created a low-fidelity prototype, which was then used to test functionality before incorporating it into the final design and ensuring accessibility for end-users. To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding a ticket to the cart and checking out.
Final Design - Desktop
The usability tests for the desktop prototype yielded positive feedback, with users expressing a notable request for hover states on buttons (i.e., a change in colour) to enhance user feedback. This valuable insight was seamlessly integrated into the design iterations, contributing to the refinement of the final product.
Home
Navigation Menu
Exhibitions & Events
Newsletter Sign Up
Exhibition Details
Book Tickets
Checkout
Ticket Confirmation
Design System
