.png){kind=small}
YogaRelief Case Study
Project Overview
YogaRelief is an app that suggests short, targeted therapeutic relief sequences based on the user’s individual pain patterns. The project focused on designing an inclusive and welcoming interface while meeting user needs for brief movement therapy. This app is intended to be used at home or work without need for any special equipment, accommodating the user whenever they are in need of relief.
Roles
UX Design
Product Design, Branding
UX Research
Tools
Figma
Google Forms, Google Surveys
Zoom
Project Duration
February- April 20222
6 weeks
The Problem
How do we address the user’s physical discomfort from working in a seated position? Furthermore, what motivates users to seek out self-led options for pain relief?
-
Our target user works in a seated position and only has short breaks available throughout the day
-
Sitting for extended periods has long been associated with pain and reduced mobility
-
User has been unable to find effective relief for their recurring pain patterns.
Project Goals
.png)
Research
Competitive Analysis
There are a number of yoga apps available, with a wide range of usability and functionality. Some of the competitors claim to target specific types of pain, yet lack informed and intentional therapeutic content. Other apps like Yoga International contain a vast amount of therapeutic content, but the user has to understand how to find this content within the app.
Most competing apps focus primarily on longer sequences that require getting down onto the floor with the use of a yoga mat or other equipment. It was also noted that these apps feature primarily thin, white women as instructors and models.
The competitors fall into one of two general groups:
Group A
A vast, overwhelming amount of varied content (thousands of offerings, if you can find what you want)
Group B
A limited selection of generalized, free content with no specific therapeutic focus (one size fits all)
Competitive Analysis Insights
YogaRelief has an opportunity to fill a niche need for an inclusive yoga app that is specifically tailored for pain relief and directs users to evidence based, functional yoga therapeutics.
User Experience Survey
A UX survey was completed by 32 users who experience discomfort while working from home in a seated position. This survey was conducted anonymously using Google Forms, and included four screening questions to qualify users as survey participants.
-
The goal of this survey was to understand patterns of physical discomfort associated with working virtually from home in a seated position.
-
Furthermore, the survey inquired about what motivates users to seek options for relief for this discomfort, and what methods they use to find relief.
Survey Findings
We found that 100% of users surveyed experience some physical discomfort after working in a seated position. Their work causes predictable patterns of muscular discomfort, and many users already use self-motivated relief techniques to address this discomfort. Yoga is one of the most utilized relief techniques.
1.1 Frequency of physical discomfort.
1.2 Location of physical discomfort.
1.3 Duration of relief techniques used during the workday
1.4 Techniques used to find relief
1.5 Projected relief app usage
Summary
78% of users surveyed already use yoga or stretching to find relief from discomfort, showing self-led interest in yoga as a therapeutic tool.
The user survey allowed us to prioritize which parts of the body should be targeted with specific therapeutic sequences by
analyzing which areas of discomfort were most often mentioned by users.
-
Neck, shoulders/arms, lower back, upper/mid back, and hips/thighs were all mentioned by 40% or more of users surveyed.
The user survey allowed us to choose durations of the therapeutic sequences by looking at how long users spend on relief
techniques throughout their workday, and how long they projected that they would spend on the app.
-
Ws should include relief options for Less than 5 minutes, 5 minutes, 10 minutes, 15 minutes
For usability purposes, the app should guide users to options personally tailored to address their specific discomfort.
Personas
Overview
Two personas were created due to finding that some users surveyed had occasional pain, while others usually or always had pain. The main persona, Carla, has occasional pain and shorter breaks throughout the day. The secondary persona, Annabelle, has recurring pain and has time for longer breaks throughout the day.
Persona 1: Carla
Carla is a full-time remote worker. Carla has used yoga apps in the past, but found that they have too many options to search through when she’s limited on time. Furthermore, some of the exercises she has tried on these apps caused her even more discomfort.
.png)
Empathy Map: Carla
Persona 2: Annabelle
Annabelle works remotely part-time. She has daily neck discomfort and has tried many relief techniques. Annabelle has also used yoga apps in the past, but found that they have limited, repetitive content. She spends a lot of her down time searching for potential relief options, but nothing provides lasting relief.
.png)
Empathy Map: Annabelle
Information Architecture
Sitemap
From the user research, personas, and empathy mapping I constructed the sitemap for YogaRelief. The app will have four main sections, the onboarding flow that recommends relief options for the user, user favorites, goals/challenges, and the main Relief section in which the user can browse all available movement sequences.
Task Flow: Recommend a Sequence
Wireframes
Sketching
I began with quick sketches for each of the screens required for this main user flow. The priority was to have the UI be friendly, approachable, and visually clear. It is important for the user to be able quickly and accurately make their selections, so there is only one decision/interaction on each screen.
Four options were sketched for each of these screens. The strongest design choice for each was selected after peer feedback and some visual iteration that combined the strongest features from several of the sketches.
Mid-Fi Wireframes
For the mid-fidelity wireframes, I focused on choosing user interface layouts for each screen that would create a simple user interaction. The screens encourage the user to make a selection, and then confirm their choice to progress to the next screen.
It was important for the product to be inclusive, so illustrations were used rather than images. Many yoga apps feature only thin models in tight clothing, which alienates many potential users. The YogaRelief app is intended feel welcoming for all, so illustrations that feature natural postures and casual clothing were intentionally were chosen.
The expressions chosen for the third screen encourage the user to communicate their current level of discomfort. These facial expressions were inspired by visual pain scales used by physical therapy offices, and encourage user introspection.
Branding
Logo Design
The YogaRelief logo design process began with brainstorming the main app offerings: individualized support, functional pain relief, physical wellness, and motivation for the user to move throughout their day.
Sketching began with pen and paper.
.png)
With peer feedback, I selected and digitized the three strongest options, each of which was a variation on combining a human shape with a sense of uplifting movement. These also integrated the Y and R letters in the Yoga Relief brand.
Final logo design of choice #2, which was the strongest option featuring simple vectors, that could easily scale to any size.
For the final iteration, the vector corners were rounded to give the logo a more friendly feeling. A recognizable human shape
with expansive body language is a strong choice to represent the YogaRelief brand.
UI Kit
The interface design selections are intended to create a calming, welcoming, and inclusive feeling to the app. The colors are soothing and muted, focusing on blues and neutrals. Imagery was selected to show people in everyday situations and casual clothing. Poppins is a rounded, welcoming, and easily legible font for both headers and body text. Rounded buttons, emojis, and carousel cards encourage interaction.
High Fidelity UI Design
YogaRelief
The login screen features a clean design with plenty of whitespace. The YogaRelief logo and wordmark on a white background create the feeling of spaciousness and openness.
-
Create New Account is the primary CTA.
-
Show Me Relief Now is a way for the user to bypass creating an account to try the relief recommendation feature.
-
The user can Log In as the tertiary function
A Personalized Experience
Once the user is either logged in or has selected Show Me Relief now, they begin the relief sequence selection user flow. The first screen invites the user to select where they would like relief.
-
Parts of the body are represented both verbally and visually
-
Next progress button is inactive until selection has been made
-
The user can exit this process by using close icon at top left
Inviting Introspection
Allowing the user to visualize their any discomfort with familiar emojis offers them a tailored experience within the app UI.
-
Discomfort scale is both visualized and verbalized
-
Emojis and buttons are both interactive for easy user selection
-
Emoji faces use expressions and colors for increased accessibility
-
User can go back to previous screen if needed
Positioned for Relief
Seated or standing relief is offered for most accessibility while the user is at work. This is visualized with illustrations in casual clothing.
-
Positions are represented both verbally and visually
-
The selection screen is split in half for easy selection
-
Both the illustration and button are interative for selection
-
Selection is outlined with a stroke before choice is confirmed
Inclusive Therapeutics
The instructors within the app are dressed casually and do not use any special equipment.
-
Video progress is represented by an interactive progress bar and a timer
-
User can add video to favorites while it plays
-
Tap center of the screen to play or pause
-
User can go back to previous screen if needed, or close video player with icons at the top of the screen
Tracking User Results
Understanding the individualized effects of movements over time is a way for users to discover which relief is most effective for them.
-
Effects are represented verbally and visually
-
Emojis are used to represent user’s physical experience
-
Options for user uncertainty and skipping this screen
-
User can just save their results or save and add video to their favorites list
Exploring Relief and Progress
The home screen in YogaRelief allows to user to access their goal progress, relief that worked for them, or browse all relief options.
-
Recommend Relief for Me button opens sequence selector user flow
-
If logged in, user goal progress is visually represented
-
Past effective sequences are shown, with most recent first
-
User can browse all relief sequences by selecting part of the body
Prototype
Usability Testing
Research Validation
Usability testing was conducted in moderated sessions with four users over Zoom. The Figma prototype was used.
Test Objectives
-
Test how effectively the user can identify the purpose of the app.
-
Test how effectively the user can identify necessary steps to create a new account.
-
Test how effectively the user can log in with an existing account.
-
Test how intuitively users can find a relief sequence to meet their needs.
-
Identify if users can locate relief requences that worked for them in the past.
-
Identify any areas of user hesitation, confusion, or difficulty while using the app.
Findings Summary
Test Completion Rate: 100%
3 of 4 users were able to complete all usability tasks successfully, with the 4th user completing 90% of tasks successfully.
Main User Pain Points:
-
One user was unable to go back to make necessary changes to their sequence once they had begun playing the video.
-
One user was unable to immediately locate the Log In CTA from the Log In screen.
-
Two users mentioned that being able to browse videos by duration (in addition to by part of the body) would be helpful.
-
One user mentioned that an introduction/welcome page before onboarding flow would help orient them within the app.
Suggested Iterations:
-
(High Priority) Add a ‘Back’ button to video player screen.
-
(High Priority) Increase color contrast/visibility for Log In CTA vs. the
-
(Lower priority) Add a way to browse videos by duration?
-
(Lower priority) Add an orientation/welcome page before the user begins onboarding flow
High Priority Iterations
1. Increase color contrast/visibility for Log In CTA vs. the background
Checking the colors with the WebAIM accessibility checker found that the original color was too light for accessibility.
I changed the button outline and text color from #84A9C0 to #4E7994, a darker version of the same blue, which passed the contrast guidelines.
.png)
2. Add a ‘Back’ navigation button to the video player screen
I added a back button navigation icon at the top of the video player, which takes user back to the selection confirmation
screen. I also added a light 20% #000000 scrim at the top of the video player to increase visibility of these white icons.
Conclusion
Yoga as Relief
After working for nearly 8 years in the world of yoga therapeutics, I have found that the biggest factor determining whether people will return for future experiences is the amount of physical relief they actually feel. Thus, having a way for users to check in with their levels of discomfort and the ability to track whether something has helped them is very important. If it works for them, they will seek it out again.
Building and designing an app focused on yoga therapeutics convinced me further that such a product is needed. So many people have constant discomfort and try various types of yoga, only to find that it hurts them more or alienates them due to lack of accessibility. I have found that yoga world in general is not very inclusive, and is not visually portrayed in an inclusive way. Real people of all ages, body types, and ability levels could benefit through individualized yoga therapeutics if they had access to it. Yoga Relief is for everyone.
Room for Growth
For future versions of this app, considering the addition of the lower priority iterations would be my top suggestion. Having the ability to browse by duration of relief sequence may offer users more ways to explore app content with limited time.
A short introduction to how the therapeutic approach differs from ‘regular yoga’ may invite more users to try the app, even if they are new to yoga as a relief technique.
-
Expanding the Goals section of the app would be another option for further iteration, as adding goals and challenges for users to complete gives them a sense of accomplishment and personal growth.
-
Creating video content for this app would be quite a big undertaking, but having quality content and quality instructors is more important than having a vast amount of content at first.
I think this app would be a great addition to the lives of many, and could direct them toward cultivating a toolbox of techniques that work to give them a life of more comfort and ease.