Ottawa Art Gallery

Ottawa Art Gallery

Ottawa Art Gallery

Improving multi-level navigation for gallery visitors.

Grace Pham

15 min read

Mumbai

2025

Overview

The Ottawa Art Gallery (OAG) is a welcoming public art space in downtown Ottawa, known for its contemporary exhibitions, community programs, and commitment to showcasing diverse Canadian artists. As part of its visitor experience, we redesigned OAG Explore - a digital layer that supports navigation inside the gallery.

For this 3-month academic project, I led the team’s UI design, created wireframes grounded in UX principles, and developed the presentation deck, while conducting usability testing to inform the final solution.

Timeline

Timeline

Sep - Nov 2025 (3 months)

Sep - Nov 2025 (3 months)

Team

Team

6 IMD students

6 IMD students

Role

Role

Design Lead

Design Lead

Skills

Skills

Figma, Prototyping, UX Research

Figma, Prototyping, UX Research

Problem Statement

Visitors to the Ottawa Art Gallery - locals and tourists of all ages and backgrounds - struggle to find their way during their visit inside the gallery’s five-floor building. The layout, with multiple elevators and floors, often causes confusion about which elevator or route to use, especially when some elevators only go down or skip certain levels. The exhibitions are also always updated or changed. As a result, visitors often feel confused and spend more time navigating the building rather than engaging with the art, reducing the overall quality of their experience.

Research

"Right now, the OAG Explore app is outdated because all exhibitions are temporary & artworks are frequently moved. It also lacks a built-in indoor map, so our visitors usually struggle to navigate the gallery using the current app."

— Julie Mulligan, Senior Digital Marketing Manager @ OAG

After countless interviews with Julie - OAG's Senior Digital Marketing Manager, we gained some insights from the gallery's staffs' point of view:

  1. It was hard to keep up with updating the app spontaneously

Exhibitions change monthly, while events can change weekly. Although the OAG team already uses social media and their Wordpress website to keep visitors informed about upcoming updates, requiring the app to be manually updated this frequently would create an additional burden for them.

  1. Visitors kept asking for direction

The current app does not include any internal maps, even though the OAG building has five floors. To OAG staffs member who have worked here for years, the app’s ineffective navigation isn’t much of an issue because they are already familiar with the building layout. What about first-time visitors? While the team provides paper maps, they do not appear to be very effective in helping visitors navigate the space.

But how hard it be to navigate inside the building? To better understand visitors’ challenges from their perspective and experience the building layout firsthand, our team decided to visit OAG. Here’s what we observed during our on-site experience:

  • Each floor has a different layout, making paper maps difficult to follow.

  • Paper maps use lettered zones, but the building has no matching signage, creating additional confusion.

  • Instruction boards near elevators help, but some elevators only access certain floors.

  • The app has no updated exhibition information or indoor maps, so we couldn’t rely on it.

  • We ended up wandering around until we found an exhibition entrance, which made the art experience feel a bit disorganized.

All of these insights led us to one major question: How might we help visitors navigate the building with confidence while reducing the burden on staff?

Goals

#1 Improve navigation

Our top priority was to add real-time internal maps to the app, allowing visitors to easily get directions to any exhibition, no matter which floor they are on.

#2 Sync data

We also wanted to reduce the workload for OAG staff, so syncing the app with their WordPress website became a practical solution.

#3 Keep it simple

Since the app would need to handle a lot of functionality, we decided to keep the experience simple, clean, and easy to navigate.

Ideation

Persona

Creating personas helped our team translate research insights into real visitor needs, allowing the team to design navigation features that support different levels of familiarity, time limits, and accessibility needs within the gallery.

Since OAG has five floors, different layouts on each level, limited elevator access, and confusing paper maps with unmatched signage, new visitors are the most likely to feel lost. Unlike staff or returning guests, Margaret - our primary persona - has no mental map of the building.

primary-persona
primary-persona

User journey map

And by mapping the visitor journey, we were able to uncover critical pain points across the gallery experience, from finding a starting point to moving between floors, and use those insights to design clearer, more supportive navigation:

primary-user
primary-user

A potential user journey map for first-time visitors

Design & Testing

Our app flow diagram

To meet the first and top goal - improving navigation, we needed a system that seamlessly connects exhibition discovery with clear wayfinding. Therefore, we redesigned the information hierarchy of OAG Explore and organized it into five main pages: Home, Tours, Navigation, Events, and Profile.

Intuitive user flow

We approached the design from the perspective of a first-time visitor, mapping out the entire user flow. This flow outlines every key action from the launch screen to the end of their visit, moving through phases such as launching the app, starting a tour, exploring exhibit information, sharing & providing feedback, and finally exiting.

Turning theory to visual

Our mid-fidelity wireframes represent the first stage where functionality and visual direction begin to merge. At this point, we started shaping the overall interface using styles and components inspired directly by the Ottawa Art Gallery’s brand identity. The layout, spacing, hierarchy, and emerging visual patterns reflect OAG’s clean, contemporary aesthetic, ensuring that even at this fidelity, the experience feels aligned with the gallery’s character.

