Right to Play

Accessibility Redesign

Overview

Problem

Right To Play is a nonprofit organization with a mission to protect, educate, and empower children to rise above adversity using the power of play. Their goal is to improve the lives of 100 million children around the world by 2030.

The have identified their homepage as needing improvement. The following stand between Right To Play and their goals:

Accessibility Issues

Donation Opportunity Visibility

Donation Spend Visibility

How can I, with a focus on ethical design decision-making, optimize for donation conversion and overall accessibility of the Right To Play homepage, while preserving established branding?

Solution

This three-week project was aimed at exploring and redesigning the NGO's homepage to improve accessibility, mission and NGO action visibility, and donation conversions in an ethical manner. I conducted a redesign as an exercise in ethics and accessibility-mindedness. This redesign expanded visibility and likelihood of conversion based on an accessibility audit, persona needs, and ethically conscious design decisions.

Role

UX Designer

Stakeholders

CareerFoundry UX Design course & Right To Play

Project Type

Redesign

Project year

2023

Tools

Figma, A11Y Project Checklist, Lighthouse extension, Tarot Cards of Tech

Side note: I do not work for Right To Play and the views expressed below are my own. I do not own any of the images represented on this page. This redesign is not exhaustive and, unlike the folks at RTP, I do not have all of their working data nor justifications for their current design.

Additionally, I admire their branding and welcoming and informative website. I have enjoyed interacting with their site and mission. I wish this nonprofit bounding success in its efforts.

SKip to redesign mockup

My Process

01 Evaluate

Accessibility Audit
Donation Visibility Audit
Personas
Ethics Ideation

02 Ideate & Design

Sketch & Wireframe
Finalize Solutions

Evaluate

Accessibility Audit

The A11Y Project checklist and Lighthouse for Chrome were used to identify usability issues such as appropriate color contrast, non-descriptive links, and more.

Front-end usability issues identified:

The homepage contains a number of color contrast issues to be rectified (including that of prominent donation buttons)
Navigation elements (such as breadcrumbs) are not present when users reach a majority of pages on site

Back-end usability issues identified:

Zoom scrolling has not been enabled

1 in 6 people live with a disability,
making up the largest minority group

Lighthouse Accessibility Score

Donation Visibility Audit

A Donation likelihood assessment was conducted to evaluate the visibility of opportunities to donate as well as information related to how donation dollars are used by the organization.

Donation visibility issues:

All donation CTA buttons lack appropriate contrast to satisfy AA compliance
One prominent donation CTA button contains unclear language: "Help Them Rise"
While the mission of RTP is described in a number of ways, use of donation dollars is unclear to the user

Screenshot from https://righttoplayusa.org/en/ displaying unclear donation button

User Personas

User research was conducted to create three user personas that may interact with the Right To Play website. These personas personify the goals for improving the homepage and guide decision-making.

Cumulative Redesign Goals

Maintain Right To Play established branding

Improve overall accessibility (based on audit)

