Museum Tour
Course Project for Social Good: Mobile App and Responsive Web Design
This course project for social good came focused on designing a more accessible audio tour experience. Museum Tour is a [fictional] organization dedicated to improving museum accessibility for all people. The app contains a catalog of accessible audio tours from as many museums as possible. The app would include audio description, multiple language options, museum navigation, audio transcription, and more. The website focuses more on the process of helping museums join the app.
The Problem
Museum visitors need a way to tour museums independently, regardless of language or ability, on their schedules through an audio tour app. Museums need a way to make their audio tours more accessible to all people.
Duration: 2 months, October - November 2022
​
My role: Lead UX designer, UX researcher
​
Responsibilities: User research, wire framing, mockups, prototyping, visual design
The Goal
Create an app with a catalog of audio tours that would be accessible to as many people as possible, especially allowing people with disabilities to visit museums independently.
Create a website that would help museums through the process of recording and translating the audio files and then making them available through the app.
User Research
While many museums do have audio tours available through an app or website, they often lack in accessibility. For example, they may talk about an object in the museum without offering an audio description of what the object actually is/looks like. Or, they may give great information about an exhibition without helping the visitor independently navigate to the exhibition area. The use of technology can not only enhance museum experiences for people with visual impairments, but also allow sighted people to experience museum exhibitions in new ways. During a competitive audit, I did not find any direct competitors who would offer all the functions that Museum Tour aims to offer. The indirect competitors had apps for their museums that offered self-guided audio tours in a few different languages. Some required in-app purchases. One claimed that they were working on adding sign language videos, more languages, and audio description.
Personas
![Google UX Design Certificate - Persona [Template].png](https://static.wixstatic.com/media/5b16e1_b8d544870c7840eb8d472aec27c04902~mv2.png/v1/fill/w_830,h_467,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Google%20UX%20Design%20Certificate%20-%20Persona%20%5BTemplate%5D.png)
![Google UX Design Certificate - Persona [Template] (1).png](https://static.wixstatic.com/media/5b16e1_17385c154ae94052addcda12f8a6b0ec~mv2.png/v1/fill/w_834,h_469,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Google%20UX%20Design%20Certificate%20-%20Persona%20%5BTemplate%5D%20(1).png)
Problem Statement
Maggie is a blind woman who enjoys art and history who needs an app to help her navigate museums by herself because she would like to be more independent and inform others in the blind community about accessible places and technologies.
Problem Statement
Jang-Mi is an art museum director in South Korea who needs an app to make the museum more accessible to those with disabilities and those who speak foreign languages because she believes there should be no barriers to art or learning.
Wireframing
When ideating with wireframes for the app, I knew the search function would be the focus for the main screen. I wanted the user to easily be able to find all the museums available on Museum Tour in their area.
The user can see popular tours that are available through the app via the carousel feature at the top of the screen.
Then there is a brief explanation of how the app works.
Then the search function is below that.
Museum Tour starts with a welcome screen, which allows users to make an account or continue as a guest. Then they search for a museum, pick one, choose which tour and their tour preferences, and then begin the tour.
​
View Museum Tour’s Low-fidelity Prototype
Usability Study
Using the low-fidelity prototype, participants followed a series of prompts to search for a museum tour and begin the tour. The time it takes the user to complete the tasks will be recorded. It will be followed by a SUS. The study goals were to determine if the Museum Tour app is easy to use and if features need to be added or changed to make the user experience better.
Study Findings
1
2
3
There is too much content on the main page.
There isn’t a way to navigate back in the process.
Search box should be more prominent.
I took all the findings into account when moving from digital wireframes to mockups. I moved the “How It Works” section away from the main screen in order to give more focus to the search function. I also altered the bottom navigation to include a back button.
High-fidelity Mockups
High-fidelity Prototype
The Museum Tour mobile app starts with a welcome screen, which allows users to make an account or continue as a guest. Then they search for a museum, pick one, choose which tour and their tour preferences, and then begin the tour.
​
View Museum Tour’s High-fidelity prototype
Accessibility Considerations
Color contrast.
I checked all the color combinations through WebAIM.org to ensure that the color contrast was accessible.
1
Iconography.
​
Use of icons throughout the design so that it would be more accessible to non-English speakers.
2
Screen reader technology.
​
The final design will be accessible with screen reader technology and the use of alt text for both informative and decorative objects.
3
Responsive Web Design
The Museum Tour website would have information for mobile app users, but its main focus is to help museums get their audio tours onto the app. So, the user flow for the responsive site designs walks museums through the initial steps to begin the process of joining Museum Tour.
​
View Museum Tour’s Responsive Site Prototypes
Design pages for the responsive website for the other main sections.
Accessibility and inclusion are very important to me, so I really enjoyed working on a project like Museum Tour that would have those two values at the forefront of its design and functionality.
​
Some possible next steps are:
1
Create screens for the mobile app for both the hamburger menu links and the footer navigation bar links.
2
3
Conduct a usability study with the high-fidelity prototypes.
