Fitbit Female Health
A ground up design of a monumental new feature to help users track menstrual cycles, fertility, and related health trends. To understand the full picture of their health to optimize their lives.
Overview
Everyone can benefit from some basic health education, but women specifically have a lot to think about. From menstruation to pregnancy to menopause (and all the things before, beyond, and in-between), women face unique experiences that significantly affect their physical and psychological health
“Tracking my cycle keeps me in tune with my body, which makes me feel more knowledgeable and that helps me make better choices, which makes me feel more confident.” - Melissa L.
Project Outcomes
Press calling the Fitbit Versa the smart watch for women - providing key market differentiation against primary competitor the Apple Watch
Gained serious traction in a multi-billion dollar category - jumping into the thick of it with other well seated competitors such as Clue, Glow, Apple Watch, and others.
Significant Increases in user retention and engagement, 3M additional downloads above previous average within the first 3 weeks
Key Challenges
Simplifying Complex Interactions
Calendar interactions, health detail logging, and data analytics are all complex interactions to provide to the user. With a highly variable demographic, these concepts must be intuitive and simple to understand.
Most of the work is behind the scenes. If done correctly, it is never noticed - a thousand considered details under the surface to make the one visible interaction intuitive and helpful, scaleable with internationalization, resilient to error.
Fitting the Ecosystem
Any new feature added to the Fitbit app needs to fit in with the rest of the existing ecosystem. Fitting in means making sure to adhere to that design system, while still innovating and pushing it, as a whole, forward. A welcome challenge, as constraints often produces interesting results.
App Efficiency
Fitting within the existing app also means taking clever technical approaches to reduce app size and keep download times minimal. 100MB is the max for over-the-air downloads. Beyond that, users would can only download with WiFi - a big no-no. So, not only did we have to enter the competition pool against apps with years to mature, we had to do it with a fraction of the size.
Nuanced demographics
Working to be as inclusive as possible with language and visual styling, the awareness that every user has a different health profile and cultural perspective is key. Additionally, Fitbit has a global audience spanning nine languages, English, French, Italian, German, Spanish, Mandarin, Cantonese, Japanese, and Korean. Internationalization also has significant UI and interaction design implications.
A highly competitive market
Much of the competition has products that have already had years to mature. Jumping into that space and being competitive out of the gate, while maintaining a reasonable V1 timeline, budget, and a fraction of the competitions app download size was a tall order.
Implemented Solutions
Product Direction
Empathy Powered
Attain user empathy through extensive user research, diary studies, and interviews to design an intuitive calendar, an accessible detail logger, and data analysis.
Novel, Powerful, Brand Conscious
Provide users with novel ways to understand and track their entire health picture, while fitting within the existing product ecosystem, yet push the Fitbit brand forward.
Growth and Market Differentiation
Grow the female user-base, and work to design technology providing key differentiation from the competition.
I want an uncomplicated experience, to be empowered by education, to feel comfortable with my health, to understand the connections within my holistic health picture, and I need my predictions to be accurate and reliable.
Core Use Cases
Preventing Pregnancy / Trying to Conceive / Life Planning
Understand each phase of the menstrual cycle. Use that information to understand health and how to plan life around it.
Understand Cycle and Health to Optimize Lifestyle
Reducing discomfort. Planning activities. Understanding the effects of exercise, nutrition, sleep, etc., on cycle patterns.
Cycle as an indicator of overall health
Staying in tune with the body and making informed decisions. Understand the body and know what is healthy.
Design Highlights
Scroll farther down for process deep dive
Process
Our team analyzed the patterns and responses of over 150 women between the ages of 18 and 54 for a period of 3 weeks. Our mission was to discover genuine empathy for our users, providing a foundation we could reference throughout the design process. A few of the techniques we used:
- Remote video diaries
- Weekly questionnaires
- In-person interviews
- Medical Expert interviews
“Tracking my cycle keeps me in tune with my body, which makes me feel more knowledgeable and that helps me make better choices, which makes me feel more confident.” - Melissa L.
5 key areas of commonality
I want the experience to be simple and uncomplicated.
I want to be empowered by thorough education
I want to feel comfortable with my health
I want to understand the connections within my holistic health picture.
I need my predictions to be accurate and reliable.
3 Core Use Cases
Preventing Pregnancy / Trying to Conceive / Life Planning
Understand each phase of the menstrual cycle. Use that information to understand health and how to plan life around it.
Understand Cycle and Health to Optimize Lifestyle
Reducing discomfort. Planning activities. Understanding the effects of exercise, nutrition, sleep, etc., on cycle patterns.
Cycle as an indicator of overall health
Staying in tune with the body and making informed decisions. Understand the body and know what is healthy.
Design
Design with consideration and sensitivity
Discover genuine empathy through diary studies, interviews, and extensive testing.
Provide users with easy to use core features
Accurate cycle predictions. Intuitive calendar interactions. Fast and simple detail logging.
Educate and empower women, break down taboos
Relevant, dynamic, in-context education Support groups for sensitive topics. Support feature in conservative areas
Build powerfully simple tools
Easy to use data analytics and trends. Provide users with a holistic health picture.
Innovate within a system
Balance constraint with innovation. Make sure that the new feature fits within the ecosystem.
Moodboards
Type Sample & Color Palette
Why Pink?
Originally we tried to avoid pink. There’s a phrase, “Shrink it and pink it”, used to describe how brands often create products for women, with little consideration, by simply taking a male product and making it pink. We did not want that.
Make sure it's well considered
We explored dozens of color palettes and tested them with women from various demographics. Of course, you will never please everyone, but that which conveyed the message most effectively across a multitude of users was, in fact, pink. Turned out that green and yellow don’t bring a period to mind, and red is just too much.
We added some pop to the pink, and voilà! Bright magenta became the anchor color for Fitbit Female Health.
Launch Design
The Calendar
Elements
Hierarchy of Focus
By carefully considering color, we draw the user’s attention through an ordered hierarchy of information, decision, and interaction points.
- “When is my period and fertile window?”
- “Where can I log symptoms?”
- “What day have I selected, what symptoms have I already logged, & when are my future cycle phases?”
Learn in Context
By nature, the calendar is complex, even after intense effort to keep it simple. There is a large array of states that must be shown to provide the necessary information to a user at any given time. The “Detail Row” at the base of the calendar provides in-context education depending on the selected day. This allows them to learn as they explore and remove extra clutter like a key, additional labels, or tutorials.
Educational Card
Below the detail row is an educational card. It changes based on what element the user has selected to provide additional education on both female health and the interactions of the app in context.
Continuity
Based on the research, for users, it was important that the calendar provided a sense of continuity between menstrual cycles, while still allowing the user to map them to their day to day lives measured in months. To strike this balance, we implemented only slight delineations between months, coupled with a stronger delineation between cycles. We also allowed the period and fertility indicators to stretch from day to day, row to row, and across months without breaking.
The Detail Logger
Elements
Mini Calendar
A scrollable header calendar. This interaction allows the user to change the selected day and modify the logged details without having to leave the screen or context switch.
Quickly Log
From this screen, the user can log a range of symptoms and life events with a couple taps. This was one of the areas that we would like to expand as soon as possible. For V1 we had to cut a couple things like mood and energy level logging.
View Logged
Based on research, we found that it is important for a user to be able to access previously logged details for any day in the past. They can do that through this screen, simply by selecting a day. They can also access historic information from the trends screen (accessed via a toggle in the calendar screen).
Log details to compare against metrics
Every detail logged can be compared in a timeline against other user data like sleep, exercise, weight, and heart rate to provide the user with a full picture of their health.
Trends History
Elements
User Averages
Several key pieces of information are important to show the user at a glance. Average cycle length, average period length, and the average day on which ovulation occurs.
Iconography
Iconography is echoed throughout the app, drops for periods and lotus flowers for fertility times. These are shown in the history overview at the top of the screen as well as in a minimized form in each of the historic cycles in the list.
Historic Cycle Data
This data visualization allows the user to be able to compare and contrast the lengths and feature points of any individual cycle with others over time so that they may notice patterns in their health.
Metric Analysis
Elements
Cycle Overview
Similar to the Trends History screen, the Metric Analysis screen shows the users an overview of the data below. In this case, the user has selected a single cycle, so the overview information is in relation to that.
Vertically Stacked Data
The days of the cycle are stacked with associated Fitbit metric days vertically. In this way the user can easily see at which points in their cycle other conditions occur, such as symptoms like cramps and acne, or quality of sleep or frequency of exercise.
Analysis at a Glance
Thanks to the simplicity of the data visualizations and the vertical stacking, a user can easily understand the patterns of their holistic health picture. Being an expert in health or in data visualizations is, by design, not necessary. Using this data a user could plan time to allow for better sleep or know when to shoot for key exercise goals.
Home Dashboard
Elements
Fit the Ecosystem
Any new feature added to the Fitbit app needs to fit in with the rest of the existing ecosystem. There are pros and cons to this approach and it is mulled over frequently (should we make a separate app? always up for discussion). This means making sure to adhere to design systems, while still innovating within that system. A welcome challenge, as constraints often produce innovation.
App Efficiency
Fitting within the existing app also means taking clever technical approaches to reduce app bloat and keep download times minimal. 100MB is the max for over the air downloads. After that, users would have to download with WiFi - a big no-no. So not only did we have to enter the competition pool against apps with years to mature, we had to do it with a fraction of the size.
Simple Data Visuals
Fitting in with the rest of the Fitbit app provided some interesting constraints to work against. One of those being the size of the tile on the dashboard screen. Rather than an entire screen, like dedicated apps have, we had a small square to communicate a number of statuses effectively. This required a dedication to simplicity.
Onboarding
Elements
Short and Sweet
One of the most common challenges of a quality onboarding flow is reining in size. We managed to produce a condensed and engaging flow with just ten screens.
High Stakes
Another of the key challenges of a women's health app is the variance between users. Despite the variance, the need for accuracy is paramount. We guessed that to be the case, and our guess was confirmed in the user research, if our predictions turned out to be wrong or inaccurate we would lose the user immediately, and most likely never see them again. This would prevent the success of the feature, but would also damage the Fitbit brand as a whole, unacceptable.
Set for Success
The solution to that high stakes bet, that we would provide enough accuracy for users despite the wide variation in user data, was to invite them to help us produce accuracy - together.
In a quick flow in onboarding the user sets up their average cycle length and provides the key data with which we make initial predictions. Then through friendly copy we invite the user on a journey of a month or so to enter their data and produce the most accurate predictions. It's a process not an immediate result. The primary job of the onboarding was to invite the user in to that process and set up realistic expectations for initial prediction accuracy.
On Device
Elements
Prediction Ring
Echoing the dashboard tile design, the prediction ring shows the user what cycle they are in and which one to expect next at a glance.
Quick Log
Functionality allowing the user to quickly log health details from the device on their wrist, minimized in design to allow for more easily tappable areas and more low key visuals for what would be a sensitive topic to some.
Educational Insights
Blurbs of contextual info allow the user to learn in context and connect to other parts of the app to further understand their holistic health picture.
Behind the Scenes
Fin~
Thank you for your interest and reading this entire case study. If you made it this far you likely have some thoughts, interesting view points, or even critique. Feel free to get in touch and chat about user experience design.
-min.png)
