MyShake app is a global citizen science project at UC Berkeley bringing users together to build a global seismic network. The app provides early warning alerts (currently only in California and Oregon, US), allows users to report earthquake experiences, educates about earthquake safety, informs users about earthquakes and monitors for them using data from the phone’s sensors.

SO WHAT IS ACCESSIBLE DESIGN?

According to W3.org, Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can perceive, understand, navigate, interact with and contribute to the Web. Web accessibility encompasses all disabilities that affect access to the Web, including: auditory, cognitive, neurological, physical, speech, and visual. However, it is important to note, this also benefits people without disabilities, for example: people using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.; older people with changing abilities due to ageing; people with “temporary disabilities” such as a broken arm or lost glasses; people with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio; and people using a slow Internet connection, or who have limited or expensive bandwidth.

It goes without saying, accessibility is a crucial piece in the design and development process that greatly benefits the business and user, here are some examples:

THE FOUR GUIDELINES OF ACCESSIBILITY & Level of Compliance (via WCAG)

According to Web Content Accessibility Guidelines (WCAG) 2.1, these are the four guidelines and compliance level that must be passed in order to be accessible:

1. Perceivable: “Are there multiple options on how a user can consume information? Example: Closed Captions in videos.

2. Operable: “Are the UI components and navigation operable?” Example: All functionality is available from a keyboard.

3. Understandable: “Are users able to understand the app’s functions?” Example: Easy to understand copy.

4. Robust: Are users able to use current and future user agents including assistive technologies for the app? Example: Screen reader compatible.

overall IMPACT

• After Phase 1 release of accessibility update, the number of downloads on iOS and Android devices increased by 320% and 660%, respectively

• MyShake passes with a AA level of conformance in the success criteria based on WCAG 2.1 guidelines

• Positive feedback from Stakeholders, CalOES Access and Functional Needs team, UC Berkeley Web Access Analyst and end users

• This accessibility work had a big influence on streamlining the app via the redesign of two main pages in the app

Design & development outcomes

Before we dive deeper into the process, here is a high level view of the four outcomes based on the four principles of accessibility via WCAG 2.1:

1. Accessible Colors and Fonts for brand, magnitude, buttons, other UI elements

   • Perceivable, Understandable. Catering to the Visually Impaired community (like low-vision and colorblindness)

2. Alt text for images/non-text content and labeling buttons, hierarchy of headings appropriately and in order (applicable for VoiceOver, TalkBack and other mobile Screen Readers)

   • Operable, Robust. Catering to the Blind/Visually Impaired community

3. Vibration for Alert sound

   • Perceivable, Robust. Catering to the Deaf/Hard of Hearing community

4. Descriptive UX copy for CTA buttons and links

   • Perceivable, Understandable. Catering to the Blind/Visually Impaired community and all users

let’s look at studies

• World Health Organization estimates that globally 1.3 billion people live with some form of vision impairment.

• There are over 56 million people in the United States (nearly 1 in 5) and over 1 billion people worldwide who have a disability.

• In 2017, there were 814 website accessibility lawsuits filed in federal and state courts.

• Over 71.8% (1,227) users from this study use a mobile screen reader (see chart on the right).

User Interviews & Findings

I had the pleasure of collaborating with two Accessibility Specialists:

• Lucy, Head of Web Accessibility at UC Berkeley

• Virginia, Emergency Manager and Access & Functional Needs (AFN) Coordinator at CalOES (California Governor’s Office of Emergency Services)

Lucy, blind herself, has tested the app (iOS and Android) on numerous occasions and has provided many observations and recommendations on accessibility updates for each page. On CalOES side, Virginia’s team provided a tool called Colour Contrast Analyzer to help us with best practices when it came to color contrast, and fonts; Virginia also used screen reader to test our app on multiple occasions and provided helpful feedback.

Findings from Apple App Store reviews

User Persona

Majority of the MyShake app users make up the Primary persona but an untapped persona, which we call the Secondary persona, was discovered during the research phase and influenced the rest of the project.

