PRODUCT and visual DESIGN
Body temperature tracking in Flo
Tracking body temperature in Flo adds valuable insight beyond period dates and symptoms, helping users better understand their cycles and make informed decisions about fertility and health.
Intro
Flo is the #1 women's health app worldwide. Over 300 million people around the globe use Flo as their ovulation and period tracker app, fertility calendar, and pregnancy assistant.

As the lead designer for wearables at Flo, I managed the end-to-end user experience—from research and prototyping to information architecture and visual design—while collaborating with diverse stakeholders, including medical, legal, and compliance teams, to ensure all product standards and requirements were met.

The Product team comprised me, Content Designer, Product Manager, and UX researcher.
Opportunity
  • Tracking temperature helps to see when ovulation likely occurred: after ovulation, there may be an upward shift in body temperature.
  • Better cycle understanding: by tracking temperatures and other symptoms over multiple cycles, users may learn a unique pattern of when temperature tends to rise, and thus the fertile window.
  • More accurate predictions: using temperature data (and ovulation test results) may help improve the algorithm’s accuracy for estimating ovulation and fertile days.
Approach
& Process
We began with discovery to identify user needs along with product, legal, and medical requirements. Through repeated testing and feedback, we refined our concepts and iterated on designs. This collaborative approach ensured alignment with developers during build and QA. After launching, we continued to monitor the product, collecting data to inform ongoing improvements.
Discovery & Ideation
We started with a deep dive into the problem space through market analysis and user research to understand existing solutions and uncover unmet needs. Collaboration with the medical team ensured that our ideas aligned with clinical accuracy, safety, and regulatory requirements. From there, we held sketching and brainstorming sessions to explore multiple directions, mapping user flows and defining essential use cases. This foundation helped us identify key opportunities and set a clear vision for the product before moving into detailed design.
Science behind
Body temperature naturally fluctuates throughout the menstrual cycle due to hormonal changes. Around ovulation, rising progesterone levels cause a slight increase in basal body temperature — typically by about 0.2–0.5 °C — which stays elevated until the next period begins. Tracking this subtle shift over time reveals recognizable patterns: a steady rise after ovulation, a plateau during the luteal phase, and a drop when the new cycle starts. These trends can help identify fertile windows, confirm ovulation, and provide insights into hormonal balance, offering a simple yet powerful view into reproductive health.
Design challenge
  • Subtle data visualization: Body temperature changes are minimal, so graphs and visuals had to make small fluctuations easy to see and interpret.
  • Clarity without complexity: Present scientific information in a simple, approachable way that feels understandable to non-experts.
  • Accuracy and credibility: Ensure that all insights align with verified medical data and reflect cycle physiology correctly.
  • Cross-disciplinary alignment: Balance input from product, design, medical, and legal teams to meet both user needs and compliance requirements.
  • Trust and privacy: Handle sensitive health data transparently, reinforcing user confidence and data security.
  • Meaningful storytelling: Turn raw temperature readings into clear insights that help users understand their cycle and body patterns.
Delivering the key message
Based on the science of temperature changes and the principle of clarity, I explored hundreds of visual and interaction options to determine how best to communicate the story behind the data. The goal was to help users quickly grasp what matters most — how their temperature changes around key moments in the cycle, particularly ovulation and the period.
Core experience
The final design focuses on giving users a clear picture of what’s happening in their cycle right now. The screen combines a temperature reading that shows whether it’s below or above the baseline, a short couple-line explanation to make sense of it, and a chart that visualizes the full cycle with the current trend highlighted. For those who want to learn more, a medical expert’s note expands on why these changes happen and what they mean for the body. Altogether, it turns complex temperature patterns into something easy to understand and relatable.
Beyond the ideal
I also designed for moments when data isn’t fully available. A loading or skeleton state keeps the screen visually consistent while data is being fetched. When the baseline is still being calculated, users see a clear message explaining that more data is needed. If no cycles are logged yet or there’s no temperature data, the screen guides users on how to start tracking, keeping the experience informative and encouraging even without full insights.
Onboarding & Wearables connection
To make temperature tracking effortless, we designed a simple onboarding and connection flow that guides users through linking their wearable devices. The goal was to make the setup feel quick and reassuring — no tech hurdles, just a smooth start. During onboarding, users learn how temperature data fits into their cycle insights and what to expect next. We tested early prototypes with real users to identify where guidance or reassurance was needed most, then refined the flow to make each step clear and intuitive. The result is a confident, seamless start to a more connected and personalized experience.
A piece of the connection flow enabling temperature tracking in Flo
In-app promo stories
To help users understand the value of temperature tracking, we created a series of in-app stories that introduce the feature in a friendly, visual way. They explain how temperature connects to the menstrual cycle, highlight the benefits of syncing a wearable, and invite users to start tracking. Each story balances education and motivation — showing not just what the feature does, but why it matters.
Outcomes
The new temperature tracking experience brought a noticeable improvement to the overall user journey. It made complex data easy to understand, helping users feel more confident and connected to their cycle. The feature met a growing market demand for deeper, science-based insights while staying true to Flo’s approachable tone. After launch, we saw positive signals confirming that the design improved both clarity and value perception across key product metrics.
Reflection
This project showed me how important it is to make complex science clear and approachable. Working closely with users and medical experts helped turn subtle temperature data into something people can actually understand and trust. Small design choices — from the chart to the wearable connection — made a big difference in how confident and engaged users felt. It was a great reminder that combining real insights with user-centered thinking can create features that are both helpful and empowering.
2023 – 2024
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website