Art Gallery Audio Tour App

Details

Project Type

UX/UI Design

Date

September/October 2022

Summary

Based on a prompt from the Google UX Design course on Coursera, I designed an audio tour app for art galleries and museums. Users can engage with audio content in a variety of ways: Exploring the Map, Typing in Search, or Scanning a QR code. This way, users can seamlessly interact with the gallery space and learn more about the artworks around them. Audio content can be saved for later listening or return trips to the museum. Additionally, users can purchase tickets and access information about events and special exhibitions at the museum. For this design, I focused on the way museum visitors interact with the physical space of the gallery. I conducted user interviews, created personas, problem statements, and user journey maps to ensure that many aspects of the user's journey were considered throughout the design process.

Key Features

Audio Player

Map, Scan, and Favorites

Tour mode

Finished Products are great, but

How did we get here?

Started with the Problem

Hardware made for audio tours in art galleries and museums has been around for decades. But during the pandemic, this hardware became largely unusable due to the need for direct physical touch. Users need a means of accessing audio content and interacting with the art around them while at the same time avoiding direct physical contact with surfaces in the gallery space.

Saw an opportunity

Designing an app that provides users with an audio tour experience without the need for direct physical touch was a unique opportunity. This challenge would allow me to think through the various and complex ways that people interact with a gallery space, and presented a great chance for sharpening my design skills. When I saw the potential for this design, I couldn't wait to get started!

Established a goal

I seized on this design opportunity by establishing clear goal for the project: Design a mobile app that allows users to take audio tours in art galleries and museums, and offers a means of accessing audio content without the need for direct physical touch. This app should provide the best possible experience for gallery visitors and take their needs into account.

With a goal in place,

the research phase begins

Competitive Analysis

At the beginning of the design process, a competitive analysis was conducted to assess existing audio tour apps in the market. The apps reviewed were The Art Institute of Chicago App, ArtLens, The National Gallery App, the Yale University Art Gallery App, and Smartify. These apps were compared based on key features such as Gallery Information, an Interactive Map, and the ability to "scan" artworks. The accessibility and branding of each competitor was also considered. The analysis showed that while many of the apps offered similar features, there were some areas where they fell short. For example, some apps had limited information about the artworks or lacked an interactive map, while others had a confusing interface. These insights helped guide the design decisions for the new audio tour app, ensuring that it addressed the shortcomings of existing apps in the market while also offering a unique and engaging user experience.

Interviews with Gallery and museum attendees

To gain a better understanding of the needs and preferences of potential users, user interviews were conducted with adults who generally visit at least one art gallery or museum per year. These interviews were conducted both in-person and online and helped to identify key pain points and opportunities for improvement in the user journey. During the interviews, participants were asked about their motivations for visiting galleries and museums, their preferred modes of interaction with artworks, and their experiences with existing audio tour apps. This user-centered approach ensured that the app was tailored to the needs and preferences of the target audience, leading to a more engaging and effective user experience.

Creating Personas

Based on the needfinding interviews conducted with adults who visit art galleries and museums, two personas were created: Carrie and Arjun. These personas allowed for the exploration of the different motivations that each user has for visiting a gallery, and helped to identify pain points that were discovered in the interview process. They also allowed for the exploration of differing needs that users may have when it comes to creating an accessible experience. For example, Carrie has trouble hearing and relies heavily on visual aids to understand the artworks, while Arjun has red/green colorblindness and requires a color-accurate interface. By creating these personas, I was able to keep the diverse needs of users in mind and ensure that the app was accessible to a wide range of users.

What was discovered through research?

Pain Points

• Direct physical contact should be avoided as a health and safety precaution

• Galleries and museums can be very large, and users often have trouble locating the content they are interested

• Planning a trip can difficult, and requires the user to be informed about various details such as opening hours

Insights

• Provide users with a means of physically interacting with art content, yet without directly touching gallery surfaces

• Users need an interactive map/navigation feature to assist them in finding content

• Allow users to access information necessary for planning and enjoying their trip

Time to Begin Ideating

Paper Wireframes

To develop the initial layout and functionality of the audio tour app, paper wireframes were created. These low-fidelity sketches helped to visualize the basic structure and information architecture of the app, including the placement of key features such as the map, search bar, and audio player. The paper wireframes were iterated upon multiple times to refine the layout and ensure that it met the needs of the personas created earlier in the design process.

Digital Wireframes

Once the paper wireframes were finalized, they were used as a blueprint for the digital wireframes. This paper prototyping phase helped to save time and resources, as it allowed me to quickly test and make changes to the basic layout and structure of the app before moving on to more complex design elements.

