Redesigning A Core UX Flow In Calibrate’s Mobile App

Calibrate is a healthcare startup that is changing the way the world treats weight. As part of this mission, Calibrate focuses on a 10% weight loss goal rather than a number of pounds. 10% helps members work toward a clinically significant, realistic goal that is relevant to their personal journey rather than an arbitrary and impossible number based on a BMI chart.

Challenge

All of Calibrate’s marketing clearly communicated this 10% weight loss goal philosophy in order to set program expectations for members. Unfortunately, the messaging in the app fell short of reinforcing their philosophy. They didn’t create a place for a member to see their 10% weight loss goal or measure their progress in relation to that goal.

Here’s what the progress screen looked like before we got to work. The graph provides an overview of weight loss, but only in pounds, and it doesn’t do a good job of helping a member stay focused on their goal or see a summary of their progress.

Solution

Echobind worked with the team at Calibrate to quickly augment and improve the progress screen, adding a visual indicator of a member's 10% weight loss goal.

Here’s a summary of the work we did:

Created a high-fidelity prototype
Wrote task scenarios for testing
Wrote user interview questions
Recruited participants from Calibrate’s existing member base
Scheduled and conducted sessions remotely via Zoom
Summarized our findings, finalized the prototype, and documented the feature set for engineering

…all within the span of about four weeks.

With the deadline for a handoff to engineering quickly approaching, we needed to work fast. We decided to run hybrid user sessions that included user interviews combined with usability testing the solutions we aimed to develop.

We wanted to get a sense of how members were conceptualizing weight loss goals to ensure we were in the right ballpark, but we also needed to test early ideas and get feedback on real solutions given the time constraints.

User Research

We structured each session so that members’ answers to the interview questions weren’t biased by their use of the prototype. We sent a Figma prototype link to members and walked them through the task scenarios only after they had answered the interview questions.

Here are the interview questions we used. Warm-up questions are used to build rapport, while the core interview questions are used to uncover answers to the main research question.

Rapid Prototyping

We started out with a single prototype to get some initial feedback but quickly realized that members were unable to complete one of the core tasks because the interface didn’t clearly signify that you could horizontally scroll on the weight graph.

We created a second prototype with a horizontal scroll signifier and spent the remaining sessions A/B testing each prototype.

Changes were made to ensure the progress bar and start weight & goal weight were large enough. We also added a scroll indicator to the graph so members could easily navigate to a previous date.

This pivot highlights one of Echobind’s core strengths: We’re able to recognize when something isn’t working early on in a project and quickly correct course to find a more effective solution.

Conclusion

The second prototype performed much better than the first, and members were easily able to complete the task scenarios. With a solid foundation of user research and validation of base usability, we marked up the designs for handoff to engineering.

Our designers markup their designs with notes for development to explain complex interactions or nuanced design decisions. This saves the engineers time by limiting the amount of guesswork they have to do and saves the designers time when they QA the final build.