Designing a health app that motivates users to build healthy habits with friends

Our UX development process in building a ‘Steps Streak’ feature that encourages users to stay healthy with friends

“Let’s see how long we can maintain a streak!”

Optimity is an app that helps people track their health, do quick yet effective activities & fun challenges with friends. I’m currently leading design at the organization & discovering ways to help people build healthy habits :)

“Healthy habits are learned in the same way as unhealthy ones — through practice” — Wayne Dyer

In my past year at Optimity I’ve often looked for articles written by product designers in the health and wellness space. There are some great podcasts one could listen to, but a thorough case study on process & implementation there are but a few.

This article should provide some insight on how we do things at Optimity, our design process & how we built ‘Step Streaks’ as a feature to build engagement, provide a more social experience for our users & help them build healthy habits :)

The process that helps us build what we build

Here’s a quick glance over our 9 step design process executed in a 2-week long design sprint:

1. Business Requirements: Here the we achieve clarity on requirements & the problem is justified by the product team with the leadership team.
2. Defining Scope: The product managers present the problem, engagement data & learnings from past user interviews. User stories & requirements documentation ready for the product designer
3. Wireframes: Basic flow & layouts are charted out, user journey finalized. This is a good time to sit with the front-end team to make sure you aren’t overlooking any technical/OS constraints.
4. Flow Review: The flows are presented to the engineering team for early buy-in and prevent any future friction. I believe this is most critical phase as the team agrees on the UX and are excited to build something together!
5. Content Strategy & Storytelling: I believe copy & messaging really shape the design. We usually craft the V1 story here, providing context to all hi-fidelity designs that follow.
6. Hi-Fidelity Designs & Prototyping: Happy paths & critical flows are designed on Sketch & prototype created on Invision for testing.
7. User Testing: Depending on the feature or experiment, we decide the testing strategy. Being an early stage startup we have limited resources, so we bank on our pool of testers, friends, family & colleagues. We test with our ideal demographic & document our learnings to back our hi-fidelity iterations.
8. Design Iterations Post User Testing: UI edits & flow changes made based on learnings from the tests.
9. Collaboration: Here’s when we hand the designs off to the development team to do their thing. We use Zeplin for design handoff.

Building the ‘streaks’ feature

Step 1 [Problem Identified]: Usage on Optimity was not consistent enough. Users weren’t consistent with their activities or daily targets on the app. Needed a feature that kept users engaged on a daily basis & brought them back to build long lasting healthy habits.

Step 2 [Ideation & Scope Definition]: Working out can get boring, what keeps you motivated? Your friends. You tend to go to the gym more consistently when you have a friend to go with. Why not workout with a friend on Optimity, where the other could hold you accountable.

Hello Streaks! A very common concept that requires little effort in getting users to learn the workings of the feature.

Solution: Step Streaks allows 2 friends to consistently achieve their daily goal of 7,000 steps each to successfully maintain a streak.

The requirements were documented on Confluence.

Step 3 [Wireframing]:

Here are a few of the many wireframes sketched out for the Steps Streak feature. The idea was to introduce challenges to users. An app that primarily offered quick and easy activities was now a platform that allows friends to compete & complete collaborative challenges together!

Streaks had to evoke a ‘fire’ within the user to maintain a streak. This statement helped guide the identity of the feature, a flame. We experimented with various layout and finalized the one that communicate what needed to be communicated, glorified the days the goal was achieved & motivated users with milestone bonuses in the form of gems (Gems, a currency on the app that helps users to claim gift cards from their favourite brands).

Step 4 [Hi-Fidelity Designs]:

Post conducting the flow review with the engineering team, the new UI components were given a go ahead from the respective OS experts & the hi-fidelity designs were underway.

Illustrations used in the designs were from an online library called Undraw.

The donut graph is an interactive graph, that animates the progress to show how much each user has achieved in terms of steps in a day.

Step 5 [Prototyping & User Testing]:

We created a prototype on Invision and tested the feature with over 20 individuals that fit our demographic & personas. The learning were documented on Google Sheets & added to the confluence document (single source of truth).

Step 6 [Collaboration — Development Handoff]:

The designs were then uploaded to Zeplin for the front-end team to access all design assets & specifications.

Reflection

Streaks allowed users to do something with a friend. One’s health journey is so much easier with a friend. It’s important to remember that we’re social beings hoping to have a partner in every journey we undertake. Streak tapped into that core insight and served our users well.

Update:

Two months after the feature has been live, we’ve learned a few things. The feature in its current state allows only 2 friends to maintain a streak. User feedback post launch has informed us that:

1. Users would like to challenge more than 1 friend at a time
2. The goal of 7,000 steps is challenging — especially in the Winter (Seasons are a must to consider when analyzing behaviour)

Keep designing solutions that truly add value to the lives of your users. It’s important not to forget V2, V3 and so on. We often build features and let them be. Learn and rebuild. :)

Feel free to reach out to me if you’re building a health and wellness product!