Flo Redesign

App Design
Date: January 2023 - March 2023
Role: UX Designer and Researcher
Teammates: Harini Adivikolanu, Alise Bruevich, and Emi Sandoval
Project Overview
During my 4th year at UC San Diego, I was in a group project where our goal was to redesign or extend a feature of an existing app. For 8 weeks our team was focused on redesigning the Flo app, which is a cycle tracking app for people with periods. As women we had all used a period tracking app before and wanted to incorporate other facets of health and all four phases of the cycle within our redesign, something none of the currently available apps have.
Problem Statement

People with periods need access to education about the four phases of the menstrual cycle and how they affect other aspects of their health such as sleep, diet, fitness, and mental health. Utilizing the knowledge of the physical and emotional changes people experience during their cycle will allow women to optimize the different phases to better manage a healthier lifestyle.

Background
The menstrual cycle significantly affects many aspects of women’s health. For instance, a woman’s exercise schedule can be strongly impacted by changes in energy levels, hormones, menstrual cycle symptoms, and more. Studies show modifying an exercise routine to match the phases of the menstrual cycle can benefit the woman by matching the characteristics associated with each phase to the exercises most beneficial in that time. The following details how mental health, physical fitness, diet, and sleep are impacted during each cycle phase:
Phase 1: Menstruation
Progesterone and estrogen are at their lowest, which can lower energy levels and motivation.
Phase 2: Follicular
Estrogen and testosterone levels are peaking, increasing overall energy levels.
Phase 3: Ovulation
Estrogen levels continue to increase, meaning energy and endurance levels are similar to during the follicular phase.
Phase 4: Luteal
Estrogen and progesterone continue rising and individuals experience peak energy levels. These hormones begin to decline in the latter half of this phase.
learn more about the phases >

User Research

Interview Methods

  • 10 interviews conducted on people who do and don't track their cycle
  • We were unable to ask task-based questions since most interviewees did not currently use Flo
  • We asked questions to learn why they use their current tracking (or none), how much they know about their cycle, and if they integrate this information about the cycle phases with their overall health
  • Interviews were conducted both in person and virtually in order to reach a variety of age groups including working professionals, a mom, and a teenager.
  • Some questions provided quantitative information (ex. “Do you use a period tracker?”)
  • Some questions provided qualitative context (“What do you like/not like about using a period tracker? What do you wish you could change?”)
Research Findings
Graph 1: All interviewees mentioned tracking at least 1 other aspect of their health, including mental health, physical health, diet, and sleep.
7/10 Interviewees used different tracking apps
Including: Flo, Clue, MyCalendar, Google Calendar, Fitbit, Apple Health, and P Tracker
3/10 Interviewees did not track their cycle
They did not use an app because of the difficult set up, they forget to use it, or use of birth control
All interviewees preferred their app due to ease of use
Apps were initially chosen due to being seen first, recommended, or their privacy policies
7/10 Interviewees claimed to know about the 4 phases
Despite claiming to know about the phases, only two interviewees could actually name them
2/10 changed their habits during a certain phase(s)
The changes were made during menstruation only or menstruation and ovulation
3/10 Interviewees were interested in learning more
At the end of the interview, they reported being curious to learn more about the 4 phases

Personas

Competitive Analysis

Key: green checkmark: yes, dollar sign: with subscription, orange: partially, red: no
Apps from right to left: Flo Period Tracker and Calendar, Clue Period and Cycle Tracker, Period Tracker by GP Apps, Apple Health

The apps were chosen based on app store reviews and which apps our interviewees use. It was a trend amongst all the apps to collect a lot of data about symptoms and other measures of health or fitness. The collecting of this information seems to only be for the purposes of tracking when or how often it occurs and does not use this data to provide any suggestions to the user. The only app that currently tracks all 4 phases is Flo, but the tracking of the luteal and follicular phases are minimal, not done automatically, and only accessible with a subscription. This competitive audit showed the lack of free and comprehensive information about women’s health. Since most of the apps require paid features, it seems unrealistic to create a comprehensive and completely free app. An alternative could be paid subscriptions, but only in addition to the option of watching ads in order to access all the app's features. This would allow for more people to have ease of access to this information.

User Experience Design

UX Flow

Lo-Fi Prototype

Flow 1
The large circle on the landing page guides the user to learn more about how their current follicular phase can affect their mood, sleep, fitness, and diet.
Flow 2
This flow uses the same landing page as flow 1, but here the user looks at their phase calendar, the today page where the user can track symptoms and activities, as well as learning more about current phase insights.
User Testing
Users interacted with our design using Figma's clickable prototyping feature and were then asked questions about the experience. We received additional feedback from other design students.
Users navigated through the two flows without guidance
They all began by navigating to the center button of the screen and clicking “follicular phase”
All users reported that flow 1 was intuitive to use without direction
Flow 2 had much more detailed info. and took more effort to read it all
One user was confused about what “day ten” meant since they view their cycle as 5 days
In reality the cycle is on average twenty eight days and the length of a period is 2-7 days
Users liked the flow 1's simplicity, but the layout and detailed info. of flow 2
While people liked aspects of both, flow 2 was more popular amongst our interviewees
Next Steps
Based on the feedback we received, we prepared a plan for what to improve before designing a higher fidelity prototype.
Adjust prototypes to combine the easy navigation of flow 1 and the detailed info. of flow 2
This can be done by revealing the info. in smaller parts to be revealed as desired
Make minor changes to better facilitate the task of finding the calendar icon
Based on feedback, we limited the screen to feature only one calendar icon
Make changes to the "Phase Insights" circle so users know its functions and how to access them
The text "learn more" and "edit period dates" was added to the button
Change the phrasing of "Day X" to better communicate it is the current day of the cycle
This was done by adding "of the current phase" in smaller text below "Day X"

