Case Study: Relaxation and Self-Care App
Time To Relax: A relaxation and self-care app with meditation, workout programs, and more.
Overview
Product: Time To Relax is an application that helps you prioritize relaxation and self-care in your everyday life. It is supported by the organization Therapy Project, a non-profit organization that offers free online therapy and therapy programs. See the Therapy Project case study here.
Guide: Google UX Design Professional Certificate
Duration: 7 weeks (for the app and the website)
My Role: UX Research, UX Design, UI Design
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Goal: The main goal for the design was to create a dedicated app for relaxation and self-care.
The Process
The Design Thinking process for this project is the one which was taught in the Google UX Design course. The process consists of five stages: Empathize, Define, Ideate, Prototype, and Test.
Understanding the user
User research: Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was busy adults who want to take recharging and relaxing breaks during the day. Research also revealed that users want to have a variety of relaxation and self-care ideas. Other user preferences included the option to categorize the relaxation tracks and ideas, have plenty of meditations and workouts for relaxation and have relaxation tracks of many different durations.
User research: Pain Points
Time: Searching for relaxation and self-care ideas online is a difficult and time-consuming task.
Confusion: To play different relaxation tracks or meditations in many platforms creates confusion.
Variety: People need to have easy access to a variety of different relaxation methods and ideas for every situation and preference.
User Personas
Problem Statement: Isabel is a busy professional and new parent who needs a relaxation routine because they want to relax and recharge.
Problem Statement: Alex is a student who needs to practice relaxation and self-care because they experience stress during exam periods.
User Journey Map
Mapping Isabel’s user journey revealed how helpful it would be for users to have access to the “Time To Relax” app.
Starting the design
Paper Wireframes
I took the time to draft iterations of each screen on paper, then I used the ideas I liked the most and created the final version of my paper wireframes.
Digital Wireframes
I created the digital wireframes using Figma and then using the completed set of my digital wireframes, I created a low-fidelity prototype. You can check the low-fidelity prototype here.
Usability Study
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Research Questions
How long does it take for a user to start a meditation track?
How long does it take for a user to add a self-care idea?
Are users able to successfully add a new self-care idea?
Are there parts of the user flow where users get stuck?
Do users think the navigation is easy or difficult?
Key Performance Indicators (KPIs)
Time on task: how much time users spend to complete a particular task
Task success rates: how many users successfully complete a particular task
User error rates: how often users get stuck trying to complete a particular task
System Usability Scale: a questionnaire to evaluate customer feedback
Research insights
Round 1:
1. Users want the duration of each track to be added close to the title.
2. Users want arrow links in Favorites and History so that they can navigate to the pages Meditaion/Workout etc.
3. Users want the Recommended page to be named Search because the page’s main functionality is search.
Round 2:
1. Users want the duration of each track to be displayed more prominently.
Affinity Diagram
After gathering all the data from my usability study I grouped them together and I created an Affinity diagram.
Refining the design
From all the insights collected from the usability study, I corrected and improved my digital wireframes. Also, I worked on my mockups for each screen. After laying out all the screen mockups I connected them, added gestures and motions to create a high-fidelity prototype. You can check the high-fidelity prototype here.
Design System
High-fidelity screens
Accessibility Considerations
1. Used icons to help make navigation easier.
2. Used accessible color contrast confirmed by WebAIM.
3. Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.
Going forward
Takeaways
Users shared that the app made relaxation routines seem like something they could actually do every day.
While designing the Time To Relax app, I learned that the solution is most of the time simple and intuitive and I can always find it while analyzing the user’s needs and pain points.
Next Steps
- Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
- Interview users to get to know their feedback on the product.
- Conduct more user research to determine any new areas of need.
Thank you!
Thank you for your time reviewing my work on the Time To Relax app! If you’d like to see more or get in touch, my contact information is provided here.