Next, conducting a usability study

to identify areas for improvement

Study parameters

findings

Study Type
Moderated Usability Study

Size
5 participants

Demographics
Art Gallery and Museum Visitors

• Many users found the News & Events category to be unnecessary or uninteresting

• Save to Favorites feature was not immediately clear to users

• Users expected Tours to function similarly to a music playlist

Some problems were identified,

So what are the solutions?

Lead users to the content they are looking for

In the initial design, users had to scroll down to view different types of information that they may be looking for, such as Exhibitions, Events, Artists, and Artworks. In testing, most users found some sections of the homepage to be less significant or useful, such as "News & Events". This unnecessary content was removed from the homepage, and a button-based navigation was introduced in order to provide users with immediate context. Additionally, the information was presented in a more hierarchical manner that guides users along the main user journey (Listening to an audio tour).

Provide additional Guidance whenever necessary

Some users struggled with the Save to Favorites feature, and found that it was not immediately clear what the function of the Heart icon was. This led me to discover the importance of including a short onboarding process, including tooltips for first-time users. User testing revealed that an explanatory tooltip was particularly necessary for users to connect the Favorites tab and the Save to Favorites icon. Additionally, "Saved to Favorites" text was added in order to provide feedback when users save content.

Focusing on accessibility

to improve the design for all users

Compliance with wcag standards

Accessibility was a key consideration throughout the design process, and the audio tour app was designed to comply with the Web Content Accessibility Guidelines (WCAG) 2.1. This included considerations for users with visual, auditory, and cognitive disabilities, ensuring that the app was accessible to as many users as possible. Design decisions were made to increase color contrast, optimize font size and spacing, and ensure that audio content was accompanied by captions and transcripts. Compliance with WCAG standards not only ensures that the app is accessible to a wider audience, but also reflects the team's commitment to inclusivity and equity in the design process.

Offering Audio Transcripts

Audio transcripts are an important feature that improves accessibility and usability for users with hearing impairments or those who are unable to listen to audio content. Transcripts allow users to read the content of an audio tour and understand the information being presented, even if they cannot hear it. This not only benefits users with hearing impairments, but also users who prefer to read rather than listen to content, or who may be in a situation where they cannot listen to audio, such as in a noisy environment.

providing multiple forms of feedback

In order to match the design aesthetic with art museums and galleries, I chose to use a neuomorphic-inspired style for the app. While it does succeed in giving off a modern appearance, there are some inherent drawbacks to using this style when it is not employed properly and with due consideration for a variety of accessibility factors. Because some users may have difficulty distinguishing buttons, multiple forms of feedback should be used to indicate status and provide context. In the case of buttons, icons were used in addition to text, and a status indicator was used to show a "pressed" button state, as opposed to simply using shading. The tab bar below was designed with these ideas in mind.

Refining the design into a high-fidelity Prototype

The High-Fidelity Prototype is Complete

View in Figma

takeaways and Final Thoughts

PRoper Guidance and feedback give users a working mental model

In order to create a seamless and intuitive experience for users, the audio tour app provided proper guidance and feedback throughout the user journey, with the goal of creating a working mental model for users. This involved providing clear and concise instructions and prompts to guide users through the different functionalities of the app, such as how to use the interactive map or how to access audio content. Additionally, the app provided feedback to users in the form of visual cues and notifications, which helped users understand the status of their actions and provided reassurance that their interactions with the app were successful. By providing this guidance and feedback, the app was able to create a working mental model for users, allowing them to understand the functionality of the app and how to use it to achieve their desired outcomes.

Users interact with the Gallery
Space in different ways

Users interact with the art gallery space in a variety of ways, and it was important for the audio tour app to accommodate these different methods of engagement. Some users prefer to explore the gallery space in a linear fashion, following a specific path through the exhibits, while others may prefer to jump around and explore different areas of the gallery based on their interests. To address these differing preferences, the audio tour app provided an interactive map that allowed users to explore the gallery space in a non-linear fashion, with the ability to tap on specific exhibits for more information. Additionally, the app also allowed users to type in specific search terms to quickly access information about a particular artwork or artist. Another way users engage with the gallery space is by scanning QR codes that are placed next to artworks, which allowed users to access audio content and learn more about the artwork. By accommodating these different methods of engagement, the audio tour app provided a more intuitive and customizable experience for users, allowing them to interact with the gallery space in a way that was most comfortable and convenient for them.

If you'd like to know more,

Let's chat!

Get in Touch

Designed in Webflow by Patrick Slevin, 2023