Bringing history to your hands

Date:

August 9, 2019

Role:

Lead Designer

Using Figma, an industry-leading prototyping software, I created a mobile app for The British Museum to help users with sensory limitations. By creating this app, The British Museum will be able to create a more inclusive environment for their customers and hopefully educate them in the process.

Bringing history to your hands
help circle

Problem

There is no app for The British Museum.

define icon

Hypothesis

Creating a user-friendly app that customers of the museum can use as a audio guide and database of museum will generate more traffic amongst the exhibits.

alert circle

Solution

Developing a a modern app that includes information from their website, while adding an AR component to create a more holistic approach to the audio guides.

star icon

Outcome

Users were satisfied and surprised by the AR component of the app.

The Process

Overview

Through this app, the user will be able to connect with their guided tour, or simply walk around the exhibit and select the area they’re in, and play the audio available to them so they can have a more inclusive experience. Alongside this, the user will be able to see the movable pieces through the AR software within our app; so the user can feel the museum come to life. How did this work? Using the built-in camera on their phone, the user will be able to face their camera at available objects throughout the museum, click on them, and watch them come to life. Using the AR within the app, those who have sensory limitations, such as hard of hearing or sight, will be able to open this app and have the information read aloud to them, open the description of the gallery and read it on their phone in a more accessibly font size, or even watch a video to better understand what the piece represents.

Thankfully the British Museum has most of its content accessible through its website, so the information will come relatively easy while creating the app will be more of a challenge. From their main website, I will be looking to find their most popular exhibition and focus my app scenario around it, as well as pulling the most important information from their navigation to incorporate into the app layout.

To create a better experience for the user and develop a better product, I will be using pttrns.com and mobbin.com in addition to Figma. These resources are UX/UI content resource management (CRM) database to help discover patterns to apps to help me with my research to develop the best layout possible. Using these resources, I will be able to understand my target demographic and be more efficient throughout my designs. Through Figma’s wonderful prototyping capabilities, I will be able to create a realistic experience for the user to get a sense of what capabilities are available through this app. I don’t have the time or resources to create the AR software available in the time given, but I will create a user interface resembling the program.

Research

The British Museum website

The official website for The British Museum contains copious amounts of information and I used the key information to build the base for the app, for example, the homepage, exhibitions, collections, membership information, and the map.

Current available app

  • No official app for The British Museum
  • The app is used by multiple museums
  • Not a personalized experience, making it hard to navigate the map and read text
  • Poorly executed design, creating a lack of trust in the app
  • Icons make it hard to navigate the app

Current available app

  • Not always accessible
  • You have to have a separate device to use the audio guide
  • Not user friendly
  • The text is misaligned and blocky
  • Large compared to normal-sized iPhone/Galaxy
  • Costs £7

Artificial Reality

Using Google Maps, I will be able to create an AR-like environment.

  • This feature was able to provide me with the necessary details needed to create a realistic AR

The AR feature within the app will provide the user with the ability to do the following:

  • Audio guide
  • Description / information in dynamic text
  • Video link for visual learners