Ottawa Art Gallery, 2025
Ottawa Art Gallery, 2025
Improving Multi-Level Navigation for Gallery Visitors
Improving Multi-Level Navigation for Gallery Visitors
Improving Multi-Level Navigation for Gallery Visitors
Mobile App
Mobile App
Mobile App
UX / UI
UX / UI
UX / UI
Case Study
Case Study
Case Study
15 min read
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, the OAG Explore app introduces a digital layer that supports engagement inside the gallery.
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, the OAG Explore app introduces a digital layer that supports engagement inside the gallery.
Timeline
Timeline
Sep - Nov (3 months)
Sep - Nov (3 months)
Team
Team
6 IMD students
6 IMD students
Role
Role
Design Lead
Design Lead
Skills
Skills
Figma, Prototyping
Figma, Prototyping
Timeline
Sep - Nov (3 months)
Role
Design Lead
Team
6 IMD students
Skills
Figma, Prototyping
The problem
The problem
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. 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.
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. 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.
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. 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.
How can we help visitors navigate the building confidently so they can focus on enjoying the art?
How can we help visitors navigate the building confidently so they can focus on enjoying the art?
How can we help visitors navigate the building confidently so they can focus on enjoying the art?
The solution ;)
The solution ;)
Clearer tours system
Clearer tours system
OAG Explore helps visitors navigate the building with a new tours system with stops, so they always know where they are and what’s next.
OAG Explore helps visitors navigate the building with a new tours system with stops, so they always know where they are and what’s next.
Interactive map
Interactive map
A real-time, interactive map with icons and a top search bar that allows visitors to look up any exhibition or event.
A real-time, interactive map with icons and a top search bar that allows visitors to look up any exhibition or event.
So… this is how we did it:
So… this is how we did it:
Research
Research
Research
A look at the current situation…
A look at the current situation…
A look at the current situation…
After an in-depth interview with OAG’s Digital Marketing Manager, we identified several factors preventing visitors from having a seamless experience at the gallery:
After an in-depth interview with OAG’s Digital Marketing Manager, we identified several factors preventing visitors from having a seamless experience at the gallery:
After an in-depth interview with OAG’s Digital Marketing Manager, we identified several factors preventing visitors from having a seamless experience at the gallery:
Outdated exhibitions' info
Outdated exhibitions' info
Outdated exhibitions' info
Because exhibitions change regularly, printed materials & the current app couldn’t keep up, leaving visitors confused or unsure whether they were viewing the most current displays.
Because exhibitions change regularly, printed materials & the current app couldn’t keep up, leaving visitors confused or unsure whether they were viewing the most current displays.
Because exhibitions change regularly, printed materials & the current app couldn’t keep up, leaving visitors confused or unsure whether they were viewing the most current displays.
Unstructured Tour Experience
Unstructured Tour Experience
Unstructured Tour Experience
There was no official tour system in place. The website only listed exhibitions individually, without offering guided routes.
There was no official tour system in place. The website only listed exhibitions individually, without offering guided routes.
There was no official tour system in place. The website only listed exhibitions individually, without offering guided routes.
Untrackable Event Schedule
Untrackable Event Schedule
Untrackable Event Schedule
While OAG’s website displays upcoming events, the old app provides no way for visitors to view or track them, creating an inconsistent and fragmented experience.
While OAG’s website displays upcoming events, the old app provides no way for visitors to view or track them, creating an inconsistent and fragmented experience.
While OAG’s website displays upcoming events, the old app provides no way for visitors to view or track them, creating an inconsistent and fragmented experience.
Our on-site experience:
Our on-site experience:
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.
We ended up wandering around until we found an exhibition entrance, which made the art experience feel a bit disorganized.
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.
We ended up wandering around until we found an exhibition entrance, which made the art experience feel a bit disorganized.
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.
We ended up wandering around until we found an exhibition entrance, which made the art experience feel a bit disorganized.
From this, we concluded that…
From this, we concluded that…
From this, we concluded that…
The wayfinding system at OAG lacks consistency and alignment across maps, signage, and vertical circulation.
The wayfinding system at OAG lacks consistency and alignment across maps, signage, and vertical circulation.
The wayfinding system at OAG lacks consistency and alignment across maps, signage, and vertical circulation.
Creating our vision
Creating our vision
Creating our vision
In short, improving the navigation experience became our priority. To address this core problem, 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.
In short, improving the navigation experience became our priority. To address this core problem, 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.
In short, improving the navigation experience became our priority. To address this core problem, 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.
OAG Explore App flow diagram
OAG Explore App flow diagram
OAG Explore App flow diagram
Design
Design
Design
Intuitive flow
Intuitive flow
Intuitive 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.
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.
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.
First-time user flow
First-time user flow
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. These wireframes serve as the foundation for consistent UI decisions, allowing us to validate user flows while staying grounded in OAG’s look and feel.
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. These wireframes serve as the foundation for consistent UI decisions, allowing us to validate user flows while staying grounded in OAG’s look and feel.
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. These wireframes serve as the foundation for consistent UI decisions, allowing us to validate user flows while staying grounded in OAG’s look and feel.
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.
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.
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.
We also created a mid-fi version to conduct our usability testing. Read the full report here
We also created a mid-fi version to conduct our usability testing. Read the full report here
We also created a mid-fi version to conduct our usability testing. Read the full report here
The new nav bar
The new nav bar
The new nav bar
With the new navigation, users can easily access all features, especially the real-time navigation map. The nav bar remains visible at all times, allowing users to move smoothly between “Tours” and “Navigation.” This lets them read exhibition information while navigating the space with confidence.
With the new navigation, users can easily access all features, especially the real-time navigation map. The nav bar remains visible at all times, allowing users to move smoothly between “Tours” and “Navigation.” This lets them read exhibition information while navigating the space with confidence.
With the new navigation, users can easily access all features, especially the real-time navigation map. The nav bar remains visible at all times, allowing users to move smoothly between “Tours” and “Navigation.” This lets them read exhibition information while navigating the space with confidence.
With the new navigation, users can easily access all features, especially the real-time navigation map. The nav bar remains visible at all times, allowing users to move smoothly between “Tours” and “Navigation.” This lets them read exhibition information while navigating the space with confidence.
Old: there is no functional pages for navigation and events :(
Old: there is no functional pages for navigation and events :(
Old: there is no functional pages for navigation and events :(
The new one :D
Home: A quick overview of what the app offers, how to use it effectively, and links to OAG’s social media channels.
Tours: A structured list of curated routes that guide visitors through different stops and floors.
Navigation: A real-time, interactive map that helps visitors locate themselves, explore floors, and move confidently through the gallery.
Events: A centralized place to view and track OAG’s upcoming events directly from the app.
And Profile: A simple settings area where users can manage preferences and app-related information.
New nav bar :D
Home: A quick overview of what the app offers, how to use it effectively, and links to OAG’s social media channels.
Tours: A structured list of curated routes that guide visitors through different stops and floors.
Navigation: A real-time, interactive map that helps visitors locate themselves, explore floors, and move confidently through the gallery.
Events: A centralized place to view and track OAG’s upcoming events directly from the app.
And Profile: A simple settings area where users can manage preferences and app-related information.
New nav bar :D
Home: A quick overview of what the app offers, how to use it effectively, and links to OAG’s social media channels.
Tours: A structured list of curated routes that guide visitors through different stops and floors.
Navigation: A real-time, interactive map that helps visitors locate themselves, explore floors, and move confidently through the gallery.
Events: A centralized place to view and track OAG’s upcoming events directly from the app.
And Profile: A simple settings area where users can manage preferences and app-related information.
Let's start!
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.
Get directions
Get directions
Get directions
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 for an exhibition
Search for an exhibition
Search for an exhibition
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!
How about joining an event?
How about joining an event?
How about joining an event?
It's super easy! Finding directions to an event follows the same process as finding directions to an exhibition.
It's super easy! Finding directions to an event follows the same process as finding directions to an exhibition.
It's super easy! Finding directions to an event follows the same process as finding directions to an exhibition.
Reflection
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! However, as novice UX designers, we also faced many challenges, such as simplifying the user and app flows and considering the feasibility of all proposed design features.
This was our first time handling such a large and meaningful project with a real client, and we were truly grateful for the opportunity! However, as novice UX designers, we also faced many challenges, such as simplifying the user and app flows and considering the feasibility of all proposed design features.
What's next?
What's next?
For this project, I would love to continue researching and designing:
An alternative version of the interactive map with a more colorful visual approach
Additional micro-animations to enhance component interactions
For this project, I would love to continue researching and designing:
An alternative version of the interactive map with a more colorful visual approach
Additional micro-animations to enhance component interactions
