PayPal Case Study

PayPal Case Study

Accessibility Capstone Project For School

By Graham Heldreth

My Roles

UX/UI Design Research Prototypes Wireframing

Content

Planning
The Problem
Research Insights
Design
The Takeaway

Tools

Figma
Figjam
Maze
Typeform

I needed to understand the problem. I researched accessibility practices, user knowledge, and the overall online payment market.

• Market Research
• Competitive Analysis
• User Interviews

I identified opportunities for improvement by examining user psychology and viability under the project’s scope.

• Affinity Map
• POV & HMW
• User Personas

Taking the research I  uncovered key trends and user preferences, guiding the creation of a first iteration and minimum viable product.

• Design Patterns 
• Idea Generation
• Wireframes

Moving from physical to digital, I created mid-fi into hi-fidelity screens. I developed useability test questions and interviewed users.

• Prototype
• Interview
• Interate

I moderated user testing scenarios, conducted five usability tests, and designed iterations based on feedback. 

• Key Takeaways
• Moving Forward
• Final Thought

Planning

Innocently, My investigation began with the question, "How do we address accessibility issues on PayPal?"

It soon became apparent that the scope required focusing and the term “accessibility” demanded clarification. Astonishingly, preliminary research revealed that visual impairment affects over 200 million people worldwide.

With a growing interest in Accessibility standards, I sought to broaden my understanding of the diverse user base and unique business challenges. As a result, I crafted a project brief, developed a hypothesis, set constraints, and outlined the project objectives.

Problem

According to Nucleus Research, companies are missing out on a potential 6.9 billion dollars in annual revenue by not offering accessible websites, highlighting the urgent need for inclusive and accessible online payment solutions.

Shockingly, most payment companies have not addressed a full range of visual accessibility features. Here was my approach:

Market Research

An investigation into P2P and C2B payment volumes and markets was conducted, I identified the competition and learned valuable knowledge about accessibility standards.

Payments

A thorough examination of PayPal's current accessibility features was undertaken, leading to the identification of specific areas that required improvement.

Competition

I did a full competitive analysis, looking for strengths, weaknesses, and current accessibility offerings.

User Interviews

Five user interviews were carried out, with the primary focus on payment pain points and participants' familiarity with accessibility standards or any challenges they encountered in that regard.

Competitive Analysis

Focusing on three main competitors: Zelle, Cash App, and Venmo.

A few high-level insights emerged:

• CashApp failed many contrast tests.

• Font sizing issues across platforms.

Different platforms target different markets and are noticeable in UI.

My biggest takeaway from the competitive analysis was that none of the companies had comprehensive accessibility features focused on the visually impaired.

Challenge

One of the biggest challenges of this project was finding participants with first-hand experience with visual impairments. 

To overcome this, I turned to users with family members who dealt with challenges seeing.

I also contacted an expert from a local association for the blind. Their insights proved invaluable in my research and helped me understand potential user challenges.

User Interviews

An initial screener survey was carried out to target users who had some familiarity with accessibility issues, which facilitated the vetting process.

Four key themes were the basis for constructing the interview questions. 

Accessibility Challenges

Helped me understand the specific challenges that people with visual impairments face.

Mobile Vs. Desktop

Understanding users' preferences for payments helped to inform the design development.

Payment Frustrations

Insight into users' payment service preferences and what features or functions they find helpful or frustrating.

Assistive Technologies

Addressed the tools and technologies users rely on to enhance their online experience.

Define

The affinity and empathy maps were consolidated to pinpoint pain points, focusing on users’ awareness of accessibility icons, features, and their engagement with assistive technology.

This approach proved valuable in creating informative personas that served as references and informed design choices throughout the project.

Affinity/Empathy Map

I utilized the affinity map to organize and group user feedback and insights, allowing patterns and themes to emerge. The empathy map allowed me to connect to the target users more deeply.

User Personas

Overall, user personas are one tool for creating user-centered designs that meet the needs of specific user groups. I referenced them during my design process, but I believe they shouldn't be the only guiding factor.

Maps

The empathy map was useful in identifying common thoughts, saying, and felling of our users. I gained a better understanding of frustrations and pain points.

• 60% of our users don’t recognize the accessibility symbol.
• Want quick access to tools and A.T.

Personas

Data from user interviews, affinity, and empathy mapping was synthesized, developing two distinct target user personas.

