How we evolved and enriched the main screen of the Flo app. Part 2 — Cycle widgets

Article by Alina Shipulina, Product Designer at Flo Health Inc.

In this article, I’ll talk about how we managed to bring more value to our users on the main screen, leveraging the core app functionality. The first part of the article is here.

We knew that the potential of the main screen was much more than we were utilizing at the time, and we contemplated other ways of providing value through it.

Challenge

Slight variations in cycle length are totally normal. However, frequently shortened or prolonged cycles are a reason to speak to a health care provider. Without closely tracking the patterns of their cycles, users can be unaware of irregularities in their cycle or period length, which could be an indicator of other underlying health issues.

What we strived to achieve

Flo is on a mission to encourage our users to better understand how physiology affects their well-being by giving access to expert information, knowledge, and support. We take this mission seriously; that’s why we strived to design a more explicit and comprehensive way of conveying to our users the full picture about their cycles and periods.

We defined our business goal as creating long-term value for users by providing an instant and easily accessible overview of their cycles and periods, helping users to reflect and notice potential concerns.

User needs

The core functionality of the Flo app is about periods, cycles, and reproductive health, so in our discovery process, we decided to focus on the Tracking audience — the largest audience of the Flo app. Our lead researcher did a tremendous job by leading the Track user needs research; she conducted the user interviews and facilitated the collaboration with different stakeholders to put together all the findings. We built the hierarchy of user needs and defined which of them we were going to focus on in our explorations:

I want to know if everything’s OK with me.

Users wanted to know if their cycle was normal. They expected to understand what to watch out for, and they were keen to receive some self-assessment for potential concerns and make sure they didn’t miss something important.

I want to fix it if something is off.

Users expected to get help in figuring out the possible reasons for the abnormalities in their cycles and whether they were serious or not. They wanted to know if they could treat it safely on their own or if they should see a doctor.

Evaluating the current solutions

We assessed the current state of the app experience to explicitly see how users received the overview of their cycle and period. At the time, users logged their cycles and received insights about them in the form of:

• Chatbot dialog
• Report for a doctor in a PDF
• Cycle and period graphs

The problem with these formats was that users couldn’t easily get personalized insights about their periods and cycles. The cycle report dialog in the chatbot wasn’t providing concise snippets of information; it required quite a lot of time to dive into it. A PDF report and cycle and period graphs were hidden in the profile where almost no one went. Those users who actually reached and used these features used to take the data from the graphs and consult other websites to find out whether their cycle was regular or not, as they didn’t get any indication that something in their cycle was normal or abnormal in the Flo app.

We began with the user testing of the current cycle report in the chatbot to understand what worked well and what didn’t. We found out that for users, it looked somewhat interesting but was not a mind-blowingly helpful piece of mind that was able to solve some sort of problem. The messages were perceived as pretty generic for users, who were already aware of this info.

After that, we conducted the user testing of cycle and period graphs (the ones that were hidden in the profile) to understand how clear they were for the users and if they could see value in them. We revealed the following problems:

• It was hard to read the last period start date for users.
• Such visualization didn’t work well for understanding the average cycle length.
• Users avoiding pregnancy needed to see fertile days and ovulation days to have an overview of the days with low and high chances of getting pregnant.
• Some users didn’t understand the meaning of the red and gray graph elements.
• Users didn’t get any indication whether there was something wrong with their cycles or periods.

Based on the track audience needs and problems with the existing design, we determined the following opportunity:

How might we …

… provide an easily accessible overview of our users’ cycles and periods, helping them make sure that everything is OK with them and notice potential concerns?

Also, after conducting interviews with OB-GYNs where we found out what information doctors usually ask on regular checkups, and with the previous findings in mind, we determined which info about cycles and periods could be most valuable for our users:

• Cycle lengths comparison
• Average cycle length
• Is cycle length within the normal range?
• Are cycles regular?
• Period days and fertile days
• Info about the current cycle
• Previous cycle start date
• Previous cycle length and period length
• All cycles collected for the whole duration of using the app, but most importantly, the recent ones

We established design principles to inform further design explorations:

Easily accessible

We should make these insights approachable to the user so that they can easily open them and share them with the doctor.

Concise view

In today’s world, time is the most precious resource, so we aimed to preserve the conciseness of the information we were providing for users. Insights should have a clear and succinct view, providing only key information and quick indicators if something is normal or not, according to doctors and international medical guidelines. All the details and comprehensive explanations can be provided on separate screens.

