Intrepid Museum Inclusive Mobile Guide – Accessibility

Intrepid Museum Inclusive Mobile Guide

Idea

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

Role

Lead accessibility designer, ux researcher, ux designer, project manager

Prototype

Mobile guide on the iPhone with a navigation menu that reads "Intrepid Museum: Interactive guide, Exhibits, FAQ's, Health and Safety Information" with a header beneath that says "Exhibits"
Mobile guide on the iPhone with Intrepid Logo at the top, a heading 1 that reads "Exhibits", a heading 2 that reads "Look up exhibit" with a form input that asks for an exhibit number and a submit button
Mobile guide on the iPhone with a heading 2 that reads "Browse Exhibits by Level" with a list of link that reads "Flight Deck, Gallery Deck, Hangar Deck, Third Deck, and Pier 86"
Mobile guide on the iPhone with a heading 1 that reads "Pier 86" and a heading 2 that says "Exhibits" with a list of exhibits beneath: "100. Intrepid, 105. Submarine Growler, 110. British Aerospace/Aerospatale Concorde, and a "Back to Levels" button
Mobile guide on the iPhone with a heading 1 that reads "100. USS Intrepid", a heading 2 that reads "On this Page" with a table of contents list: Level, Fast Facts, Exhibit Description, Photos & Videos, More Information, Statistics
Mobile guide on the iPhone with a heading 2 that reads "Level: Pier 86", a photo of a map with a link that goes to a longer image description, and a heading 2 that reads "Fast Facts" with 3 bulleted facts beneath

Go to video transcript

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.

Challenge

The Intrepid Museum came to us with two 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.

Approach

  • Over 2.5 months we built a platform from the ground up with accessibility in mind from the beginning.
  • We used WordPress (historically accessible) and adhered to WCAG 2.1 standards.
  • We then used automated testing (Accessibility Insights for Web, axe, ARC Toolkit) to flag any issues that could be fixed easily.
  • 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).
  • Then, we evaluated the site with members of the local disability community to find usability issues neither automated nor manual testing were able to.
  • 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.

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
A wireframe of the mobile guide that has a heading 1 as "Navigation Bridge" with a paragraph of content and a video
Wireframe animated GIF of a user clicking on the Browse exhibit by level section and the Look Up Exhibit by number section

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

Our team lives by the rule: test early and often, so we tested as soon as we had a working prototype of the mobile guide. 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. 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.

Testing Script

Welcome (5 min)

Hi, my name is Lauren Race and this is Cathy Xu and we’re going to be showing you some things we’ve been working on. We are designing a Bring Your Own Device (BYOD) mobile guide for Intrepid Museum visitors to access exhibit content and socially distance without crowding around signage. We are interested in understanding the usability and accessibility of our mobile guide prototype. While looking at the prototype, please remember there aren’t any “right” or “wrong” answers. We are interested in understanding what the guide does well, and where it could be improved. Your feedback will help us improve accessibility and usability for Intrepid visitors. 

Informed Consent (3 min)

Is it okay if we video record? If so, please email me with “I agree to be video recorded”.  These recordings will be used only to help us figure out how to improve the guide and won’t be heard by anyone but the design team. Do you have any other questions before we get started?

Introduction (5 min)

  1. Tell me about any experience you have using a mobile guide…
    1. What went well for you using mobile guides?
    2. What didn’t go well for you using mobile guides?

BYOD Guide Tasks (30 min)

We will ask you to perform 4 tasks on the mobile guide and to think out loud as you go. Please describe what you are experiencing and what you are thinking as you complete the task.

Task 1: Describe what you find on the guide website, and what information you think you can find

  1. What do you think the Lookup Exhibit section does?
  2. What do you think the Browse section does?
  3. Will you explore the Lookup Exhibit  section for me and explain what it does?
  4. Will you explore the Browse section for me and explain what it does?

Let’s pretend New York City is in Phase 4 of its reopening plan and you just got to the Intrepid Museum. The ticketing counter gives you a URL (Web address) to enter in your mobile device that acts as a digital museum guide. Go to the link provided and have a look at the guide on your phone. The following 3 tasks describe different ways of accessing content for the first exhibit you decide to go visit.

Task 2: Lookup a Specific Exhibit

  1. From the ticketing counter, first you decide to go visit the Enterprise.
  2. Use the mobile guide to find the exhibit description of the Enterprise.

Task 3: Browse Exhibits

  1. From the ticketing counter, you’re not really sure what to see first nor are you sure what exhibits the Intrepid hast. 
  2. Browse through the available exhibits, choose the “Officer Berthing” and read the introduction. What did you think about the length of the Intro?

Task 4: Input an Exhibit Number to Access Content

  1. From the ticketing counter, you visit the Concorde first. Once you’re there, you ask a museum guide nearby for more information about it. They inform you that you can enter the exhibit number on your mobile guide and it’s 110 for the Concorde.
  2. Use the mobile guide to enter in the exhibition number for the Concorde and listen to one of the descriptions of the images.

Wrap Up Questions (15 min)

  1. From your perspective, what went well with using the BYOD mobile guide?
  2. Will you describe any areas of the mobile guide that you had questions about? 
  3. What is one aspect of the mobile guide that you think you’d use during a visit?
    1. What is one aspect that you think you would not use?
  4. Usability means a website is easy to use. 
    1. Did you notice any parts of the site that were confusing or difficult to use?
  5. Accessibility means a website is easy to use for someone with disabilities. 
    1. 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. 
    1. What are your thoughts about using people’s mobile devices as an alternative?
    2. Do you have suggestions for other strategies to help visitors socially distance while in the museum?

Thank You (2 min)

Thank you so much for helping us out today. This has been a great help to improve the Intrepid BYOD mobile guide and we are so thankful for your time. Is there anything else you’d like to add or ask questions about? 

What We Learned

All users who were Blind or Low Vision rated the mobile guide high on a scale of 1-10 and were able to complete most tasks successfully. We recognize that these numbers will change as we expand our sample size.

  • Average Mobile Guide Usefulness (Scale of 1-10): 9.5
  • Average Rate of Tasks Completed Successfully: 91.67%

We flagged a series of unexpected 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 pronounceFix: 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. Fix: 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.Fix: 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.

WCAG 2.1 Success Criteria

  1. Perceivable
    1. Provided alt text and longer image descriptions, and open captions on videos: Level A
    2. Created video transcripts for time-based media that can be accessed by a screenreader: Level A
    3. Made it easier for users to see and hear content including separating foreground from background: Level AAA
  2. Operable
    1. Made all functionality available from a keyboard: Level A
    2. Provided users enough time to read and use content: Level A
    3. Did not design content in a way that is known to cause seizures: Level AAA
    4. Provided ways to help users navigate, find content, and determine where they are: Level AA
    5. Made it easier for users to operate functionality through various inputs beyond keyboard: Level A
  3. Understandable
    1. Made text content readable and understandable: Level AAA
    2. Made pages appear/operate in predictable ways: Level AA
    3. Helped users avoid and correct mistakes: Level AA
  4. Robust
    1. Maximized compatibility with current and future user agents, including assistive technologies: Level A

QR Code Signage

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

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.
A kiosk labeled with "Lockheed A-12" and a QR code stands in front of a sleek, black jet.
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.”
Scroll to top