Optimize for donation conversions by improving opportunity visibility and accessibility of calls to action and button contrast (Erol's goals and accessibility audit)

Showcase use of donation dollars

(Xiang's goals)

Showcase volunteer opportunities (Ada's goals)

Ideate & Design

Sketching & Wireframing

With consideration of each persona's needs, I focused on a means of presenting relevant information front and center. I wanted to showcase calls-to-action that provide clear further actions and information scent for each goal presented.

After some sketching and brainstorming, I moved forward with a design to build a digital wireframe and further mock-up.

I chose this design as it logically featured entry points for each of my user's goals, front and center.

Finalizing the Design

The redesign of the Right To Play homepage

Preserves established branding
Simplifies information presented
Is optimized for donation conversion and accessibility
Establishes clear flows for each of my personas

Before

After

Contrast of main navigation menu improved, specifically for the “Donate” button.

Before

After

Putting RTP’s goals and how they reach for them front and center, in simpler language, will establish trust in users (and donors) faster.

Each of the persona’s needs are met, front and center, on the home page.

Donation button context and CTA verbiage are clearer for donating users.

Before

After

This section gives clear additional context around the work that RTP does. It elaborates on the word “play” to further educate users on how donation dollars are used.

Transparency = Trust

Full Redesign

Looking Forward & Back

Reflections

I greatly enjoyed getting to know this nonprofit and ideating on how I could help spread their mission via their homepage. Thinking through a lens of accessibility and designing for good was a worthwhile exercise in centering my design practice. It renewed my appreciation for resources such as the Tarot Cards of Tech and Cards for Humanity that serve as reminders and litmus tests for true success in the work we do as designers.

Further Development

While I only tackled the homepage for this case study, this website could be further developed in a number of ways with respect to the goals of this project. Here are a few:

Delightful and fun animations could be thoughtfully included to convey the playful spirit of the organization and inspire their users.

One of the largest issues contributing to the site's poor accessibility score is the user's inability to zoom in on the page. Many individuals need this feature and preventing its use creates a barrier for interested users and possible supporters. Allowing users to zoom will greatly expand the possible reach of Right To Play's mission.

The inclusion of breadcrumbs would further improve the accessibility of the site. Many pages do not give the user clues as to where they are on the site or how they got there. For example, a persistent highlight of the relevant navigation tab would serve as a helpful reminder.

Overview

Problem

The have identified their homepage as needing improvement. The following stand between Right To Play and their goals:

"I wish there was an app to track all health issues: migraines, female cycle, blood sugar, blood pressure, sleep, food/drink."

"I don't like spending too much time tracking a habit."

"All of the apps are either too basic or too overwhelming."

"Even if I track my data, I often don't understand what it means for my health."

How can I, with a focus on ethical design decision-making, optimize for donation conversion and overall accessibility of the Right To Play homepage, while preserving established branding?

Solution

My role

UX Designer

Stakeholders

CareerFoundry UX Design course & Right To Play

Project Type

Redesign

Project year

2023

Tools

Figma, A11Y Project Checklist, Lighthouse extension, Tarot Cards of Tech

Data Tracking & Logging

Nurture Your Nature can connect to any wearable or vital monitoring device that collects data while you do whatever you do.

With a fully customizable and integrated symptom logging functionality, you can keep track of every data point in one place.

All of your data is collected in one place.

Health Trends & Insights

Find out more about yourself and your health. Nurture Your Nature analyzes health data to identify trends and insights concerning your health, lifestyle, and well-being.

Health Portal Connection

Nurture Your Nature connects with existing healthcare portal accounts so you can complete health management tasks anytime, from anywhere.

Resource Library

Feel more in control of your health with Nurture Your Nature's expansive Resource Library. Having access to credible, science and research-backed health and wellness information is empowering. With curated suggestions, trending topics, and just about everything else, you'll have the answers to a lifetime's worth of questions at your fingertips!

Jump to Prototype

My Approach

01 Research

Competitive Analysis
User Surveys
User Interviews
Personas

02 Design

Ideation
User Flows
Information Architecture
Sketches & Wireframes

03 Evaluation & Iteration

Considerations
   Usability Testing
   Preference Testing
   Gestalt & Design Principles
   Peer & Mentor Feedback
   Accessibility Audit
Refinement
Design Library

Research

Accessibility Audit

The A11Y Project checklist and Lighthouse for Chrome were used to identify usability issues such as appropriate color contrast, non-descriptive links, and more.

Front-end usability issues identified:

The homepage contains a number of color contrast issues to be rectified (including that of prominent donation buttons)
Navigation elements (such as breadcrumbs) are not present when users reach a majority of pages on site

Back-end usability issues identified:

Zoom scrolling has not been enabled

Novant MyChart Portal app & website

Headspace app & website

Calm app & website

Apple Health native app

> Findings

Apps similar to Headspace and Calm offer a wide array of guided activities and educational materials but they are segmented in focus and lack a holistic health perspective

Apps and websites like Novant MyChart portal are great for conveniently completing healthcare-related tasks but they are unintuitive and have confusing Information Architecture and UI

Apps like Apple Health are more holistic and connect with a variety of other platforms. However, they are not integrated with healthcare portals and do not offer a full library of health resources

Full Competitive, SWOT & UX Analysis

Donation Visibility Audit

A Donation likelihood assessment was conducted to evaluate the visibility of opportunities to donate as well as information related to how donation dollars are used by the organization.

Donation visibility issues:

All donation CTA buttons lack appropriate contrast to satisfy AA compliance
One prominent donation CTA button contains unclear language: "Help Them Rise"
While the mission of RTP is described in a number of ways, use of donation dollars is unclear to the user

Surveys

First, I surveyed 28 users to quickly gather basic information about my user group and their main goals.

> Key Takeaways

Apps, websites, and devices are used to track and better understand health and fitness data every day.

Apps and websites are used to complete medical care-related tasks every day. Users want and need these programs. However, they are left wanting more functionality, compatibility, customizability, and better experiences when using health and wellness programs.

Have you been diagnosed with a condition that is benefitted by tracking or understanding your wellness data?

All Survey Responses

Interviews

Next, I wanted to spend more time understanding my users' motivations, thoughts, feelings, and behaviors concerning managing their health and wellness. I conducted three interviews with adults with varying health and wellness-related goals. With the insights gained from survey and interview responses, I created multiple affinity maps to identify themes in the data.

> Key Takeaways

Each user is an individual with unique health goals, health conditions, wellness path, etc. My solution should be customizable to the user, not the other way around.

Reliable health and wellness information empowers users, helps them make educated decisions and goals, and allows them to feel more in-control of their lives. A vast and comprehensive library of research-backed resources will be invaluable to users of all kinds.

affinity map made of sticky notes on a wall

Interview script, questions, & analysis

User Personas

User research was conducted to create three user personas that may interact with the Right To Play website. These personas personify the goals for improving the homepage and guide decision-making.

Molly's full persona

David's full persona

Design

Core Functionalities

Tracking and logging - Seamlessly connect to existing wearables and accounts for automatic tracking. Allow users to log any other symptoms or health data

Resource Library - Vast library of resources to answer users' health and wellness questions

Healthcare portal - Connect with existing portal accounts to complete health management tasks from anywhere

Trends & Insights - Automatically generate trends and insights to help users understand their health data

Information Architecture

To inform and validate sitemap decisions, I conducted an open card sort of 20 possible content and page types that could appear in Nurture Your Nature. Five participants proposed 3-6 categories, revealing commonly held mental models from which I built the app's sitemap.

The app's sitemap was then used to create user flows based on persona needs and goals.

> Key Takeaways

As expected, clear categories emerged: Healthcare Management, Data, Calendar/Tasks, Resources/Help

Medical actions (appointments, medications, care plans, care team, etc.) should be placed in a sub-category

"Test Results" was updated to "Results" to be more intuitively encompassing of possible data (labs, diagnostics, x-rays, etc.)

My intention of making the application highly interconnected was validated

Card sort results & sitemap evolution

Common User Flows

Molly's Main Flow:
Track & Log Health Data

David's Main Flow:
Search for Resources

All user flows & journeys

Sketching & Wireframing

With the Information Architecture in mind, I began brainstorming possible screen solutions. My solutions focused on consolidating my ideas and data with usability heuristics and common patterns.

Common Flow Wireframes

Molly's Main Flow:
Track & Log Health Data

David's Main Flow:
Search for Resources

Evaluation & Iteration

Usability Testing

Six in-person and remote, moderated user testing sessions were conducted to test the usability of commonly-used flows, using my mid-fidelity, clickable prototype. A number of invaluable insights were gathered in this round of testing. Participants tended to understand the overall purpose of the app and were excited about the functionality, however, many struggled to complete requested tasks. Search, logging, and snapshot (data saving) flows all needed to change to improve user experience.

Mid-Fi prototype used for testing

> Key Improvements

Touchpoints needed to be increased throughout the application

Flow for sending information to healthcare providers needed clarity

Data and Snapshot areas needed to be better defined

Automatically tracked data needed to be easier to find

Usability test results (Rainbow sheet)

Preference Testing

The aesthetic theme of the platform was determined by a preference test which compared screens featuring illustrated people and images of real people. I wanted to test whether "promise land" imagery of smiley people (shown to build trust) or metaphoric illustrations of app features and benefits would resonate more strongly with users. All 10 participants preferred the metaphoric illustrations to the images of real people.

"It appeared to be less intimidating and easier to access for a non-computer individual."

"It draws my eyes more."

"The illustrations demonstrate onboarding messages presented in a better way."

Full Usability & Preference Testing report

Peer & Mentor Feedback

My peers and tutor took a look at my prototype to find design inconsistencies, usability issues, and any holes in task flows. Most comments and suggestions were incorporated. Others were thoughtfully considered and rejected based upon heuristics, material design standards, and established app examples.

See implemented comments on this symptom logging flow:

All design & feedback considerations
(& Design System Language)

Accessibility Audit

Designing any platform without accessibility in mind does an injustice to both the design and its user base. Nurture Your Nature is intended to be an application for the purpose of empowering ALL possible users to better track and understand their health and wellness. To increase the likelihood of wider user-base adoption, my design was iterated with consideration for users with a variety of impairments.

> Key Improvements

Contrast needed to be improved for text throughout the application for user with colorblindness and other visual impairments.

Input field instructions needed to be placed ahead/above their fields for users that use screen readers.

Instructions needed to be added throughout the app as some users encounter friction when deducing purpose from visual cues.

Alternate and additional content types were needed for users with varying needs and preferences.

Alt text needed to be added for users that use screen readers.

all accessibility improvements

High-Fidelity Common Flows

Molly's Main Flow:
Track & Log Health Data

David's Main Flow:
Search for Resources

Latest Prototype

Here is my latest prototype, including all of the considerations listed above. Further changes based on user and peer feedback will be posted as they arise.

Nurture Your Nature Prototype

Reflection & Future Steps

Reflections

Further Development

While I only tackled the homepage for this case study, this website could be further developed in a number of ways with respect to the goals of this project. Here are a few:

Delightful and fun animations could be thoughtfully included to convey the playful spirit of the organization and inspire their users.

Lifelong (learner)

Mobile-First App

Overview

Problem

The have identified their homepage as needing improvement. The following stand between Right To Play and their goals:

"I don't have time to make and study flashcards."

How can I, with a focus on ethical design decision-making, optimize for donation conversion and overall accessibility of the Right To Play homepage, while preserving established branding?

Solution

My Role

Redesign

Stakeholders

CareerFoundry UX Design course & Right To Play

Project type

Redesign

Project year

2023

Tools

Figma, A11Y Project Checklist, Lighthouse extension, Tarot Cards of Tech

New vocabulary from Lifelong

Want to learn new vocabulary that actually interests you? Lifelong has you covered.

Lifelong will present the user with new vocabulary based on their indicated areas of interest or general topics. Narrow or broad, Lifelong is the place to learn.

Creating new vocabulary lists

Create new vocabulary lists and start studying faster than ever before.

With the ability to link each list to a definition source, users can add new terms to their app quickly and seamlessly. By adding or linking each term's synonyms, antonyms, part of speech, an image and more context, Lifelong appeals to the preferences of all learning styles.

Vocabulary review on the go

On the go or winding down, repetitive retention practice is only a few taps away.

Triggered by push notification reminders or an idle moment, users can quickly and easily select a list to practice.

Skip to prototype

My approach

01 Research

Competitive analysis
User interviews
Empathy mapping
Proto-persona

02 Design

Ideation
User flows
Sketching
Wireframing

03 Evaluation & Iteration

Usability Testing
Design Iterations

Research

Accessibility Audit

The A11Y Project checklist and Lighthouse for Chrome were used to identify usability issues such as appropriate color contrast, non-descriptive links, and more.

Front-end usability issues identified:

The homepage contains a number of color contrast issues to be rectified (including that of prominent donation buttons)
Navigation elements (such as breadcrumbs) are not present when users reach a majority of pages on site

Back-end usability issues identified:

Zoom scrolling has not been enabled

Vocabulary Builder is colorful and appealing to many audiences but lacks depth.

Vocabulary offers sophistication and encourages engagement but does not offer retention practice.

Galvanize appeals to various learning styles by providing multiple points of context.

SEE FULL SWOT ANALYSIS

Donation Visibility Audit

A Donation likelihood assessment was conducted to evaluate the visibility of opportunities to donate as well as information related to how donation dollars are used by the organization.

Donation visibility issues:

All donation CTA buttons lack appropriate contrast to satisfy AA compliance
One prominent donation CTA button contains unclear language: "Help Them Rise"
While the mission of RTP is described in a number of ways, use of donation dollars is unclear to the user

Interview script, notes, & summary

User Personas

User research was conducted to create three user personas that may interact with the Right To Play website. These personas personify the goals for improving the homepage and guide decision-making.

See full persona

Design

New vocabulary from Lifelong

Lifelong will present new vocabulary to users based on their preferences. These terms can be saved to a list for later practice.

Add terms to Lifelong

Users can create vocabulary lists and add terms faster than ever. With Lifelong's Definition Source function, definitions and term context can be added in a flash.

Practice vocabulary lists

Users can practice their vocabulary term lists anywhere and anytime from their smart phone. With the addition of term context (synonyms, antonyms, pronunciation, use in a sentence, etc.), Lifelong is a great fit for every learning preference.

Creating new vocabulary list

Whether they encounter new terms via their professional or personal endeavors, users need a way to create a list of terms to study.

Additionally, this function would be able to connect to a definition source (dictionary, published text, etc.) to enable fast and simplified list creation.

Vocabulary list practice

Users need the ability to practice their lists of terms using repetition and memory-based exercises. They should also be presented with the results of their practice to better understand their retention.

Users should also be able to indicate their level of knowledge for each term. This will ensure that they are only presented terms that require practice.

Sketching & Wireframing

Using the task flows, I sketched various forms these functionalities could take. I began with paper and pen to keep the operation quick, general, and imaginative. From there, I used the Marvel platform to create a clickable, low-fidelity prototype to present to users.

First clickable prototype

Evaluation & Iteration

See full script, process details, & results

"I can't create an account."

"I don't understand the difference between the Play and Review buttons."

"These icons are confusing. Is that a winter hat?"

01

Solidified and connected a proper sign up and log in flow.

Changed "Review" and "Play" buttons to "Review" and "Practice." I hypothesize that users will better differentiate between the actions.

Before

after

Before

after

I added a highlight to the appropriate section of the Nav bar to indicated to users where they are in the app

Before

after

Instructions were added to the initial knowledge check screens to reduce confusion.

Click through newest prototype

Reflection & Future Steps

Reflections

Further Development

While I only tackled the homepage for this case study, this website could be further developed in a number of ways with respect to the goals of this project. Here are a few:

Delightful and fun animations could be thoughtfully included to convey the playful spirit of the organization and inspire their users.

No items found.

Right To Play

Redesign

Right to Play

Accessibility Redesign

Overview

Problem

Solution

My Process

01

Evaluate

02

Ideate & Design

Evaluate

Accessibility Audit

Donation Visibility Audit

User Personas

Cumulative Redesign Goals

Ideate & Design

Sketching & Wireframing

Finalizing the Design

Looking Forward & Back

Reflections

Further Development

Overview

Problem

Solution

Data Tracking & Logging

Health Trends & Insights

Health Portal Connection

Resource Library

My Approach

01

Research

02

Design

03

Evaluation & Iteration

Research

Accessibility Audit

> Findings

Donation Visibility Audit

Surveys

> Key Takeaways

Interviews

> Key Takeaways

User Personas

Design

Core Functionalities

Information Architecture

> Key Takeaways

Common User Flows

Molly's Main Flow: Track & Log Health Data

David's Main Flow: Search for Resources

Sketching & Wireframing

Common Flow Wireframes

Molly's Main Flow: Track & Log Health Data

David's Main Flow: Search for Resources

Evaluation & Iteration

Usability Testing

> Key Improvements

Preference Testing

Peer & Mentor Feedback

Accessibility Audit

> Key Improvements

High-Fidelity Common Flows

Molly's Main Flow: Track & Log Health Data

David's Main Flow: Search for Resources

Latest Prototype

Reflection & Future Steps

Reflections

Further Development

Lifelong (learner)

Mobile-First App

Overview

Problem

Solution

New vocabulary from Lifelong

Creating new vocabulary lists

Vocabulary review on the go

My approach

Molly's Main Flow:
Track & Log Health Data

David's Main Flow:
Search for Resources

Molly's Main Flow:
Track & Log Health Data

David's Main Flow:
Search for Resources

Molly's Main Flow:
Track & Log Health Data

David's Main Flow:
Search for Resources