Amex Web Accessibility

UX / UI Design

Making web and mobile sites accessible for people with disabilities and compliant with accessibility laws

Problem
American Express website was no longer compliant with new web accessibility laws implemented in 2023. All web and mobile pages must be accessible to people with disabilities. Over 2000 accessibility errors were identified within Card Shop division. To continue to operate as an enterprise, critical errors must be fixed within 3 month period, followed by a five-year plan of making all live pages accessible.
Solution
Worked with team lead UX designer to review, sort, organize and prioritize accessibility errors.
Delivered hi fidelity prototypes of final web and mobile components.
Gave recommendations to developers on implementation. 

‍

My roles

Fixed over 20 components that appear on hundreds of pages across web and mobile.

Design Roles
UX Research
UX Design
UI Design
Deliverables
Accessibility Audit Log
Solution Documentation
Notes to Developers
Visuals
Low Fidelity Mockups
Hi Fidelity Mockups
Interactive Prototypes
Documentation 
Tools
Sketch
Invision
Excel
Miro
Accessibility Documentation
Accessibility Courses

Process

User Research

15% have disability

15% of existing users and potential customers have some sort of disability

23% don't go online

23% of disables customers (existing and potential) never go online

x2 by 2060

By 2060 the number of people 65 or older is expected to double to 98 million

To come up with the solution, I first needed to know who are the users affected and how they interact with the American Express web in the existing state.

Takeaway

Inaccessible websites are failing to accommodate a growing portion of the population. Businesses are failing to deliver the best service to existing customers with disabilities and /or acquiring new ones. The number of people living with disabilities is expected to grow considerably over the coming decades which will only give rise to more guidelines, legislation, and enforcement.

Next...

Onto bigger picture of the problem - business.

Problem Research

Business and customer relations

90% inaccessible

90% of websites are inaccessible to people with disabilities who rely on assistive technology

90% has failures

98.1% of home pages had detectable WCAG 2 failures

x2 by 2060

By 2060 the number of people 65 or older is expected to double to 98 million

Legal liabilities and potential revenue and reputation loss or damages

Lawsuits

Accessibility lawsuits and litigation increased by as much as 181% in the US from 2017 to 2018

Increasing trend

In 2020, digital accessibility lawsuits rose to over 3,500 cases, that's almost ten lawsuits filed every business day in the United States

Legal Requirements

New Accessibility laws published in 2023 require companies that do business in the state of NY to come up with a five-year accessibility fix plan

To solve a problem for a user usually means to solve the problem for the business.

Takeaway

Since the majority of pages of the websites don’t comply with web content accessibility guidelines, it puts the enterprise in very high risk of lawsuits. It potentially harms the relationships with existing customers whose accessibility standards have risen, and prevents from acquiring new customers in the space, therefore preventing the flow of additional capital and business opportunities. Many of the lawsuits filed against digital properties - websites, apps, etc. - results from businesses failing to meet the most basic accessibility standards.

Next...

What can I do to solve the problem?

Identify Accessibility Bugs

Educate myself

See, understand, fix and prevent such bugs, I needed to take multiple courses on web accessibility. 

Observe

Attended multiple live usability sessions with real Amex customers with various disabilities, such as visual impairment, hearing difficulty/loss, and cognitive difficulties.

Expert Opinion

A third-party expert was appointed to identify accessibility bugs on all pages of Amex sites using automated testing. As a result, over 2000 pages that fell under my area of work were affected.

To identify the specific areas of improvement I needed to educate myself about accessibility hands on. BIG number of 2000, that is how many pages had accessibility errors within my design division.
‍

Strategize

Strategy evolution

Due to overwhelming amount of accessibility errors, fixing 2000 of them in 2 month period seemed like a task for the brave for a team of 2 UX designers. So, before diving in, we needed a strategy.
Organize

Weeded out multiple duplicates of errors

Simplify

Created master document to track progress

Team Up

Utilize shared knowledge between teams about same errors

Conquer

Assign priority to all errors and start with the "High"s

Accessibility Error Types

Taking a high level look at all the errors that were defined as HIGH priority, I can break them down into 4 types:

Color Contrast

The most common accessibility flaw and is the easiest to address. HUGE win with minimum effort.
A good example of color contrast causing an accessibility error is the below screenshot of Mobile carousel.

200% Zoom

Such zoom is often used by visually impaired users to make text larger.
Issue: When zooming in by 200% in either web or mobile browsers, text and/or imagery gets cut off. The information becomes incomplete and not accessible.
Fix:  Redesign each component to take into consideration of how elements stack and expand in 200% zoom scenarios.

320px Breakpoint

When designing for mobile web, it is important to take into consideration the 320px breakpoint.
Issue: When designing for mobile, 375px standard was used to create components and there was no documentation describing the behaviors at 320px, in some cases, causing a part of information “fall off” the screen and become inaccessible.
Fix:  Create diagrams of how the component will behave at 20px breakpoint.

Conclusion

The project was a new UX territory for me personally. I had to walk in the shoes of users having disabilities. II had to understand their pains in order for me to fix and prevent them. I also had to put the business of doing business first and address the issues that are the most impactful, threatening, or potentially harmful to the business and its existing and potential customers.

Have been working for one of the most prestigious banks in the world, I have pride in tackling issues of accessibility setting the enterprise off to the right foot of doing business in post-Covid world, where inclusivity, equality, and good UX matter.

Want to get in touch?
Drop me a line!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
BACK TO TOP
ProjectsABOUTCONTACTIN