Case Study: Audio Tour App
As part of the Google UX Design Certificate Program, my first project was to design an audio tour app for an art museum. This was a great experience as a brand new UX designer. Continue reading to see how I took this project through the design process.
Product
The Niehaus Art Museum app provides audio tours of the museum’s art collections. Visitors of the Niehaus Art Museum can use the app to choose from existing audio tours or to customize their own audio tours based on artwork they’re interested in - creating more personal experiences.
Duration: August - September 2021 (7 weeks)
Overview
Problem
Art museum visitors want an immersive and interactive audio tour experience.
Goal
Design an art museum audio tour app that allows users to customize audio tours by choosing audio clips about artwork.
Role
UX designer designing an art museum audio tour app through every aspect of the design process.
Understanding the Users
Samira
Age: 43
Occupation: Fusion-Cuisine Chef
Samira is a chef at a popular fusion-cuisine restaurant in downtown Chicago. She enjoys planning out the menu and creating new recipes and flavor profiles. Samira is bilingual - English and French. She has a busy, yet steady work schedule. Some weekends, she likes to visit the latest art exhibits across the city. Her experiences at the art exhibits can sometimes influence her work creations.
Lena
Age: 19
Occupation: Part-time Administrative Assistant
Lena is a freshman at a university in Houston. She’s undecided in her choice of major. Lena is thinking of either going into sports science or computer science. She is always looking for something fun to do. Her and her old high school friends plan out there weekends together. If there’s a last minute change in plans, then they might look up to see what else they can do instead or cancel their meetup.
Pain Points
Depth
Audio tours can tend to lack depth in voices, stories, and other interesting information
Ambience
Audio tours can tend to lack a format that sets an ambience, including music, personable voices, and anticipation
Possibilities
Audio tours can be limited in tour options
Equipment
Faulty audio equipment disrupts the visitor’s experience
Wireframes
As I transitioned the paper wireframe of the home screen to a digital wireframe, I factored in Gestalt proximity principle to clean up the design.
I expanded the number of options in the navigation bar to open a map and to access the current tour.
Users will see a list of audio clips of artwork associated with an art category (ex. artist). Then they can select certain audio clips of artwork that they prefer to listen to and add those selections to a “cart” (similar to shopping on mobile apps).
My research involved conducting two usability studies. My first usability study had participants test the audio tour customization user flow in the low-fidelity prototype. Findings from that study helped in designing the mockups. Then I conducted a second usability study for participants to test the high-fidelity prototype that revealed the findings below.
Round 1
1. Users need guidance on how to customize audio tours
2. Users need better naming conventions for buttons & labels
3. Users want clear cues for arranging the order of their audio tours
Round 2
1. Guidance information needs to be simple and clear
2. The color and layout of the app should reflect the modern era
Refining the Designs
Originally, I used the term ‘cart’ for storing audio clips because I likened my designs to shopping apps. After the usability studies, I didn’t want users thinking they were purchasing audio tours. So I changed the term to ‘playlist’, and I started relating my designs to music apps.
The second usability study revealed the need to brighten up the color theme and modify the visual design to appear more modern. So I referred to apps that have playlists and shopping carts for ideas.
The final high-fidelity prototype provides simple and clear guidance throughout the user flow and multiple options for viewing and rearranging the selected audio clips.
Accessibility Considerations
Transcript
Each audio has its own screen with a button to play the clip and a transcript of the audio, which accommodates users who are hearing impaired.
Color Theme
The color theme was brightened to appear more inviting and exciting to use. I used Google's Material Design Color Tool to ensure the colors meet accessibility levels when using white text.
Icons
All of the icons in the top and bottom navigation bars are paired with text. The same can be said for the majority of the icons used throughout the designs.
Takeaways
At the beginning of the project, designing an app felt overwhelming. Using tools such as user journey maps in the early stages and affinity maps in the later stages of the design process helped organize and narrow the focus of my designs for the app.
Impact
The app gives users control of what is included in their audio tour experiences.
One quote from a study participant:
“The app is cool. It’s easy to use.”