Initial Hi-Fi Prototype

Original Screen
Based on feedback about the readability of this screen, we designed an alternative version.
Alternative Screen 1
When clicking one of the phase insights buttons on the home or today screen, this pop-up will appear which answers the desired question.

This alternative screen displays the information about the phase insights questions one at a time as a pop-up box versus getting an entirely new page with lots of information. This alternative was made so that users wouldn’t be overwhelmed by all the information at once and could get the answer for only the question they clicked. Ideally, the original screen would still be accessible by clicking the main circle on the home page since it reads learn more versus a specific question, but the new alternative would appear only when clicking a specific phase insights button/question.

Alternative Screen 2
Due to the change in our prototype organization, the insights page or previous flow 1 now includes a page with all the phases rather than limiting it to the user's current phase.

As stated earlier, the insights page was changed to this style from our original flow 1. Due to this change, it was necessary to expand the section to include more than just the user’s current cycle phase. The new page on the left allows users to select the phase which they want to learn about. This leads them to the phase specific page (which is the middle screen) and features information on the 4 categories(Mood, Sleep, Fitness, Diet) for the selected phase. Once users select a category they want to learn about within the phase they selected, the application will take them to the 3rd screen on the right. The last screen features an in depth explanation on the category/phase selected.

User Testing Insights
We conducted informal interviews in which the interviewees were able to click through the Figma prototypes with little guidance and answered questions about their experience.
  • confusion about what the calendar colors represent (the 4 phases)
  • suggestion to add other health information on the calendar's today page rather than only in insights
  • overall positive feedback on the alternative 1 screen featuring the pop-up, but one designers suggested to add a learn more button to the pop-up which takes the user to the original screen
  • condense the paragraph on the insight screen or have the text appear as a pop-up
  • add some type of image or graphics to the health category buttons so they do not look as plain
  • overall the design's flow improved and users preferred the alternative 2 screen

Final Hi-Fi Prototype

Prototype Improvements
Changes were made to our initial hi-fi prototype based on feedback received from interviewees and other designers

The participants provided meaningful feedback about the intuition of the flows we presented, as well as aesthetic suggestions. For example, we got a range of opinions on presenting information through flip-able cards versus blocks of text. 2/4 of our interviewees noted that the content about each phase was very useful and digestible, however one participant noted that presenting the information as blocks of text made this screen overwhelming. The general consensus was that most interviewees preferred the flip-able cards to present information, as this made our flow more interactive and visually appealing while breaking up large portions of information. The biggest insight was the intuition of the colors. 2/4 interviewees noted that they immediately associated the pink days with menstrual days, but were not as quick to identify the other phases by color. To mitigate this, we decided to add an information icon on the calendar screen to present a color key for the phases on the calendar. The insights - phases (screen 9) now shows each phase name in their respective color. After clicking a phase, the following page will display the health categories in a gradient of what ever color the phase was, in this case, purple for follicular phase.

Before-and-After Story 1
This changes were made based on feedback to cut down heavy text. Some feedback discussed still wanting this more text heavy page available, but to still make it more visually appealing. The new left page was created so that the user can tap on each question individually to reveal the text bit-by-bit rather than all at once. The user accesses this page by clicking the large circle on the home screen. The right page has no changes from before, except displaying the information after each button was clicked.
Before-and-After Story 2
The background color of each phase button was changed to match the color associated with it in other parts of the app. This will reinforce that each color represents a different phase throughout the app and reduce confusion in users. After clicking on a phase button, the next page which displays the different health categories will remain in the color of that phase.
Reflection

Overall, I learned a lot from this project making sure to follow an iterative design process in which changes are made based on either research or feedback in order to continue improving and attempting to eliminate personal bias. One thing I took away from this process it how to redesign while maintaining the original apps branding. I had never redesigned an already existing app, so I had to conform to the original standards to maintain consistency and the feeling that this is simply a new extension of the app. While we made many changes and added new pages, when compared to the original, it is easy to see that its an expansion of it.

Looking back at this final prototype, I am excited to see how much we accomplished and how it truly reflects our original problem statement. From our initial user research, it was obvious there was a gap in knowledge about the various phases people with periods go through every cycle seeing as only 2/10 interviewees could name them. None of the period apps on the market provided information about all 4 phases, except 1 behind a pay wall. Both the lack of the knowledge itself and its accessibility show how some of the additions we made can truly inform people and improve their overall health.