Intrepid Museum Accessible Mobile Guide – Design

A series of smart phone screens shows the Intrepid Museum accessible mobile guide menu with Look Up Exhibit, Browse Exhibits by Level, exhibits on each level, and an On this Page menu for wayfinding for each exhibit which includes Fast Facts, Exhibit Description, Photos & Video, More Information, and Statistics

Intrepid Museum Accessible Mobile Guide


Summary

We designed and evaluated an inclusive mobile guide that considered accessibility throughout the entire design process. The guide allowed visitors to access information, while socially-distanced, at the Intrepid Museum in New York City.

The mobile guide is the Intrepid Museum’s most accessible resource for visitors to date. It was featured in the Museum’s Covid-19 reopening health and safety plan and was used as the primary way for visitors to access content during reopening. As of summer 2022, the guide has been accessed over 29,000 times since it launched in September 2020.

→ Go to Mobile Guide

Role

Lead accessibility designer and researcher



Motivation

Problem

The audio guide (a device used to listen to enhanced audio interpretation) was being eliminated for the Intrepid’s reopening because it did not meet Covid-19 health and safety guidelines.

Objectives

  1. Develop a mobile guide that allows visitors to read exhibit information from their smartphones, rather than crowding around signage during Covid-19
  2. Ensure that the mobile guide is accessible and inclusive to all
A visitor uses their mobile device to scan a QR code next to an exhibit sign for a Douglas A-4 Skyhawk plane.
Visitors accessed the guide, through QR codes on signage throughout the museum, to learn more about artifacts
Intrepid Museum’s Health & Safety video featuring the mobile guide

→ Go to video transcript


Design Process

  1. Over 2.5 months we built a platform from the ground up with accessibility in mind from the beginning
  2. We used WordPress (historically accessible) and adhered to WCAG 2.1 standards
  3. We then used automated testing (Accessibility Insights for Web, axe, ARC Toolkit) to flag any issues that could be fixed easily
  4. Next we ran a full manual audit with a screen reader to find any issues automated testing couldn’t (alt text quality, keyboard input, semantics and document structure, etc)
  5. Then, we evaluated the site with members of the local disability community to find usability issues neither automated nor manual testing were able to
  6. Finally, we identified the severity of each issue (Critical, Serious, Moderate, Minor) and how to remediate it, before fixing all issues in order of importance
Two pillar kiosks stand at the entrance to the Intrepid Museum's flight deck, one detailing Covid-19 safety measures, the other asking visitors to "browse our interactive guide" with a QR beneath.
Signage which invites visitors to access the mobile guide via QR code

Competitive Analysis

Museum 1

Pros

  • Access via web browser  
  • Exhibition highlights 
  • Compliant with WCAG 

Cons

  • No map
  • Few images and videos 
  • No guided tour

Museum 2

Pros

  • Planned tours 
  • Transcript/audio guide 
  • Check location on the map

Cons

  • Map is not interactive
  • Cannot freely explore
  • Few images

Museum 3

Pros

  • Interactive map 
  • Mostly image content 
  • Quiz section at the end 

Cons

  • No audio guide 
  • No video
  • No map alt text

Museum 4

Pros

  • Images, text, audio
  • Web browser access 
  • Audio transcript

Cons

  • No map
  • No video
  • No guided tour

Experience Map

Experience map of a user interacting with an inaccessible museum guide.
Timeframe Opens app with screenreader on Opens VoiceOver rotor Swipes through list of headings Quits app
Activities Wants to learn more about exhibit in front of them Skips through the headings The headings aren’t labeled properly Gives up and asks a docent instead
Touch Points Smartphone Smartphone Smartphone Smartphone
Emotion Line Content Curious Confused Frustrated
Pain Points Needs exhibit content in electronic text format to be screenreader compatible There are no clearly labeled headings There’s too much content to listen to and is too time consuming Would’ve preferred to find the info independently
Ideas for Improvement Build a mobile app that complies to WCAG 2.1 and also considers screenreader UX Ensure proper semantic markup with HTML5 Label nested headings properly so there are only a handful to listen to Provide plenty of options to access information independently

Wireframes

