Audio-tour app
Preview of the app interface on two devices

The product

Explore the art gallery at your own pace. This app allows visitors to navigate the exhibition individually, without the need for a group, ensuring an uninterrupted experience at their convenience.

Icon - exclamation mark in purple circle

The problem

Visitors prefer a seamless experience without waiting for group tours to start. They want to fully enjoy the exhibition at their own pace, absorbing as much information as possible without any time constraints.

Goal icon

The goal

Design an audio tour app for an art gallery, empowering users to relish the exhibition at their leisure, accessing a wealth of information without being bound by a fixed schedule.

Role icon

My role

UX designer (generalist) designing an app from conception to delivery

Responsibilities icon

Responsibilities

Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on design

Understanding
the user

Research icon

User research: Summary

The research revealed a primary user group: students and working adults who, in their free time, either have a strong interest in or actively study art. This finding validated assumptions about the main user demographic for the app.

Furthermore, another noteworthy user group identified in the research comprises retired individuals dealing with hearing and sight issues. Remarkably, this demographic represents a common segment of museum and art gallery visitors in Europe.

User research: pain points

1

Time

People often visit galleries independently due to time constraints or spontaneous sightseeing.

2

Hygiene

Many visitors dislike sharing headphones in museums or galleries, prompting them to either skip the experience or become frustrated.

3

Discomfort

Elderly individuals with sight and hearing issues may feel discomfort when asking for information to be repeated.

4

Disruption

Scheduled groups often compel visitors to move forward, whereas many would prefer to linger longer near different objects.

Persona: Eva

Problem statement

Eva, a student with a busy schedule, seeks an uninterrupted and convenient time to study art.

User Persona slide with image of user and infortamtion about

Persona: Anton

Problem statement

Anton, a retired engineer, seeks to enjoy art and gather information without frustration, as he often misses details due to a hearing issue.

User Persona slide with image of user and infortamtion about

User journey map

Analyzing Anton's user journey highlighted the potential benefits of providing users with a dedicated Art Gallery app.

The slide with table representation of User Journey

Starting
the design

Paper wireframes

Screenshot of paper wireframes

Taking time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframe would be well-suited to address user pain points. For the main screen I've prioritized intuitive playback controls and attractive carousel interaction.

Digital wireframes

Throughout the initial design phase, I prioritized incorporating screen designs based on user research feedback and findings.

This prominent and appealing button provides users with a clear indication that starting the tour is easy and quick, without unnecessary extra steps.

Arrow showing to the right
Preview of the app on the device screen
Arrow showing to the left

At the top of the screen, positioned before anything else, there is a language selection button - a convenient starting point, especially for non-local users.

Digital wireframes

Easy navigation was a key user need to address in the design in addition to equipping the app to work with assistive technologies.

Simple and transparent pagination at the center of the screen facilitates progress tracking and content navigation

Arrow showing to the right on the device
Preview of the app on the device screen
Arrow showing to the left on the device

The 'Highlights' button is conveniently placed directly on the piece thumbnail, ensuring easy access by making the entire thumbnail clickable

Arrow showing to the left on the device

Interactive playback controls are designed to minimize clutter — the "close" and "play" buttons only appear after activating the "pause" function

Low-fidelity prototype

The low-fidelity prototype seamlessly integrated the primary user flow, covering the initiation of the tour and playback navigation. This allowed the prototype to be effectively employed in usability studies with users.

Lo-fi prototype
Screenshot of low fidelity prototype

User research: Pain points

I conducted two rounds of usability study. Findings from the first study helped guide the design from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings

1

User wants to start tour quickly

2

User wants to have playback controls

3

User wants to choose language

Round 2 findings

1

User wants to have text on “Highlights” button

2

User wants main menu to look more like a buttons

Mockups

Following the usability studies, I've put language options at the top and relocated registration and login functionalities to the main menu.

Low-fidelity preview of the low-fidelity app design in the device frame Arrow showing to the next frame High-fidelity preview of the hi-fi app design in the device frame

Mockups

In the second usability study, it became evident that relying solely on an icon for the "Highlights" button wasn't sufficient. Consequently, I added descriptive text alongside an enhanced icon to address this feedback.

Low-fidelity preview of the app on the device screen Arrow showing to the left High-fidelity preview of the app on the device screen

Key mockups

High-fidelity mockup preview of the app on the device screen High-fidelity mockup preview of the app on the device screen High-fidelity mockup preview of the app on the device screen High-fidelity mockup preview of the app on the device screen

High-fidelity prototype

The final high-fidelity prototype showcased streamlined user flows for audio tours. It effectively addressed user needs by incorporating playback control options, integrating buttons into the main menu, and including a rating feature at the conclusion.

Hi-fi prototype
Screenshot of high-fidelity prototype

Accessibility considerations

1

Language

Provided possibility to choose languge at the beggining of the tour

2

Detailed imagery

Utilized detailed imagery for showpieces to assist users in obtaining relevant information

3

Icons + Text

Employed a combination of icons and text to enhance navigation simplicity

Takeaways

Impact icon

Impact

The app offers visitors the opportunity to effortlessly take a tour, allowing them to focus solely on the showpieces and trust in gallery services.

One quote from study participant: “Brilliant! I wish all galleries and museums had something like this”

Learned icon

What I learned

During the design of the Audio-tour app, I discovered that the initial ideas were just the starting point of the process. Usability studies and feedback from peers played a pivotal role in shaping each iteration of the app's design.

Next steps

1

Conduct another round of usability studies to validate wether the pain points users experienced have beed effectively addressed

2

Conduct more user research to determine any new areas of need

thank you!

Arrow up showing possibility to scroll to the top of the page