Research Insights

These approaches provided a holistic view of the market and user needs.

Ultimately, the research helped develop the product and design decisions with the target user in mind.

Here are the four main takeaways from my research.

Insight One

The accessibility icon isn't universally labeled. While most individuals with impairments recognize this symbol, what about the newly impaired or users that may need larger text?

Insight Three

Accessibility options are often not prominent or are a few clicks away on the website. This is counterintuitive to providing accessibility.

Insight two

By providing intuitive solutions, users know where to find key actions. This gives them confidence while making payments online.

Insight four

I looked at current market leaders' design patterns to gain insights. Reducing friction and the learning curve of our users' is often underestimated. 

How Might We....

Create a seamless and accessible online payment experience for users with disabilities or impairments?

Ideate

Various iterations of an accessibility toolbar slider, such as a sidebar design, were explored.

However, the final decision was to adopt a design consistent with PayPal’s existing language changer, which slides up from the bottom of the page.

Idea Generation

From pencil to paper, I brainstormed through mind mapping and lateral inspiration.

Low Fidelity

The design process started with low-fidelity sketches, eventually transitioning to digital wireframes. The desktop version of PayPal's home screen was recreated, and multiple iterations of an accessibility toolbar slider were developed

Design Patterns

I searched out and studied who was providing the most comprehensive accessibility features.

Design System

I developed a design and component library to utilize throughout my process. I tried to capture PayPal's current branding while making components more accessible.

Design Patterns

To my amazement, Zara.com & Lacoste had the most comprehensive accessibility toolbars I’ve ever seen.

How are these clothing brands addressing accessibility to a higher standard than payment providers?

I landed on a pattern that followed the current PayPal design. They allow users to switch languages by accessing a slide-up toolbar. 

The toolbar slider is an entirely new feature; as such, I tried to stay within the PayPal framework of the design.

Prototype

Five usability tests were carried out, involving participants with minor vision impairments as well as non-disabled users.

Prototype

Polished all hi-fidelity designs and linked up prototypes for two task flows.

Consolidate Feedback

User feedback was compiled and analyzed, with feature implementation priorities established to adhere to the project timeline.

Usability Test

I conducted moderated tests via Zoom. Users were asked to complete two different task flows. I then conducted an interview gaining valuable feedback for my iterations.

Iterate

Based on the feedback and observations, I changed two main things. I properly labeled the accessibility icon and the toolbar icons' color for more contrast.

Recreated Site

The PayPal design system isn’t publically available, so I recreated the site by eye, trying to get as pixel-perfect as possible.   

Home

Log-In

Account

Send Payment

Iteration

One

During testing, most users had never interacted with the accessibility symbol. They needed help finding the task feature, so proper labeling was iterated to reduce confusion.

Two

I failed to address the contrast of the icons after the feature was toggled. The color was switched to reflect high contrast standards in the second iteration. 

Results

Currently, PaPal Is considered one of the most accessible sites on the web; however, the WCAG standards are imperfect and may fall short in some aspects. Specifically, addressing issues related to a wider range of disabilities would make the website more inclusive for users with these conditions.

It’s important to note that while the WCAG standards are a valuable resource for designing accessible websites, they should not be viewed as a complete solution to accessibility. 

To truly create accessible and inclusive websites, designers and developers must also consider the needs of users with disabilities, test the product for usability and accessibility, and continually iterate and improve their design to ensure it meets the needs of all users.

In addition to being ethical, accessibility features can also benefit PayPal as a business.

Personal Thoughts

The discovery that most payment companies still overlook basic accessibility implementations was truly eye-opening.

Developing empathy for non-visual learners highlighted the significance of incorporating inclusivity in design, ensuring a comprehensive user experience. Focusing on inclusivity and accessibility is crucial for an enhanced user experience and offers a competitive business edge.

It became evident that testing and validating a product’s usability and accessibility is vital to the development process.

Selecting the appropriate users for such tests can be difficult, but ensuring that the final product caters to everyone’s needs is essential.

By prioritizing design and development with accessibility in mind, potential issues can be averted, resulting in a digital environment that is both accessible and inclusive for all.

Ample

Responsive

Find something interesting?

Comments or Questions? Let's Connect!

All Rights Reserved 2023 © Graham Heldreth

This website uses cookies.