top of page


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.

Vancouver Art Gallery Mockup.png


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.


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.


  • 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.

Screenshot 2023-12-18 at 8.29.26 PM.png
Screenshot 2023-12-15 at 5.29.22 PM.png
Screenshot 2023-12-15 at 5.29.35 PM.png
Screenshot 2023-12-15 at 5.44.50 PM.png
Screenshot 2023-12-15 at 5.49.49 PM.png

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.

vag 1 png.png
vag 3 png.png
vag 2 new png.png
vag 4 png.png
vag 5 png.png

Final Design - Mobile

The usability tests for the mobile prototype generated positive feedback, highlighting users' specific appreciation for the 'scroll to top' button and the cohesive design between the desktop and mobile sites.

new mobile 1 png.png
new mobile 3 png.png
VAG mobile current exhibitions.png
VAG mobile newsletter.png


Navigation Menu

Exhibitions & Events

Newsletter Sign Up

VAG mobile exhibition details.png
new mobile 6 png.png
new mobile 9 png.png
new mobile 8 png.png

Exhibition Details

Book Tickets


Ticket Confirmation

VAG mobile compare 1.png
VAG mobile compare 2.png

Design System

design system 3 png.png
bottom of page