Overview
Yoga-related injuries are not uncommon. Especially when you are a beginner or do yoga at home without an instructor. Knowing the struggle of finding the right care to self-manage a yoga injury has pushed us to think about having a digital rehab.
The opportunity was to design a dedicated website and app to have a way to make high-quality injury rehab accessible for everyone, everywhere.
Roles
Role: UX, Visual Design, Branding & Identity
Date: Fall 2022
Duration: 6 weeks
Skills: Competitive Analysis, ideation, user stories, and flows, creating personas, survey design, conducting user interviews and observations, sketching, wireframing, prototyping, user testing & analysis
Challenges
How to have a diagnosis of pain via the app. To have a precise diagnosis we have to have a lot of information but we didn't want to put users in a lot of steps and make users bored during the process. After the diagnosis we should find the best treatments, and also we want to be with the user in each step of the treatment.
Solution
Asking questions about the pain, and the symptoms suggest the best treatment in the fewest amount of time. Categorize the injuries to the most common injuries to have a better diagnosis of pain.
Audience
My target audience is people doing yoga at home, via YouTube, or any other apps. They usually have a busy life and don't have time to go to yoga studios.
Most of them are at the beginner and intermediate level and doing their yoga exercises without any personal instructor, and it causes a lot of injuries by making some moves in the wrong way.
Tools
Tools that are used in this project:
Goals
Help people find the treatment for their common injury
Find healing yoga exercises to help release the pain
Link to a physician
Find how to prevent the injury
Design Process
Underestand
User survey
User interview
Competitive analysis
Define
User persona
Empathy map
User journey
Ideate
User flow
Information Architecture
Design
Wireframe
Hi-Fi Designs
Branding
Prototype
Test
Feedback
Conclusion
Future concept
User Research
Research Strategy
The first thing we focused on was our research strategy.
First, we conduct survey research, and from that we found some users to interview, we conducted a user interview, then a competitor analysis. This also gave us an insight into the market space and provided additional context for the problem we are working on. Secondly, we create an interview guide in preparation for Usability Testing. This enabled us to conduct our interviews in a consistent and controlled manner.
User survey
I conducted an Online Survey among my friends and family to cover people of all ages and all walks of life. This was done to understand the true users, their pain points, wants, and needs. I gathered some insightful data from the analysis done via google forms. I received 28 responses.17 questions related to yoga and common injuries were asked to have a better understanding of how we can help with the damage through the website and app.
User interview
I conducted interviews with 3 people in the survey. I chose the ones who mentioned that were injured through their yoga session.
I asked 8 questions to have a better view of what can help them to have a better experience during the treatment time, and help them to find the best solution for their injury.
Based on the feedback from our interviews, we noted down all interesting soundbites and insights to find the most important and common ones. Over a couple of hours, we organized them and found the most pain points to give us a sense of where to focus.
Questions that are asked in the interview:
-
How experienced are you in yoga?
-
Have you ever had a yoga instructor?
-
How do you usually update each other about the plan?
-
How often do you get injured?
-
Do you know exactly what you did that caused the injury?
-
What do you usually do to make the pain better?
-
Do you know details about your pain?
-
How often do you visit a physician?
-
They don’t know if they are doing the yoga poses correctly or not.
-
Most of the interviewers were beginners, so they don't know about the right poses that much.
-
They usually used medicine that was heard from somewhere or from their previous injury.
-
It’s hard to decide which treatment is better to start with. For example ice or hot compress!
Sara Young, CA
“Whenever I got injured after a while that I feel better I start my normal life and sometimes the pain goes back worse, I don't know how much needed the treatment finish completely."
Morgan James, NY
"I often got injured in my neck and lower back."
Mike Driver, MI
“I do yoga once in a while, so my body can't tolerate some poses and it causes the injury.”
Keynotes from the research
-
Having a design can lead users to find the best treatment related to their pain.
-
Add some prevention part, to show why the injury happened.
-
Have the treatment step by step for each day.
-
Have an overview of the treatment.
-
Have a video for the exercises.
-
Have an option to see their previous injuries.
Persona
Based on the information gathered in the research phase, I analyzed my observations and synthesized them in order to define the core problems identified now. I created 2 Personas to consolidate all the information available and to make the users more concrete.
Creating a user flow for Mike helped us break down the steps and site pages needed, understand how she would use the website and the application, and the decisions that needed to be made as he went through the process to become a user of this product.
Journey map
After the persona, I create a journey map to really get into mike's shoes and empathize with his experience of finding treatments for his lower back pain through the application. This was a great exercise because as I imagined the emotions Mike would encounter during his experience, it allowed me to realize new design opportunities for Ropana website and app.
Empathy map
I designed an empathy map to emphasize mike's thinking, feeling, doing, and saying.
Swat analysis
Competitor Analysis
Competitors:
Exact health, Sports Injury Treatment App, Exercises to Reduce Pain
As part of our Competitor Analysis, we conducted an analysis of three apps with similar product offerings to Ropana. These were: Exact health, Sports Injury Treatment App, and Exercises to Reduce Pain.
We focused our research on User Interface elements and User Experience Flows – including the way they suggest treatment plans, diagnose the pain, step-by-step the treatment process, and the Features.
These are websites and applications that offer similar services, not exactly for yoga common injuries, but for all sports injuries and also one of them is just for running injuries and the other is about pain diagnosis.
By comparing these applications together and investigating Strengths and Weaknesses we came up with some ideas to find the best solution for the problem.
Key findings from the Swat analysis:
-
Categorize all the parts so that user can find their solution easily.
-
Have a minimal design to have a smooth flow.
-
Have different ways to reach the result.
-
Find the treatment in the fewest amount of steps.
-
Have a smart chat.
-
Have an option to consult with a physician.
Information Architecture
User story
High-priority user stories:
-
As a user, I want to be able to create a plan based on my pain, so that I can find some quick treatments.
-
As a user, I want to be able to select the pain area, so I can have treatments for the pain.
-
As a user, I want to be able to check on my treatment plan, so I can start one of them.
-
As a user, I want to be able to check on physicians, so I can make an online appointment.
Mid-priority user stories:
-
As a user, I want to be able to find the pain resources, so I can prevent the pain next time.
-
As a user, I want to be able to find the exercise plan for the subsequent day, so I can start my second-day exercise plan.
-
As a user, I want to be able to find the treatment plan, so I can start my first-day treatment plan.
Low-priority user stories:
-
As a new user, I want to be able to sign in, so I can have my profile.
-
As a user, I want to be able to set a reminder, so I would be reminded about my plans.
-
As a user, I want to be able to check my profile, so I can see my previous treatment plans.
User flow
Based on high-fidelity user stories, I created user flows to create paths through the website and app to solve these problems. This was the first concrete step in screen prioritization and will lead to a site map, and sketches.
Once I created the user flows I began to sketch out my ideas, I created these sketches to be able to quickly get my ideas out and identify any pain points and correct them before moving them to digital.
User flow sketch
User flow digital
Site map
After understanding the screens I would design from the user flows, I created a site map to organize my screens and lay out the hierarchical structure of my app.
Style guide
Logo
I explored various logo symbols and wordmarks to be able to clearly communicate my app’s brand identity and what it values as a brand.
Finally, I came up with the one that goes with the yoga pose in the negative space of the circle, and the R letter is the first letter of ROPANA. ROPANA in Sanscrit means healing.
ROPANA
Color palette
To ensure consistency in brand experience and visually pleasing UI elements and interactions, I created a style guide with typography, iconography, and colors which would aid in creating a seamless experience for the users aesthetically and visually.
I choose Green and purple for the color. Green is a healing color that gives healing energy to the heart, lungs, and digestive system. Green is the color of nature, it stimulates growth. It helps in mending broken bones and rejuvenating tissues. Green helps the circulatory system, which includes the heart and blood flow.
Purple is associated with power, both earthly and spiritual. In healing, purple is also used.
Typography
Font size
Iconography
Illustration
The user interface was designed considering the following laws of User Experience:
Hick’s Law was used to ensure simplicity in the number of choices offered to the users.
Fitt’s Law, which is highly used in Human-Computer Interaction, was adopted to place Call To Action (CTA) buttons in the right positions throughout the app.
Zeigarnik Phenomenon was considered to ensure the users are aware of the tasks completed/incomplete.
Law of Proximity and Law of Common Region were used to group similar elements in the app with rightly defined boundaries and space.
Accessibility
Color contrast testing result:
Home page
I introduced the homepage in order to provide a central place for a user to start the treatment plan.
Users have the option to sign in and go to the profile, create a new treatment plan, and continue the current plan.
We also introduced our chat Bot. This button pops up and the user can ask questions through that. we provide this feature for all the pages
Question Selection
I decided to introduce guiding illustrations that would support the questions. We chose illustrations over pictures because they’re timeless and reflect feelings of pain more.
Sketches/Low-fidelity Wireframes
Wireframes help is establishing a skeleton view of the Desktop, app, and watch screens. I started with low-fidelity wireframes by sketching on paper and then moved over to designing High-Fidelity wireframes with the help of Figma.
Wireframe sketches for desktop, mobile app and watch :
Digital wireframes
The first iteration of digital wireframes of Desktop, mobile and watch:
After some user testing for the hi-fi prototype iteration of prototyping with 4 people, I conducted the interviews in person to see their behavior and experiences through the task that I asked them to do.
These are the tasks that I ask users to do:
-
To find a treatment for their back pain.
-
I asked them if they feel very very bad pain and check what's gonna be the treatment.
-
Make an appointment with a physician.
User testing feedback:
-
60% of users completed the tasks.
-
It was confusing for the user to find their treatments.
-
It would be a good option for users to have the overview on each page, to have that all over the treatment process.
-
Having an option to go to other treatment plans from each step that we are in.
-
Go to other plans without going back to the treatment page.
-
Add the overview of suggested treatments on all pages.
-
Categorize the history plan based on treatments.
Must change:
-
The overview page is extra.
-
Add the overview on each page to have a better understanding of each step and process.
-
Have the sign-in at the beginning for the mobile version.
-
Also, have an option to sign in on the desktop as well at the beginning to check the whole treatment history.
-
Design a dark mode for the watch, it's better to have the watch in dark mode.
here are some of the important changes that I did in different iterations.
-
I added the sign-in to the home page to have an access to all plans and history from the beginning.
-
Instead of having an overview page separately, I merge it into all pages to have the overview of each step that we are in and also can change the plans whenever we need to.
-
I added the overview to the plan history to see the history in a categorized way. and also to keep consistency in design.
-
The sign-in page added to the mobile after opening the app regards to have access to the history plans, continuing the current plan, and also connecting with the watch.