Redesigned Flo Health to Inform on Phase Insights

Focus: Women's health, holistic health, cycle phases, interaction design, user interface design

ROLE

Lead Designer (UX/UI)

TEAM

1 Lead Designer (Me)
1 UI Designer
2 UX Researchers

DURATION

3 months

TOOLS

Figma, Miro, Google Sheets, Zoom

TYPE

UCSD Data-Driven Product Design Course Project

Interview Insights

Do you know about the phases of the menstrual cycle?

80%

are aware of the phases

Can you name each phase of the menstrual cycle?

out of 10 average

Do you do anything to feel more comfortable during your menstrual cycle?

out of 10 average

Pain Points

Many women are not informed about the function of the phases of the menstrual cycle.
Only some women voluntarily seek out information that will help them be more comfortable during their menstrual phase.

User Flows

Phase Insights Flow

This was the first version of the phase insights flow. We decided to redesign this flow because this flow only permits users to view information on the current phase that they are in. We want users to have access to information on all the cycle phases at any given time.

Phase Insights Flow (Updated)

The updated version of the phase insights flow allows users to select which cycle phase they want to learn more about. This was accomplished by adding a screen featuring all phases of the monthly cycle, allowing users to view insights on any and all cycle phases.

Symptom Tracker Flow

The symptom tracker flow provides a way for users to track their symptoms and learn more about them. Users can explore their symptoms further after logging them by clicking "Why am I having these symptoms?". Once clicked, the button will navigate to the "Learn More" screen, where users can select articles to discover why they are experiencing certain symptoms. We decided to redesign this flow as users expressed that it was confusing and hard to find the information they were looking for, in an efficient manner.

"Learn More" Wireframes

These wireframe sketches explore design ideas to make the "Learn More" article screen more informative and user-friendly. After creating seven initial concepts and reviewing user feedback, I selected wireframe #7 as the optimal solution. It features a scannable layout, a search bar for finding articles on specific symptoms, and an engaging visual design. The final wireframe is showcased on the second slide.

Solution Walkthrough

Cycle Calendar

Users can utilize this calendar to visualize their monthly cycle as a whole. Users can input the days of their menstrual cycle to keep their cycle up to date.

Symptom Tracker and 'For You' Articles

The symptom tracker allows for users to enter the symptoms and learn more about them. Users can click "Why am I having these symptoms?" to explore articles that reveal more information on the "Why?" behind their symptoms.

These articles will be featured in the 'For You' section at the top of the screen. Users can also explore their feed to view current trending articles and stay informed.

Cycle Phases

The "Insights" section of the original "Flo" app was redesigned to feature a user flow that serves to directly inform users about how each phase affects their "Mood", "Fitness", "Sleep" and "Diet".

This flow was designed in a way that allows users to quickly find information on how certain phases can affect their lifestyle. We included the "Cycle Phases" screen to allow users to view information on any phase at any time of the month.

A closer look

Users can click on any card to see how the phase they are in impacts different factors in their wellbeing such as: mood, fitness, sleep, and diet. When selecting an option, the card will reveal more information on what occurs to the body during that phase and how it affects the factor selected.

Reflection

This project focused on spreading awareness of the phases of the menstrual cycle to women with periods. Our way of doing that was by redesigning the "Flo" women's health app to have cycle phase information available and easy to find.
‍
When we shared the final version of our application redesign with the women we interviewed, I felt immensely proud as we received positive feedback for the overall finished product. Our interviewees told us that the application redesign looks very clean and makes it easy to find information about each phase of the menstrual cycle.

Overall, this project was really rewarding for me as I was able to create an impactful solution to the recognized lack of information in this topic of women's health.

emi sandoval