Nuex - Museum of Modern Art

Client

Nuex - Museum of Modern Art.

My Role

UX / UI Lead - Designing a dedicated mobile for Nuex Museum of Modern Art from conception to product delivery.

Project Duration

December 2023 - January 2024.

Skills

User Research, User Journey Maps, Wireframing, Logo Design, Prototyping, Usability Studies, Refinement and Product Mock Ups.

Project Overview

Nuex - Museum of Modern Art is a popular gallery based in London. The dedicated mobile app improves the way patrons navigate and experience the exhibitions. The product improves accessibility and overcrowding issues, whilst providing more information to patrons on exhibits, artists and upcoming events.

This is case study project was created during a Google UX Design Academy Course.

Who is the User?

A  group of art museum patrons were asked the same list of questions to further understand their pain points when visiting and exploring the exhibition. The findings from the customer interviews lead to the creation of user personas, the personas represent a diverse range of customers and highlights common frustrations.

User Research Findings

This user group confirmed initial assumptions made. However, the research also concluded that it wasn’t just lack of information issues. There is a need for improved wayfinding and navigation throughout the art museum with emphasis on accessibility.

User Journey Map developed from user research

The Problem

Museum patrons would like more information about artists and their exhibits. Museum navigation can also be difficult due to poorly designed wayfinding systems, accessibility and overcrowding.

The Goal

To improve museum accessibility and navigation, whilst providing more information about the exhibits and crowd levels / space capacity

Identifying the User Pain Points

Insufficient Information

Insufficient information about artworks, artists, and exhibitions may leave patrons feeling disconnected and uninformed during their visit.

Limited Accessibility 

Inaccessible facilities, lack of ramps or elevators, and inadequate signage can create challenges for patrons with disabilities.

Inefficient Wayfinding

Poorly designed wayfinding signage and floor layout can make it difficult for patrons to navigate through the museum and find specific exhibits.

Overcrowded Spaces

Overcrowded galleries and exhibition spaces can lead to discomfort, difficulty in viewing artworks, and a less enjoyable experience.

Starting the Design

Now that the user, their goals and pain points are defined the design process begins!

Quick Idea Generation

Rapid sketching on paper with a focus on quantity and variety of ideas. This exercise encourages unique ideas that can provide great starting points for a potential design solution.

Wireframes - Screen Iteration

Iterations of paper wireframes were created for each screen of the app to ensure the layout addressed the users common pain points. Up to eight different screen and layout designs were drafted before a final UI was selected. The sketches below show some of the iterations sketched for the home screen design.

Initial User Flow created

The primary user flow - Map navigation and searching for an artist or exhibition.

Wireframes digitised in Figma

Refined wireframe sketches are placed into Figma for reference when creating digital wireframes. The material design 3 kit for was utilised in this design.

Small adjustments and spacing enhancements are added to better suit the desired mobile screen size (393 x 852px).

Lo-fi user flow created

Digital wireframes organised into a user flow for using the map feature to find a searched artwork.

Prototyping & usability testing

Interaction testing and exploring the map navigation feature for finding artists within the museum.

Testing the artist detail screen and the smoothness of the pop-ups and general navigation.

From here a Usability Study was conducted

Two rounds of usability studies were conducted. Findings from the first study helped improve the design usability by addressing the key pain points of users. The second study focused on refining the high-fidelity design aesthetic and optimising the user journey within the app.

Results and Findings from the usability studies

Icon Identification

Some users could not identify the navigation icons purpose (Map icon) - Icon labels will be added.

Map Level Toggling

When using the map feature users wanted to be able to toggle between levels in the museum with ease.

Downloadable Content

Users wanted to be able to download the Art information to read off the App at a later time of convenience.

Design Refinement

The results from the usability study are then implemented into the design. At this stage branding and colours are also implemented.

Logo Design & Branding

A logo was created to fit the brand identity of the art museum, whilst fitting small applications and one colour styling.

Design System and Colour Selection

A colour palette of primary, accent and neutral colours was selected and created into styles within Figma for uniformity and brand guidelines. Font families were also created into styles for the design system.

Hi-fi prototypes ready for further usability testing

Colour, branding and imagery added to the prototypes ready for users to test and experience the product without guidance.

Home Screen - Icon labels were added to the primary navigation. The usability study revealed that some users could not easily identify all of the navigation icons, therefore by adding labels the users can now read and visually identify the icons purpose. Screen sizing and styling adjustments were also implemented.
Map level toggling added - the user can now alternate between levels with ease. This design feature also notifies the user of which level they are currently on, avoiding confusion and creating a smoother user experience.

Contrast checking and Colour Styling (WGAC)

All screens and colour styles within the product adhere to AAA colour contrasting standards meaning an extremely high level of contrast has been achieved and the content should be readable for the vast majority of users.

Prototype
run-through

Home screen and map navigation screen. Patrons of the art museum can pan around the map and click on an exhibition or use the search feature to locate desired works with ease.

Searching for an artist inside the map feature to get clear directions and an accurate walking estimate.

Accessibility mode - for those who have difficulty with or are unable to use stairs. This feature re-routes the wayfinding system to avoid stairs and provides an updated time estimate for the user.

Toggle between levels of the museum using the pink expandable level selector button. When the button isn't in use it remains in an opaque state to avoid interfering with the map underneath. Each level of the museum has also been colour coded and labelled for improved usability.

Once arrived, the user can use their phone camera to scan the artwork they would like more information on. An artist detail page will then load which can also be favourited and saved for reading later.

Custom Illustration Background

Considering the product is for a modern art gallery I decided to have some fun and create a custom background graphic for the home screen that makes users remember it. The graphic is subtly animated with a changing gradient and shadows.

Accessabilty Considerations

Accessibility Menu

The map features a panel of accessibility settings which alter the navigation path to suit the users need. For example if a patron uses a wheelchair the map will update routes and avoid stairs.

Audio Guidance

All information can be played out loud or screen read. Catering for those with reading or vision disabilities. This is also helpful for able user who wish to listen to the information through headphones as they explore the museum.

Vision Impaired

I am only using two typefaces that are both sans serif fonts. This improves overall legibility of the content. The type and body colour selection also has AAA rated contrast level.

Design Impact

The new app has drastically improved the customer experience and wayfinding at Nuex - Museum of Modern Art. Museum patrons can now efficiently navigate their way around and not miss any of the exhibitions they came to see.

Artist details and information can also be saved for later saving the user even more time to roam and enjoy the museum.

Next Steps

Obtain further feedback from other UX/UI Designers, then look into how the app could be launched.

Create a version for PC and tablet that is primarily used for booking tickets to events and general information.

Throughout the design process feedback from users always adds a positive new perspective. This meant the design was further refined and constructed avoiding any biases, ultimately improving the experience and the apps success in a real-world application.

Thanks for viewing my case study!

I appreciate the time taken to look through my work. If you want to get in contact hit the 'SAY HI'  button below.