M+ Wi-Fi User Interface

A coherent and common access point for museum visitors

M+ approached Nic Chan and Jimmy K.K Lam from Studio Earth to develop their Wi-Fi interface. The main challenge was to integrate the museum’s extensive visual identity with accessibility standards through carefully considered use of content, typefaces, and colours.

Team

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

Digital and Editorial Content at M+

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

A mock-up of the M+ Wi-Fi interface displayed on an iPhone placed on a sofa.
We adapted M+ brand assets to the Wi-Fi interface with functionality and accessibility as our fundamental standard.

M+ attracts visitors from diverse backgrounds and abilities and aspires to design user touchpoints that are inclusive and accessible. We aim to develop an interface that incorporates those standards.

The museum’s Wi-Fi network interface incorporates the typography and colour palette of the M+ visual identity guideline, created by the Amsterdam-based design collective Thonik.

In addition, the interface’s visual language parallels that of the primary M+ website, utilising typography, tri-coloured grids, and interactive elements created by designers Anton and Irene in New York.

An interface of the M+ Wi-Fi homepage.
Visitors can access the internet after selecting one of three options on the museum’s Wi-Fi network homepage.
An interface of the M+ Wi-Fi guest access page.
Guest access allows visitors to connect to the museum’s Wi-Fi network for 24 hours under applied terms and conditions.
An interface of the M+ Wi-Fi terms and conditions page.
Terms and conditions appear on a slide-in window to prevent an increase in the frequency of page transitions.
An interface of the M+ Wi-Fi loading page.
The application of the colour green, accompanied by text, icons, and animation, indicates progression on the interface.

Our selection of hues in the M+ colour palette represents the site’s phases and functions. A monotonal treatment on the sign up page will assist the visitor’s visual focus.

Pink icons indicate incorrect inputs or missing fields. A secondary menu under the language selection options allows visitors to navigate to the section of their choice conveniently.

To draw contrasts to the predominant tri-coloured interfaces, we applied a solid green background to the loading page to express a sense of progression, accompanied by text, icons, and animation.

An interface of the M+ Wi-Fi guest session ended page.
Guest access allows visitors to connect to the Wi-Fi network for 24 hours. Visitors can also sign up or log in to access the network.
An interface of the M+ Wi-Fi sign up page.
We opted for a monotonal interface for the sign up and log in forms to enhance visual clarity.
An interface of the M+ Wi-Fi sign up page with error indications on top of the email and password input fields..
Pink icons indicating input errors will appear when visitors incorrectly enter information or leave mandatory fields empty on the form.
An interface of the M+ Wi-Fi sign up page with an email registration error slide-in window.
A slide-in window with redirection guidelines will appear when visitors submit a sign up form with a pre-registered email.
An overview of the M+ Wi-Fi interfaces in their responsive format.
An overview of the M+ Wi-Fi interfaces in their responsive format.
An overview of the M+ Wi-Fi interfaces in their responsive format.

The M+ Wi-Fi User Interface project was led by Nic Chan, Jimmy K.K Lam from Studio Earth, and Jarijn Nijkamp with the Digital and Editorial Content at M+.

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

Back