Home

Mailflow

Responsive Web App

Thank you for your time!

Right to Play

Accessibility Redesign

Overview

Accessibility Issues
Donation Opportunity Visibility
Donation Spend Visibility
?
?
Role
UX/UI Designer
Stakeholders
Mailflow | CareerFoundry
Project Type
Responsive Web App
Project year
2023
Tools
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

1 in 6 people live with a disability,
making up the largest minority group
Lighthouse Accessibility Score
Screenshot from https://righttoplayusa.org/en/ displaying unclear donation button

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.
Before
After
01
Contrast of main navigation menu improved, specifically for the “Donate” button.
Before
After
02
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.
03
Donation button context and CTA verbiage are clearer for donating users.
Before
After
04
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

Overview

"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."
?
?
My role
UX/UI Designer
Stakeholders
Mailflow | CareerFoundry
Project Type
Responsive Web App
Project year
2023
Tools

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

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

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
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

Lifelong (learner)

Mobile-First App

Overview

"I don't have time to make and study flashcards."
My Role
Responsive Web App
Stakeholders
Mailflow | CareerFoundry
Project type
Responsive Web App
Project year
2023
Tools

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

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
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.
02
Changed "Review" and "Play" buttons to "Review" and "Practice." I hypothesize that users will better differentiate between the actions.
Before
after
Before
after
03
I added a highlight to the appropriate section of the Nav bar to indicated to users where they are in the app
Before
after
04
Instructions were added to the initial knowledge check screens to reduce confusion.
Click through newest prototype

Reflection & Future Steps

No items found.

Other Projects

All
Mailflow
Lifelong (Learner)
Right To Play
Nurture Your Nature

Let's work together!

Enough about me. I'd love to chat about you.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Let's connect

OverviewResearchDesignEvaluation & IterationReflection & Future StepsOther Projects
Overview
Research
Design
Evaluation & Iteration
Reflection & Future Steps
Other Projects
OverviewEvaluateIdeate & DesignReflections & Future ActionsOther Projects
About
Empathize
Conceptualize
Realize
Retrospective
Other Projects