M+ Wi-Fi Interface

A coherent and common access point for museum visitors

M+ engaged Nic Chan to develop their Wi-Fi interface, and Studio Earth to collaborate on its UXUI design. The main challenge was integrating M+’s extensive visual identity with accessibility standards through thoughtful use of content, typefaces, and colours.

Team

Nic Chan on development, Jarijn Nijkamp on project management, and Studio Earth on user experience and interface design

Digital and Editorial Content at M+

Alexis Yip, Catherine Erneux, Kingsley Man, Nicholas Leung, William Smith

The M+ Audio Guide start up interface on an iPhone 14 Pro's screen.
Studio Earth adapted M+ brand assets to the Wi-Fi interface with functionality and accessibility as the fundamental approach.

M+ is Asia’s first — and one of the world’s largest — global museum of contemporary visual culture, developed as a vibrant platform for experimentation, creation, collaboration and inspiration to buttress Hong Kong’s arts and cultural landscape.

M+ attracts visitors from diverse backgrounds and with various abilities, and aspires for user touchpoints to be designed for inclusivity and accessibility. The Wi-Fi experience is no exception.

The interface for the museum’s Wi-Fi network incorporates the typography and colour palette of the M+ branding, created by the design agency Thonik.

The visual language of the landing page parallels that of M+’s website, utilising the typographic grids, tri-coloured grids and interactive elements created by designers Anton and Irene.

An interface of the M+ Wi-Fi sign-up page with multiple input fields and a sign-up button.
A monotonal interface displays the sign-up sheet with visual clarity and focus.
An interface of the M+ Wi-Fi sign-up page with an error notification appears at the bottom of the screen.
Error notifications will suggest alternative paths for visitors to connect to the M+ Wi-Fi network.
An interface of the M+ Wi-Fi log-in page with multiple input fields and a log-in button.
A fixed menu at the top of the screen indicates the two primary access points, allowing visitors to toggle between their options.
An interface of the M+ Wi-Fi reset password page with a two-step instruction guide.
The reset password page encourages visitors to take a two-step method to regain access to the Wi-Fi network with their account.
An interface of the M+ Wi-Fi loading page with texts and a Wi-Fi icon on top of a green background.
The application of the colour green, accompanied by text, icons, and animation, indicates progression for visitors.

Various hues in the M+ colour palette were assigned to different functions and stages in the Wi-Fi registration process. To start, the sign-up page was stripped to a monotonal interface, drawing immediate attention to distinguish itself amongst M+ touchpoints. We moved away from the vibrant M+ colours as to not distract the visitor’s visual focus.

Other colours were strategically employed for user interface. Pink icons indicate missing fields or incorrect inputs, while a black menu at the top of the screen enables users to easily navigate to the page of their choice.

The loading page was rendered green for its significant contrast to the colourful landing page. The colour was also used in icons and animations for users to progress forward.

Two interfaces of the M+ Wi-Fi notification page. The interface at the top indicates that the guest session has ended. The interface at the bottom encourages guests to get online again. Both interfaces feature a sign-up and log-in option.
Two distinctive interfaces of the M+ Wi-Fi notification page. The interface at the top indicates that guests could enjoy thirty minutes of free Wi-Fi. The interface at the bottom features a pop-up window with terms and conditions text.
Studio Earth strictly fulfilled a 4.5:1 standard for the colour contrast between texts and background colours.

Accessibility is fundamental to our approach, and it guides our decisions on colour, typeface, and content. The ultimate goal of our designs is not only for aesthetically captivating colour usage and contrasts, but also for presenting content that may be accessed by users of all seeing abilities.

We strictly adhere to the 4.5:1 ratio, the industry standard for the measure of the contrast between the foreground, such as text and images, and the background.

We also take into account visual abilities when designing the typography system, such as by designating different text sizes for the title, subheadings and the body to help users navigate and process information more effectively.

Finally, we aim to create a clear, concise and direct pathway to connect our uses to the correct network option. The clarity and simplicity of the instructions aim to communicate most effectively with users of varying age groups, technical literacy and linguistic abilities.

The Wi-Fi landing page, sign-up page, and error page in their mobile format are featured side by side.
The Wi-Fi interface is accessible on various devices, such as smartphones and tablets.
The Wi-Fi log-in page, sign-up page, reset password page, and the loading page in their mobile format are featured side by side.
Three Wi-Fi notification pages in their mobile format are featured side by side.
The M+ Wi-Fi start up interface on an iPad screen.

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

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

Back