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.
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
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.
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.
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.
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.