M+ Audio Guide

An accessible and holistic museum experience

M+, a leading global museum of visual culture, is home to a vast and diverse collection of works representative of Chinese and Asian art, design, and architecture.

To improve the visitor experience, M+ enlisted Nic Chan to develop a PWA (Progressive Web App) for the museum’s audio guide. Nic then engaged Studio Earth as the UXUI design collaborator and Jarijn Nijkamp as the project manager and UX researcher.

Together, we developed an accessible platform that enables users to personalise their museum experience according to their preferences. The PWA audio guide offers numerous ways to engage with the M+ collection, such as through guided tours or spontaneous strolls, based on individual interest and the specific exhibit.

Team

Nic Chan on PWA (Progressive Web App) development, Jarijn Nijkamp on user experience research and project management, and Studio Earth on user experience and interface design

Digital and Editorial Content, and Learning and Interpretation at M+

Catherine Erneux, Claudia Tsang, Kingsley Man, Keri Ryan, Nicholas Leung, William Smith, Winnie Lai

The M+ Audio Guide start up interface on an iPhone 14 Pro's screen.

At M+, a visitor can experience the history of contemporary Chinese art in the unparalleled collection of the Sigg Galleries, amble through the bamboo-lined Courtyard Galleries with its conceptual art pieces, and view experimental film and moving image installations in The Studio.

As a dynamic museum with ever-expanding collections and new exhibitions, M+ strives to continuously improve the user experience to support their storytelling.

There are three audio guide interfaces. The first interface features the start-up page with three options. The second interface features the tours overview page, and the third interface features the artwork page.

A flow chart of the audio guide featuring two user flows that intertwine with each other and form a complete journey. — There are two access points to the user journey. Visitors can activate the audio guide from the start-up page or an audio stop.

Audio is a personal and effective medium for visitors to complement the striking visuals of the displayed artwork. To this end, Studio Earth redesigned the audio guide that provides both facts and comprehensive commentary on each piece from the museum collection.

There are three audio guide interfaces. The first interface features the language selection page with three options. The second and third interface features the start-up screen in English and Traditional Chinese. — The start-up page directs visitors to select their preferred language, leading to the audio guide's homepage.

There are three audio guide interfaces. The first interface features the keypad page. The second interface features the tours overview page, and the third interface features the settings page. — “Keypad,” “Tours,” and “Settings” are fixed at the bottom of the screen for visitors to navigate throughout their experience.

“Keypad,” “Tours,” and “Settings” are fixed at the bottom of the screen for visitors to navigate throughout their experience.

We developed the audio guide as a PWA (Progressive Web App), a high-performance web-based application compatible with the museum’s existing devices.

This PWA uses a simple interface, recreating familiar and intuitive UI patterns. Three main functions — “Keypad,” “Tours,” and “Settings” – are fixed to the bottom of the screen for ease of navigation for visitors, regardless of their technical literacy.

There are three audio guide interfaces. The first interface features the tours overview page. The second interface features the exhibition introduction page, and the third interface features an exhibition overview page. — Based on specific scenarios, an introduction to the exhibition will appear before the overview.

On the “Tours” page, visitors can explore self-guided tours or view a specific work via the keypad function. We catered the feature depending on the type of exhibitions.

Most galleries invite guests to explore freely, but special exhibitions, such as “Yayoi Kusama: 1945 to Now,” have specific visual narratives that can be better appreciated by following predetermined pathways.

For such shows, an introductory landing page precedes those of the artworks, gently informing the audience of the curatorial guidance for the optimal viewing experience.

Since M+ exhibitions can be spread out over its premises — with artworks located in varied areas — the location of each artwork is displayed on the artwork page for clarity.

There are three audio guide interfaces. The first interface features the keypad page. The second interface features the keypad page with an error message, and the third interface features an audio stop page. — Entering an audio stop number will bring the visitor to a language selection screen accompanied by an image of the selected work.

There are two audio guide interfaces. The first interface features a container for the about the work and audio description audio track options, and the second interface features a description of those options. — About the work offers insights from curators, makers and guests, where audio description narrates key visual elements of the work.

There are three audio guide interfaces. The first and second interface features an activated audio player interface at the bottom of the viewport, and the second interface features an audio track transcript. — Versatile audio functions such as speed up and down, fast forward and backward can help visitors to customise their experience.

We wanted to create an inclusive and accessible interface based on visitor behaviours and user surveys from M+. Visitors have two options for accessing information about a particular artwork: by typing in the artwork number or scanning a QR code.

Instead of being served a generic narrative when landing on the artwork page, visitors are able to dig deeper through two audio clips with accompanying narratives: “About the work” provides an extensive expert commentary analysing the work, and “Audio description” imparts a brief literal description of the artwork.

A representation of the visual hierarchy of work location, artist name, work name, year, and captions. — Studio Earth created a typographic system that distinguishes the visual hierarchy between location, artist, work, and year.

A diagram of different colours and their association with the audio guide's pages and functions. — A set of colours from the museum’s visual identity guideline are assigned to various pages and content types.

There are two audio guide interfaces. The first interface features the settings page, and the second interface features a language selection page accessed from the settings page. — Visitors can change the language of the audio guide at any point of their journey in the "Settings" tab.

There are three audio guide interfaces. Each interface features an illustration that instructs a user of the audio guide's function, such as audio stop numbers, the keypad, and the ability to toggle between two audio tracks. — The user guide illustrates the primary functions of the audio guide, focusing on audio stops and audio track usage.

The user guide nested under “Settings” explains the primary functions of the audio guide, such as the input of artwork stop numbers and the toggle between two types of audio.

An overview of the M+ audio guide interface.

This project was led by Nic Chan, Jarijn Nijkamp, Jimmy K.K Lam from Studio Earth with the Digital and Editorial Content, and Learning and Interpretation team at M+.

This case study was written by Rebecca Isjwara and Izumi Nakayama.