Healthy Habits - Breathe

Background

Healthy Habits (Personal Challenges) is an app designed to tailor each user’s own interests. Users could join one of the Healthy Habits based on their own interests by setting a goal and pursuing the habits they joined. Breathe is one of Healthy Habits. The idea of Breathe is to encourage users to practice healthy breathing exercises on a daily basis. Users will get a virtual reward when they keep practicing every day. It is a 4-week challenge during which each week contains a different Meditation Practice from easy to hard. This app was launched in 2020.

My Role

• Provide UI/UX mockups and flows
• Build prototype
• Create visual concept and animations
• Collaborate with PMs and engineers

A few quotes from customers

“Loved the insight from the experts, and that is offered low-stress/easy solutions to make changes vs. a complete wellness overhauls.”
“It had a lot of good information on things to do to stay motivated to reach your goals as well as identify blocking forces that get in the way. Very helpful”
“Helpful tips on createing healthy practices. Learning to day “I choose” opposed to “I have to” and how to anchor new habits.”

Progress

User research

The ultimate goal is to remind and incentivize users to practice breathing every day, whether at home or in the office. Firstly, we need to design an interface that will send daily reminders for breathing practice. Secondly, as users engage in daily practice, we aim to reward them with virtual incentives. I took charge of designing these virtual rewards and conducted extensive research. I found that most apps commonly use badges and points for winning streaks, like Fitbit's badges and iWatch Activity's awards. I shared screenshots of these examples with the team. While we acknowledged their beauty and elegance, we also felt they lacked a sense of uniqueness or special significance.

Define concept

After several rounds of in-depth discussions, we agreed that the key to success is to get users interested in the app. We know that developing good/healthy habits is challenging and requires time and effort. As healthy habit formation is like a personal journey, we decided to implement something that users need to take care of daily in a storytelling way, encouraging them to stick to their habits.

To provide more incentive, we offer a virtual reward streak to users for logging into the app every day. For added fun and increased user curiosity, I designed a growing plant as the virtual reward. The plant starts as a seed and grows and changes as users practice breathing exercises daily. To enhance visual effects, I animated streak messages. For instance, the app will push a message with a dynamic fallen leaf if the user hasn't logged in for several days. For users practicing daily, they'll receive a thumb up, a bolt, or a fire based on the number of consecutive days.

UI design for Virtual Rewards

We decided to maintain one theme throughout the entire habit, which meant I needed to create a longer story to support the theme for 9 weeks. This was the most challenging part of the project. The first theme of Healthy Habits is "Grow," and I crafted a story centered around daffodils. It starts with preparations for planting daffodils, setting up the environment, containers, and planting the seeds. As the user logs in daily, the seeds will slowly change, subtly making the user accustomed to observing the growth and changes of the daffodils.

I designed different perspectives to observe the growth process, including long-range and close-up views. I also introduced new elements to the story, such as a glass of water, a cup of coffee, and a book, related to other healthy habits: Drink H2O, Make Coffee, and Reading. These additions complemented the theme and provided a comprehensive narrative for the 9-week journey. Here are some of animations I made for other Healthy Habits.

The screenshot below depicts the last two weeks, where the daffodils bloom and the book is finished. Users can probably infer that the story is coming to an end. With the appearance of a lovely card, users may understand the purpose of planting daffodils. The final scene shows Grandma receiving the blooming daffodils and the card, bringing the story to a perfect end.

When a user is willing to try one of the habits, it marks a good start. I hope that the visual and emotional illustrations, with a strong sense of storytelling, can encourage users to persist in developing a healthy habit. This is also the original intention behind the development of our project.

Wireframe + Flows + Interface
Onboarding experience:

Getting a streak experience

Reminder setting experience