details

Client
Art Galleries and Museums
Project Type
UX/UI Design
Project Year
2021-22

OVERVIEW

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.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

The Product

During the pandemic, many art galleries and museums have been unable to make use of their hardware for audio tours. This app offers a solution for art galleries and museums to provide users with audio tour content directly on their phones, without a need for physical touch. Users can seamlessly interact with the gallery space and learn more about the artworks around them.

The Problem

Visitors to art galleries and museums need a contact-free and simple way to access audio content.

The Goal

Design an app that allows users to take audio tours on their mobile devices.

User Research

Interviews

In order to further understand the needs of potential users, I conducted interviews with people who attend museums a few times per year or more. I also created personas and user journey maps that allowed me to think more deeply about issues of accessibility and inclusiveness.

Interviewees confirmed the need for a contact-free audio content, but also expressed the need for improved navigation, assistance with trip-planning, and a means of recording or saving aspects of their experience to better remember it.

Pain Points

  • Contact-free Direct physical contact should be avoided as a health and safety precaution.
  • Navigation - Users often have trouble locating the content they are interested in, and expressed the desire for a map to help with general navigation.
  • Trip Planning - Some users want information about the gallery and the art on display to help plan their trip.
  • Making a record - Some users wanted a way to remember the experience, but also found that taking pictures in the gallery space can be distracting for others.

Personas

I created two user Personas by using problem statements based on my research. "For example, Carrie is a traveling art lover who needs an easy-to-use audio guide that doesn’t restrict her freedom of movement because she wants a gallery experience that is stress free and enjoyable."

Wireframes

Paper Wireframes

Using paper wireframes allowed me to explore different layouts and decide on an information architecture for the app. I ultimately decided on a hub-and-spoke style.

Digital Wireframes

I then focused on applying the insights gained from user research to the digital wireframes. Assistance with navigation was considered to be important by many users, so I designed a map feature.

Refining the Design

Usability Study Findings

Round 1 findings

  • “News” section was uninteresting to users
  • Users expected Tours to work like a playlist

Round 2 findings

  • “Save to Favorites” feature was not immediately clear to users
  • Onboarding and tooltips should be added for guidance
  • Users struggled to find the Search

High-Fidelity Prototype

The home screen was switched to a hub-and-spoke information architecture. With this design, users were able to find desired information more quickly.

Other projects