Accessibility at the MET

To improve website's accessibility of client, The Museum of Metropolitan. The project focuses on three areas: search, online collection, and ticketing & admissions. 

User Research

HTML/CSS

Website Redesign

Accessibility Practice for Web

My Role

Impacts

Final prototype was adopted by The Met's website.

Lead Designer in team of 3 

Research

Findings

Prototype

User Testing

Concept

Refinement

Next Step

RESEARCH

We conducted a multi-methodology research effort to better understand why the current website is not accessible, how to design an accessible website for people who are vision impaired, and what are the concerns we need to keep in mind. 

 

User Interview

Usern Observation

Accessibility Studies & Evaluation 

Market Research

User Interview

Since all of us are not the target user (vision impaired), we talked to people who are vision impaired and understand what are the common problems they would encounter when browsing different websites.

User Insights

  • Most people browse the website using the mobile phone
     

  • Screen readers like JAWS and VoiceOver are not user-friendly
     

  • Most users preferred to use search instead of navigating the web page using voice assistant technology
     

  • People with low vision preferred not to use voice assistant technology; instead, they would zoom in the webpages.

 

User Observation

Not only talk to people who are vision impaired and understand their problems, but also observe how they navigate the web pages by using assistive technology.

 

We observed our class instructor, Gus Chalkias who is visually impaired to navigate the metropolitan museum's website using the screen reader.

 

By giving 3 different tasks, Gus needs to purchase tickets online, find a specific artwork, and search for an event on the museum website. 

 

Accessibility Evaluation

We reviewed the web accessibility guidelines to understand the rules. Then, we used a web accessibility evaluation tool (WAVE) to evaluate the metropolitan museum's website. 

WebAim - Wave Report

Web Accessibility Guidelines

Market Research

We also conduct research on other museum's websites. Our focus was mainly on the functionality instead of the user interface.


We also evaluated each museum's website using both the Screen Reader (Apple) and JAWS (Microsoft) to test out how other museums implemented accessibility for their website. 

Research

Findings

Prototype

User Testing

Concept

Refinement

Next Step

FINDINGS

After conducting different methodology research, we realized there are many difficulties for people who are visually impaired when using voice assistant technology to browse the museum's website.

 

Below, we summarized a list of problems that we discovered on the pages of ticketing, online collection, and search. 

Online Collection

01.

There's one unlabeled button near the search.

02.

The artwork's picture should be below the artwork's title.

03.

Not all the artworks have audio descriptions.

04.

The grid system is not recognizable by using voice assistant technology

Ticketing & Admissions

01.

The required fields in the form need to be more explicit.

02.

Admission ticket type and the age bracket are unclear.

03.

Select quantity of ticket is not intuitive.

04.

Difficult to fill the entire form for payment information.

05.

Dropdown menu does ready correctly.

Search

01.

The tabular form is hard to navigate.

02.

Information architecture is not uniform in all tabs.

03.

No alternate text and audio description are attached to the artwork's images.

04.

There are two unlabelled buttons in the collection tab.

05.

The search filter is not intuitive and the extended menu is not recognizable by voice assistant technology. The tool can only recognize if the box is selected or not.

User Flow

The following diagrams are the existing user flow of online collection, search, and ticketing. 

Search

Ticketing

Online Collection

Client Insights

After a series of research and summarize our findings, we had a better understanding of what are the existing problems and the opportunities that could be improved.

 

After meeting our client, Max Drzewinski, a UX designer from the Digital Department at the MET, we were suggested in the following points: 

The existing database is pretty extensive and hard to organize
 

Audio description is not available for many collection

Since the museum was under the process of its website redesign,  they received many proposals on redesigning the website focusing on accessibility. We were also shared with their previous design mockup as our design reference. 

 

Expect Deliverable

As we talked to our client, we were expected to provide some deliverables in the following:

Wireframe: follow the museum's current visual theme
 

HTML Snippets: simple prototype to show the functionality

Research

Findings

Prototype

User Testing

Concept

Refinement

Next Step

PROTOTYPE

Our prototype process began with fixing the existing user flow based on the knowledge we had learned from our research and findings.

 

Suggested User Flow for Online Collection

Suggested User Flow for Search

Research

Prototype

Findings

User Testing

Concept

Refinement

Next Step

USER TESTING

We interviewed 7 users from Helen Keller Services to test their comfortability of navigating the museum's website with our edited user flow. By asking them what would the steps they took in order to (a) purchase the ticket online, (b) search from the museum website, and (c) browse the museum's online collection. 

 

Then, we compared the user flows that people provided and see if the steps are similar to what we designed. 

Then, we realized:
 

  • The steps should be simple and very intuitive for people who are not familiar with the technology.
     

  • Some of the layout choices really depend on different people's habits and their comfortability of using the website. 

Research

Findings

Prototype

User Testing

Concept

Refinement

Next Step

CONCEPT REFINEMENT

We interviewed 7 users from Helen Keller Services to test their comfortability of navigating the museum's website with our edited user flow.

  • Replace tabs with tags.
     

  • Move images to the right side of the artwork's description because for people who use voice assistant technology they will be able to access to the artwork's details. 
     

  • Implement image descriptions.

  • Remove image slideshow.
     

  • Place the artwork's title above the image. 
     

  • Switch the order of the information on the page.
     

  • Add audio and video descriptions for the artwork.

  • Reduce text and edit it to be more concise and clear.
     

  • The bracket of the type of tickets is more specific and consistent.
     

  •  The quantity mechanism is changed to be more recognizable by voice assistant technology.

  • The required fields are more explicit.
     

  • The additional fields are removed which are more concise
     

  • The original dropdown menus are replaced with text entry so it will be more recognizable by voice assistant technology.

Implementation

Finally, we created a functional demo of the web pages in HTML and tested it out with the screen readers.

 

Following are the videos of each of the category while using JAWS to navigate the different parts of the web page.

 

Research

Next Step

Concept

Refinement

User Testing

Prototype

Findings

NEXT STEP

User Testing

  • Test with more users with our HTML prototype
     

  • Test with a variety of people

 

Iterations

  • Iteration on better communication to the users when errors occurred.
     

  • Iteration on the payment process that can be completed by voice assistant only. 

 

Implement New Technology

  • Implement AI to help the process easier to use for people who are disabled.

 

Advice for the Client

  • Improve the load time for the home page.
     

  • Implement more multimedia descriptions for different users.

 

Let's Talk

@2019​