Case Study

NHM Tour Guide

Overview

The NHM Tours app is a UI Design project. Depicted tours are fictional and featured exhibits are from various different museums from all over the world.

The app presents storylines through museum exhibits and engages visitors in a new way with an educational Mission. An interactive dimension is added to museum experiences and information is presented in an interesting and captivating way.

Project Aims

• emphasis on the creation of an animated click-dummy

• a coherent extension of the exhibits (visual language and content)

• provide new dimensions to the museum experience

• promote barrier-free access by providing transcripts of all audio files

• support user-driven exploration with QR codes

Applied Skills

UX Design

Competitor analysis, user flows, understanding of storyline content, wireframing (low, mid), understanding and application of Human Interface Guidelines and Material Design Guidelines

UI Design

Wireframing (mid, high), visual design, sound and physical feedback design, gestures and interactions, prototyping animations, user testing, mockups

Competitor App Analysis

Similar apps were analyzed, with particular focus being placed on the presentation of the exhibits and the map guides for the tour stations.

Weltmuseum Wien

Exhibit screen with audio controls

Rijksmuseum

Exhibit item overview & map navigation

KHM Stories

Interactive screen with a minigame

User Flows

Low-fi Wireframes

I created the first wireframes in Balsamiq, a low-fidelity wireframing software used to create initial sketches of apps. This allowed me to roughly lay out the different elements on each screen and determine how the screens are connected.

home screen

tour overview

museum map

exhibit overview

Mid-fi Wireframes

Based on the initial low-fi wireframes I then used Adobe XD to create more detailed mid-fi wireframes where I could determine the size and spacing of elements with precision and establish a hierarchy.

home screen

tour overview

museum map

exhibit overview

Mobile Gestures

I made a concept for the mobile gestures for the main screens, which I then implemented with Adobe XDs prototyping tool once the designs of the final screens were finished.

Exhibit Page

Home (Tours)

Overview Tour

Color Design

I decided early on to create the app in dark mode, since many museums of natural history feature their exhibits in fairly dark rooms.

I conceptualized the museum colors to be a dark maroon and light peach, which are displayed during the loading screen of the app. Then there is a transition to the main color scheme of the app, made up of black, dark greys and a bright lime green to catch the user’s attention for interactive elements.

True black should not be used in UI design, as it can strain the eyes. I made an exception in this case, as museum objects are photographed/edited to appear against a true black backdrop and I wanted to integrate these seamlessly.

Logo Design

In order to bring this imaginary museum to life, I created a letter logo which would work well on a dark background and could easily be resized to serve as a permanent fixture of the top bar.

Brand Element: Dino Tracks

I created vectorbased images of dinosaur footprints in Adobe Illustrator to give the museum a bit of personality and identity. These footprints are featured in the splash screen of the app and again on the map guides.

Menu Design

I used SF Symbols for iOS and used a resizing animation and increase of contrast between the icon and the background to emphasize an active state.

I wanted the bottom menu to feel more modern and lighter than a classic bottom bar, so I made the bottom transparent, as well as the cutout of the active menu icon.

Filling Content

I incorporated five tours in the click-dummy to flesh it out.

• information and images were collected for around 10 exhibits per tour for the “tour overview” page

• the first exhibit of each tour was implemented as an “exhibit overview” page

• a rough animation of the map guide with activated location services was created for each tour

Animations

The splash screen was animated using screen transition effects in Adobe XD. It features the museum logo and dinosaur footprints walking across the screen in the official museum colors.

The screen then transitions to a black background as a brief and subtle onboarding takes place to promote user adoption. Five images representing the available five tours slide into the screen in a line, introducing the idea of being able to sidescroll to view the other elements.

In order to make a transparent animation functional in an Adobe XD prototype, I created and animated the loading circle image in Adobe Animate. I then exported it as a transparent PNG sequence and imported it to Adobe After Effects. Here I used the BodyMovin Plugin to export it as a transparent JSON file. I could now import this into Adobe XD and define it as a Lottie playback file, making it functional within my prototype.

Click-Dummy Testing

The click-dummy was used to conduct user tests. Users were asked to:

1. use the main menu to navigate the “museum map”, “scan QR” and “settings”

2. navigate through the “Becoming Human” tour and view the first object.

Based on the feedback I made the following changes:

• spacing of map titles was improved
• duplicate texts were removed
• a logo was added in the header to link back to the start page
• the button “Guide” was renamed “Map Guide”
• the tops of cards were made visible to indicate scrolling

Mockups

Depicted are the mockup screens of the “Becoming Human” tour. Corresponding screens were also designed for the “Mineral Hall”, “Fossil History”, “Mesozoic Giants” and “Prehistoric Beauty” tours.