M+ Audio Guide

A holistic and accessible museum experience

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

To improve the museum experience, M+ enlisted Nic Chan, Jimmy K.K. Lam of Studio Earth, and Jarijn Nijkamp to design and develop a PWA (Progressive Web App) as the audio guide.

As a team, we developed a platform that enhances the visitor experience with numerous ways to access the museum collection based on a user's interests and preferences.

Team

Nic Chan on development, Jimmy K.K. Lam at Studio Earth on user experience and interface design, and Jarijn Nijkamp on user experience and project management.

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. — A PWA (Progressive Web App) uses progressive enhancement to deliver a more reliable user experience.

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

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

Audio is an effective medium for the museum to complement its vivid collections. Hence, we aimed to design a comprehensive layout with details and commentary on each piece in the collection, accessible throughout a visitor's museum experience.

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 prompts visitors to select their preferred language, which directs them 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, where visitors can conveniently toggle between them.

We designed the audio guide on intuitive user interaction patterns. Three main features — "Keypad," "Tours," and "Settings" — are fixed at the bottom, where visitors can conveniently toggle between them.

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. — An introduction page for special exhibitions will appear before a tour's overview page.

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 on the keypad directs visitors to a language selection page with an image of the selected work.

Visitors can explore guided tours on the “Tours” page or access specific works on the keypad. We developed these features based on the type and nature of the exhibitions.

Where most galleries invite visitors to explore freely, special exhibitions, such as “Yayoi Kusama: 1945 to Now,” propose specific pathways for a narrative-based experience.

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, whereas “Audio description” narrates the work's visual elements.

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. — Audio functions such as fast forward and rewind can help visitors customise their experience based on their preferences.

One of our aims is to create an inclusive interface that is based on visitor behaviour. Visitors can access information about a selected work by either entering the work number or scanning a QR code.

Each piece of work consists of two audio clips: “About the work” provides extensive commentary on the work, and “Audio description” provides a brief description of the artwork.

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 during their visit in the “Settings” page.

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, using diagrams to explain features, such as audio stops and tracks.

A user guide nested under “Settings” explains the primary functions of the audio guide, such as entering audio stop numbers and switching between two audio types.

A representation of the visual hierarchy of work location, artist name, work name, year, and captions. — We designed a visual hierarchy that differentiates work location, artist name, work name, year, and captions.

A diagram with a set of colours and their association with the audio guide's pages and functions. — We assigned an array of colours to the audio guide's pages and features based on their properties and functions.

An overview of the M+ audio guide interface.

A bird's eye view of an iPhone on a wooden stool.

The Asian Avant-Garde Film Festival project was led by Nic Chan, with Jimmy K.K. Lam of Studio Earth, Jarijn Nijkamp, and the Digital and Editorial Content and Learning and Interpretation team at M+.