A wireframe of the mobile guide that has two heading level 2's that read Browse and Look Up Exhibit
Home page
A wireframe of the mobile guide that has a heading 1 as "Navigation Bridge" with a paragraph of content and a video
Exhibit content page
Wireframe animated GIF of a user clicking on the Browse exhibit by level section and the Look Up Exhibit by number section
Animation to show both ways of accessing each content page

Content Model

We developed a content model that advanced from general to specific. For accessibility, all content was written at an 8th grade reading level.

  • On This Page: Table of contents with anchor links to skip directly to headings
  • Location: Map with alt text and longer image description that provided step-by-step nonvisual directions to the exhibit
  • Fast Facts: Summarized all page content in 3-4 easy-to-read bullet points
  • Photos and Videos: Open captioned videos all under 10 minutes, and photos with captions and alt text
  • Exhibit Description: Detailed visual description (typically reserved for accessibility tours) of the entire exhibit for visitors who learn best through modalities other than sight, provided by a manager of access initiatives at the Intrepid
  • More Information: A deeper dive into exhibit information for those who want to know more
  • Statistics: Dates, capacity, and size

Usability Testing

Recruiting

We evaluated the site with three participants who identified as Blind or Low Vision and were fluent screenreader users. We recruited through our professional and local networks.

Procedure

We began by introducing ourselves and the project, providing informed consent, asked them to perform 4 tasks, and followed up with questions about their experience. We asked the participants to share their mobile screen on Zoom so we could observe their interactions, while taking notes.

Tasks

  1. Describe what you find on the guide website, and what information you think you can find
  2. Lookup a specific exhibit
  3. Browse exhibits
  4. Input an exhibit number to access content

Questions

  1. What do you think the Lookup Exhibit section does? What do you think the Browse section does?
  2. Will you explore the Lookup Exhibit section for me and explain what it does? Will you explore the Browse section for me and explain what it does?
  3. From your perspective, what went well with using the BYOD mobile guide? Will you describe any areas of the mobile guide that you had questions about? 
  4. What is one aspect of the mobile guide that you think you’d use during a visit? What is one aspect that you think you would not use?
  5. Accessibility means a website is easy to use for someone with disabilities. Did you notice any parts of the site that were confusing or difficult to use for people with disabilities?
  6. On a scale of 1-10, how likely would you use the mobile guide at the museum?
  7. This prototype has been created to minimize crowding around exhibit artifacts and signage. What are your thoughts about using people’s mobile devices as an alternative? Do you have suggestions for other strategies to help visitors socially distance while in the museum?

Findings

Blind or Low Vision users completed tasks successfully at an average rate of 92%

Blind or Low Vision users rated the mobile guide’s usefulness at an average of 9.5 on a 10-point likert scale

We uncovered a series of critical and serious issues not raised by automated or manual testing

  1. Issue: “FO’C’SLE” and “AÉROSPATIALE” are confusing for the screen reader to pronounce. Remediation: For fo’c’sle, define and explain pronunciation inline with a parenthetical. For aerospatiale, add inline HTML (lang=”fr” ) that momentarily tells the screenreader to pronounce the word in French.
  2. Issue: In WordPress, the page title is actually an H1 heading. So we had numerous H1 headings throughout. For WCAG 2.1 compliance, there should only be one H1 heading. Remediation: Change all H1 headings to H2
  3. Issue: The alt text for the Intrepid Museum maps needed more description, but in order to comply with WCAG 2.1, it still needed to be between about 150-250 characters. Remediation: We added a link below the images of the museum maps that directed the user to a longer description that included wayfinding for visitors who were Blind or Low Vision.

QR Code Signage

For social-distancing purposes, I designed signage, for multiple exhibits throughout the museum, that allows visitors to scan QR codes next to exhibits to access information on their phones.

A sign with the exhibit number, title, and call to action—to the left of a QR code—that reads “100. Intrepid: Scan the QR code or enter number above at maps.intrepidmuseum.org/exhibits to learn more.”
Signage with a QR code that opened the mobile guide
A kiosk labeled with "Lockheed A-12" and a QR code stands in front of a sleek, black jet.
The signage installed in front of the Lockheed A-12 at the Intrepid Museum