Behold | Gallery Audio Tour App
UX/UI Mobile App Design
Date: Nov 2023 - Feb 2024
Role: Lead Designer
Tools: Figma
Why: Portfolio Project
About
Behold is more than just an audio tour app; it's your personal gateway to exploring museums like never before. With Behold, you're not just a visitor; you're an adventurer, diving deep into the rich tapestry of art, history, and culture. Behold offers GPS navigation, multilingual support, accessibility for all, and it’s completely free! Embark on a journey of enlightenment and wonder with the ultimate companion for museum enthusiasts.
Problem
Visiting a museum for the first time in a new space can be an exciting but also overwhelming experience. Here are some common issues that first-time visitors might encounter: navigational challenges, information overload, lack of context, language barriers, and limited accessibility. Addressing these challenges is crucial to enhancing the overall museum experience for first-time visitors and ensuring that everyone has the opportunity to explore, learn, and appreciate the cultural treasures on display.
Solution
Traditional museum visits often present challenges such as language barriers, lack of accessibility for individuals with disabilities, and difficulty navigating through vast collections. Behold can solve these issues by offering audio tours in various languages and offering subtitled audio tours for the hard of hearing and descriptive audio for those with low vision. Navigating through a museum can be overwhelming, especially for first-time visitors. Behold's GPS navigation feature eliminates this uncertainty by providing step-by-step directions to different points of interest within the museum. By making museum experiences more inclusive, Behold ensures that everyone can participate and enjoy cultural enrichment.
Design Process
User Research
Survey Results
I conducted a 13-question survey with 21 fellow museum-goers to understand how they tour museums. The goal is to gain insight in user experience on how one can independently tour a museum and what can be done to improve the experience.
Here is what they’ve said:
Competitive Research
To learn more about how my users visit museums, I researched several other tour apps. I analyzed what their pros and cons were, as well as what gave them a competitive edge.
Define
User Personas
Here are the user persons I came up with from my research findings. These personas represent different types of people who love museums, and have the same end goal but have different needs.
Both personas showcase a realistic goal that can be achieved through the app. The goal of these personas is to show how each user may have different needs and will do things their own way. It also focuses on the frustrations, goals, and how every interaction differs from the last.
Empathy Map
The empathy map shows what the user thinks, feels, sees, does, hears, and says. This map focuses on the target user and what they truly do and don’t want.
Customer Journey Map
The customer journey map focuses on the pains, frustrations, and emotions a user may feel when visiting a museum.
Ideate
User Flow
The user flow shows multiple paths the user can take. The end goal will always be the same no matter how the user gets there.
Information Architecture
Here, I have organized all of the apps’ components and how a user can interact with them. There are four main navigation paths a user can choose from location, museums, tours, and favorites. All of it is laid out in a way that a user can navigate to and from easily.
Prototype
Sketches
Below are some basic sketches of the general layout of the app. The first step when designing is to sketch out the ideas to see how they can work and what can be improved on. Without sketching first, a lot of ideas can end up lost.
Low fidelity wireframes
Once the main components of the paper wireframes were done, I created some low-fidelity wireframes in Figma.
UI Kit
Here are all the UI elements such as the colors, logo, and typefaces.
Test
A/B Testing
Once testing was completed, I was able to give the app some well-needed adjustments. Without A/B testing, I’d be unable to advance my app to give users what they want.
At first the home screen looked very confusing and ambiguous. The scenery of the locations add a nice touch, although I needed to focus more on local areas instead of all around the world. Anywhere is too vague when focusing on a location based app. It works better when it’s focused on a one particular area.
I also decided to lighten up the background and remove the home screen icon. I made the home screen the location screen and also made the icon on the bottom reflect that. This necessary change took away any confusion on where the home screen is and how to get to it. The location went from ‘Anywhere’ to New York City. This makes more sense because New York City can be better explored than ‘Anywhere.’
A welcome message was added and so were the amount of museums in relation to the areas. The scenery was removed as well, resulting in a clean and cohesive layout.
Initially, the third icon on the navigation bar was a ticket that lead to the ticket screen. Tickets are very important when attending any event, and should be readily available at any time for smooth access. However, many testers were confused because they were only on the ticket screen for a little while. and decided against the ticket icon. The main focus on the app are the audio tours, not tickets to the museum. Tickets clearly have to be included, just in a different way.
After some more designing I decided to include the ticket segment at the beginning of the tour section. This way, once a user arrives at the museum, all they have to do is purchase a ticket and then begin the tour they’re selected. This is less confusing vs purchasing your ticket on one part of the app, then returning to another part just to begin the tour. The user journey should flow smoothly with no error or confusion.
The image of the current museum was replaced with a welcome message and the name of the museum. This creates a more open space.
After a lof of quality feedback, the results were unanimous. Instead of putting the tour information and directions on 2 different screens, I combined the 2. It made very little sense for users to have to click through 2 screens instead of just scrolling through one to begin the tour. It was also misleading because the previous button said ‘Began Tour’ when it was really just taking you to a directions page.
I removed all ambiguity and misleading information with the redesign. Now users can get the information regarding the tour as well as directions by just scrolling. The call to action button still says ‘Began Tour,’ and this time that’s exactly what will happen.
As previously mentioned, the background was also lighted to match the other screens and the home icon was replaced with the menu screen as well as a back arrow on the opposite side. I also removed a lot of the color yellow. While yellow is a prominent color in the app design, it can also be hard on the eyes at times. When the color yellow is used as an accent vs the main, it’s more ascetically pleasing. The tour icon was also moved because its essentially the 3rd or 4th step taken when using the app.
Hi-Fi Wireframes
Once the main components of the low-fidelity wireframes were completed, I was able to build High-fidelity wireframes in Figma.
Onboarding
Other Screens
Clickable Prototype
Final Thoughts
I‘ve learned a lot about museums and audio tours on this project. I've always been an avid museum-goer, but never even knew that these types of apps exist. I now understand all of the issues that can come with visiting a museum for the first time, especially in an unfamiliar area. The next time I visit a brand-new art museum, I will surely download and use an audio tour app to make my experience all the better.