A sneak peek of our first version of the mid-fidelity wireframes. Some components were not fully consistent yet, so we frequently had to refer back to the OAG branding guidelines.

As the design lead, I was responsible for creating the app’s style guide and establishing the foundation for all UI components. I aligned the design with OAG’s brand identity - modern, sharp, and clean.

components
components

Approved component set

We also drafted our first look of hi-fi wireframes to help our usability testers understand buttons, icons, maps, and directions better when the design looks realistic.

components
components

Usability testing

I and Isabella - our team's project lead conducted the usability testing by using Maze. Before continue finalizing the app concept, we believed that this analysis would help us validate our design goals.

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

testers

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
%

success rate

To sum up, we collected a total of 27 responses through Maze. Most testers were young adults between 20 and 29 years old. Despite their age doesn't match with our primary persona, they are still our main target – who haven’t been to OAG before and want to navigate quickly and efficiently through the gallery.

From finding an exhibition to get directions, we got 82.5% success rate. Users only needed to select an exhibition card and continue through the steps. The 14.8% unfinished rate occurred because some testers clicked the “Events” icon in the navigation bar instead.

maze
maze

Most participants agreed that finding their way to an exhibition was easy. Read the full report here.

Overall, the usability test showed that core functions worked smoothly, and most users successfully completed key tasks, especially starting a tour and navigating exhibitions. However, there were some users struggling with map clarity or overlooking the search bar. Therefore, improvements should focus on navigation clarity, clearer CTAs, and enhancing the map’s usability and interactivity.

Solution

Navigation overview

The navigation bar features 5 main screen based on the app flow diagram: Home, Tours, Navigation, Events & Settings.

Let's start!

Let's start!

We offered two ways to start a tour: tapping the CTA on the homepage or navigating to the 'Tours' page. Since the home screen is the first thing users see, providing direct access there makes it easier and more intuitive for them to begin exploring right away.

We offered two ways to start a tour: tapping the CTA on the homepage or navigating to the 'Tours' page. Since the home screen is the first thing users see, providing direct access there makes it easier and more intuitive for them to begin exploring right away.

We offered two ways to start a tour: tapping the CTA on the homepage or navigating to the 'Tours' page. Since the home screen is the first thing users see, providing direct access there makes it easier and more intuitive for them to begin exploring right away.

Tours system

Tours system

OAG Explore helps visitors navigate the building with a redesigned tour system with stops, so they always know where they are and what’s next on every level.

OAG Explore helps visitors navigate the building with a redesigned tour system with stops, so they always know where they are and what’s next on every level.

OAG Explore helps visitors navigate the building with a redesigned tour system with stops, so they always know where they are and what’s next on every level.

Exhibition info & Interactive map

Exhibition info & Interactive map

The stop’s info page will be synced with OAG’s WordPress website, allowing the team to update exhibition content automatically without manual work. We also added AI voiceover support for visitors with hearing impairments.


From this screen, users can get directions directly to the exhibition they’re viewing.

The stop’s info page will be synced with OAG’s WordPress website, allowing the team to update exhibition content automatically without manual work. We also added AI voiceover support for visitors with hearing impairments.


From this screen, users can get directions directly to the exhibition they’re viewing.

The stop’s info page will be synced with OAG’s WordPress website, allowing the team to update exhibition content automatically without manual work. We also added AI voiceover support for visitors with hearing impairments.


From this screen, users can get directions directly to the exhibition they’re viewing.

Search bar

Search bar

What if users already learned about an exhibition on OAG’s social media and want to get there quickly? No worries! They can search for keywords, and a pop-up will appear, allowing them to choose between getting directions or reading more information about that exhibition.


We also removed the alphabet zones in maps and replaced them with interactive icons for each area. Moreover, all the icons in maps will be clickable!

What if users already learned about an exhibition on OAG’s social media and want to get there quickly? No worries! They can search for keywords, and a pop-up will appear, allowing them to choose between getting directions or reading more information about that exhibition.


We also removed the alphabet zones in maps and replaced them with interactive icons for each area. Moreover, all the icons in maps will be clickable!

What if users already learned about an exhibition on OAG’s social media and want to get there quickly? No worries! They can search for keywords, and a pop-up will appear, allowing them to choose between getting directions or reading more information about that exhibition.


We also removed the alphabet zones in maps and replaced them with interactive icons for each area. Moreover, all the icons in maps will be clickable!

Events

Events

Finding directions to an event follows the same process as finding directions to an exhibition.

Finding directions to an event follows the same process as finding directions to an exhibition.

Finding directions to an event follows the same process as finding directions to an exhibition.

Reflection

This was our first time handling such a large and meaningful project with a real client, and we were truly grateful for the opportunity! As a novice UX designer, I also learned that:

Communication is key

Balancing user needs, design ideas, and technical feasibility often led to differing opinions within the team. As the design lead in a fast-paced 3-month timeline, I learned how to align designers and developers quickly, make informed decisions, and keep everyone focused on a shared goal.

Sometimes, less is more

During the design phase, we explored many ideas, concepts, and feature placements - which sometimes led to overlapping or duplicated functionality. One of the biggest lessons from this project was that less is more; simplifying the experience helped us create a clearer, more focused solution.

Ira's Avatar