Scope

The project required multiple phases to fulfill accessibility needs as other projects needed to be prioritized around the same time. Below is a breakdown of the process in each phase:

Phase 1 (Nov 2019 - Jun 2020)

• Label all buttons, text and UI elements

• Label all content to be read out in the intended order according to visual hierarchy

• Adding Alt-text for all images/non-text content

• Change Primary and Secondary colors

• Increase font size

• Break down lengthy paragraphs in Experience Report to be more bite-sized and digestible

Phase 2 (Dec 2020 - Apr 2021)

• Change Magnitude scale colors

• Add descriptive copy in buttons to provide better UX

• Add more accessibility focused images in the Safety page and include Alt-text for those images

• Answer accessibility questions in the Help/FAQ page

WIREFRAMES

Each section will provide a look at the screen before and after the accessibility changes. Also, all the wireframes below have three consistent changes like: Correct labeling in order of visual hierarchy, new text size, and new Primary and Secondary colors.

Please note: A redesign of these pages were happening concurrently so changes not fully related to accessibility will be shown.

Home/recent PAGE

Changes in regards to Accessibility:

• New placement for the LIST button

• Drop shadow for Search bar and CTA buttons

• New Legend button

• Magnitude colors on map

• New colors for menu UI elements

Legend & Filter page

Changes in regards to Accessibility:

• Magnitude colors

• Cancel button for Filters page

• Back button (in place of the drop down chevron icon)

LIST View PAGE

Changes in regards to Accessibility:

• Back button with removal of the MAP text button (originally used as a back button to go back to Map view)

• Filters button (to house all filtering and sorting needs)

Experience Report Page

Changes in regards to Accessibility:

• New Search bar with labeled form field and enabled speech diction within keyboard

Notifications page

Changes in regards to Accessibility:

• New placement for the EDIT button

• UI element color

• Descriptive copy for New Location button

• [For Android] New placement and descriptive copy for the New Location button (removing the original Material Design floating button)

• Integrated vibration with the Alert sound (in the event of an earthquake early warning)

• Easy and accessible user flow for deleting/editing notifications (previously a swiping feature with chevron buttons to edit futher)

Safety page

Changes in regards to Accessibility:

• Descriptive copy for links

• More Accessibility-focused images

• Alt-text for all Safety images

Iterations

With accessibility, only a few iterations are possible since the WCAG has a set framework to follow when it comes to design and development. However, the new colors were selected through tools like Colour Contrast Analyzer, Accessible Color Palette Builder on GitHub and Tanaguru Contrast Finder, kept within the UC Berkeley Brand Guidelines and tested internally within the MyShake team.

Through internal testing and selecting high contrast and color-blind friendly colors, we decided to pick Version 2 because the colors stayed more on brand with our original MyShake magnitude colors and the UC Berkeley brand colors.

The overall color style guide was updated with the new accessible colors, with some still in progress:

Next Steps

Phase 3 (May 2021 - current)

• Integrate flashing lights with the Alert sound (in the event of an earthquake early warning) ~in progress

• Change colors for Hazard scale, and PAGER alert, and Sensor axes ~in progress

• Work on other pages such as the Help, My Log and Sensor

• Include the newly accessible colors, fonts, and other elements into the new Design System

Reflection

Working on accessibility was the most tedious yet rewarding work I have done so far at MyShake. Below are some of my thoughts from the time I’ve spent working on accessible design:

• Accessibility is not a project, it’s a lifestyle, a culture, and involves continuous work

• Creating value for accessibility as a Designer is crucial

• Finding users who are differently-abled require more work

• Collaborating often with the Front-End Developer will bring a deeper understanding about coding complexities and solutions

• Learning how to use screen reader tools like VoiceOver, TalkBack and more as a Designer is a superpower

• Working in phases starting with high-priority items will ensure a seamless process

• Documenting every feedback, observation and changes made in every version, in chronological order, will help with tracking progress and releasing in time