Room for adding more

Flo’s main screen is like a shop front in a way, a preview of the diversity of features we provide for users. We put the most important things on the main screen and navigate users further for more details or more similar content. We are planning to add different types of health insights in the future, providing different value for users about their health, so we need to keep in mind that we need space for them.

Responsive to new logs

Users should always see that something has changed in their insights or something new appeared when they logged a new period or edited the existing ones.

Design exploration

We explored dozens of apps with different stats and graph visualizations. After that, we generated several ideas and conducted a series of user testing sessions and iterated on the prototypes until we came up with the data visualization solution that was perceived as clear and simple.

The idea was to show brief cycle data insights for each of the key cycle and period parameters. Users can utilize insights to quickly identify any underlying issues by seeing their cycle and period lengths regularly tracked month on month and flagging any anomalies to be aware of.

The most enthusiastic and confirmatory feedback from users was about the short indicators: “Normal” and “Abnormal” against cycle and period lengths and “Regular” or “Irregular” against the cycle variability. Users appreciated the small green and orange check marks a lot, finding them super easy to read, which contributed to the instant understanding that everything’s OK or something is off.

Here’s what one of the respondents said:

I love that it says ‘normal’ with the little green check mark. It makes me feel relieved to make sure I’m on the right track.

We also explored the ideas of how and where we can provide these insights and how to place them closer so that users can easily reach them. We had really high stakes on the stories format: we just recently rolled out daily insights on the main screen, and they showed very promising metrics. It seemed to be the easiest and the most noticeable way for users to receive the insights based on their recently logged data. But we also came up with the idea of presenting the insights in small widgets under the stories section and making the whole main screen scrollable, as it was a very common pattern in many apps. We decided to compare these 2 formats through user testing, and this is what we found out:

• The prototype with scroll worked better because users were able to see information in a more efficient way; everything was available to just skim through.
• Scrolling instead of tapping worked better. You didn’t have to go back and forth. It felt more natural and easier to find the info users were looking for.
• As a story wasn’t supposed to stay there for a long time, it was not evident where users could find this information later.
• A story was easy to miss in the row of other stories.

Story vs scrollable main screen

Here’s what one of the users said:

I do like scroll ’cause it’s right here for you, available on the main page. You can easily scroll down and see, and it is broken into different parts — a story is something that you can easily miss; everything is available here to just skim through.

So, a story could be quite a good solution for providing instant feedback on the newly logged data. However, it wasn’t easily accessible in case users needed to prepare for a checkup, as the insights would disappear in 24 hours. That’s why we kept on with the cycle widgets on a scrollable main screen.

Cycle insights

This is the first widget that provides information about the previous cycle, period length, and cycle regularity. It helps to:

• Show a quick overview of the user’s cycle health
• Flag anomalies in cycle health
• Empower users by making irregularities really clear to the user

A user can also start the Flo Health Assistant from this widget, where they can access a cycle-report chatbot dialogue based on their previous completed cycle.

Cycle history and details

According to the OB-GYNs, it’s useful to have an overview of several recent cycles, which helps to show a wider picture of a cycle. The cycle history widget provides an opportunity to check the details of the recent cycles to see the peculiarities of each of them, notice if something was off, and share this information with a doctor. Users can always return to the previous insights about particular cycles and make sure that they can enter them anytime in the future, and nothing will be missed. It also keeps the info about period and fertility predictions; it helps to look at it retrospectively, especially on the fertile and ovulation days, when they occurred — it’s helpful both for those who are avoiding pregnancy and those who are trying to conceive.

Cycle trends

This widget addresses the need to see cycle lengths in comparison and explicitly see outliers that lie beyond the normal range and which users might need to pay attention to. It helps to notice abnormalities over the recent cycles and encourages logging skipped cycles in case the user forgot to log their period.

Widgets performance

The most noticeable outcome of this project was that our users started to log cycles more consistently, which impacted the accuracy of predictions we provide for them.

This project ties into the company’s objective to educate women that their cycle is a powerful indicator of their health and well-being. Cycle data widgets empower women to understand their cycle and more easily spot any irregularities that may indicate underlying health conditions.

If you are interested in creating user-focused design experiences in Flo, you may check our career page https://flo.health/careers.

Special thanks to Tatsiana Anishchyk and the dedicated team