Project Overview
As part of a Data-Driven Product/UX Design course I took at UCSD, I had the opportunity to extend or redesign a feature of an existing app. I worked alongside Madyson Wilkins, Alise Bruevich, and Emi Sandoval to tackle a redesign of Flo, a mobile app for period tracking and general women's health information. 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.
With this in mind, we targeted our redesign at women who may feel too busy to keep up with healthy habits so that they can be better informed about their menstrual cycle and how other aspects of their mental, physical, and dietary health can be affected during each phase. To do so, we extended Flo's monthly calendar and symptom/mood tracking to include all four menstrual phases, as well as specific exercise, food, and habit suggestions relevant to each phase, in an easy and interactive format. Providing this comprehensive health education specifically catered to women’s biological needs on one platform gives users back control over their own health, without the cognitive load of seeking out up-to-date and reliable health information.
Goals
Before we started designing, we wanted to better understand our target audience by collecting data. Our three main goals were:
- Gain a better understanding of how informed women are about their menstrual cycles and the ways they can optimize them
- Obtain both qualitative and quantitative information about the current tools our target audience uses to track their health
- Assess what health goals are most important to our user and the current struggles they face to accomplish them
Surveys & Interviews
We chose to conduct interviews to gain specific insight about preexisting questions we had as a group. Each group member conducted 2-3 interviews, providing us with 10 different perspectives on this subject. Our participants included a wide age range, from those in their early 20s to late 40s, however all users met our criteria of busy, working professionals with periods. Whether our participants used Flo or not, their insights aided us in our redesign. It was helpful to determine why they used or did not use a period tracker, while also learning how much they know about their cycle and how it affects their overall health.
Core Findings
Most tracked their cycle, but it is unclear what makes one app more preferred than another
Out of 8 people who tracked their cycle, 6 different apps were mentioned:
- Flo
- Clue
- MyCalendar
- Google Calendar
- Apple Health
- Fitbit Health
- P Tracker
Those who didn’t track their cycle or stopped did so because it was too much effort to set up and use an app.
All tracked some aspect of their health regularly
All participants tracked some aspect of their health, whether that be sleep, diet, fitness, or mental health, using popular methods of tracking like fitness watches or journaling.
Only 2 out of 10 interviewees could name the menstrual phases
7/10 said they are aware about the menstrual cycle phases, but didn't know what they were
Only 2/10 could actually name the menstrual phases, and changed their habits during menstruation and ovulation
Learning about one's health can be overwhelming!
Sleep quality, being active, and managing stress/anxiety were most important to users. One participant noted that she wanted to be more efficient about her health by using fewer apps, but felt overwhelmed by trying to research health information. Another participant said she wanted to learn more about the four phases, but didn’t know where to start.
Persona 1: Sammy Johnson
Biography
Sammy is a young woman looking to live a healthy lifestyle. She already tracks some aspects of her health on her Apple Watch and Health App, but now wants to track her period more closely. In terms of her cycle, Sammy regularly experiences symptoms, such as acne breakouts and cramps, and takes birth control regularly. She has recently become more interested in tracking and understanding how her menstrual cycle fits with other aspects of her overall well-being.
Core Needs
- Understand how birth control and lifestyle choices affect her well-being
- Learn how to cook nourishing, healthy meals during her cycle
- Develop an exercise routine to maximize strength and muscle gain
Frustrations
- Lack of information about various health aspects (physical, dietary, hormonal) during menstruation
- Too labor intensive to integrate different apps into one, and too much effort to balance multiple apps
Persona 2: Anabelle Smith
Biography
Annabelle is a working mom to a beautiful 2 year old girl (and trying for another!). She is very busy, working long days in the office and long nights taking care of the home, and frequently loses precious hours of sleep. She is passionate about creating a healthy and safe household, opting for natural ingredients and holistic solutions. She loves to cook, but wants to pivot to a healthier, plant-based diet that benefits her and her family.
Core Needs
- Understand how dietary choices can impact symptoms related to her menstrual cycle
- Learn about tracking, identifying, and monitoring pregnancy symptoms
- Develop a new set of recipes to keep herself and her family healthy to support her holistic health lifestyle
Frustrations
- Lack of information about the effects of dietary choices on menstrual cycle
- Access to healthy recipes/ingredients that support her menstrual cycle and provide necessary nutrition to herself and her family
Problem Statement
Using our user research and personas, we developed a single statement that details the problem, the user, and the solution.
"Working professionals with periods need easier 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 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."
Competitive Audit
Before designing, we conducted a competitive audit to compare features in other apps that may be related to our problem statement. We looked at Flo, Clue, Period Tracker by GP Apps, and Apple Health based on the amount of reviews in the app store and which apps our interviewees use. Flo and Period Tracker by GP Apps seem to offer the most features, although most of them are restricted to subscription members only. Additionally, while all the apps collect symptom data, they do not use this data to provide any suggestions to the user. The only app that currently tracks all four phases is Flo, but the tracking of the luteal and follicular phases are minimal, not done automatically, and only accessible with a subscription.
Overall, our competitive audit revealed the lack of free and comprehensive information about women’s health currently in the market. Since most of the apps require paid features, it seems unrealistic to create a completely free app. However, an alternative to a paid subscription could be the option of watching ads to access all the app's features. This would allow for more people to have access to vital health information.
Key: ✅ has feature, 🟠 limited feature, 💲paid feature, ❌ feature not included
Mobile App:
Flo Redesign
Flo Period Tracker & Calendar
Clue Period & Cycle Tracker
Period Tracker by GP Apps
Apple Health
Tracks period symptoms
✅
✅
✅
✅
✅
Accounts for contraceptives
✅
✅
🟠 must input each day taken
❌
✅
Tracks menstrual and ovulation phases
✅
✅
✅
✅
🟠 only predicts next menstruation
Tracks all 4 phases
✅
💲 luteal and follicular phases not automated and require subscription
❌
❌
❌
Provides suggestions
✅
💲provides suggestions based on symptoms, not phases
❌
❌
❌
Provides educational information
✅
💲provides articles/videos
💲offers "tips and advice from our medical experts" and "exclusive science-based articles"
🟠 provides some free articles, but users are unable to search specific topics
🟠 provides 4 articles about cycle tracking
Has a chat or Q&A function
✅
💲access to "health assistant" or Q&A
❌
❌
❌
Incorpates fitness
✅
🟠 users can input exercise, but no suggestions are provided
🟠 users can input exercise, but no suggestions are provided
💲users can sign up for fitness challenges
✅
Incorporates sleep
✅
❌
🟠 users can input amount of sleep, but no suggestions are provided
💲users can sign up for sleep challenges
✅
Incorporates diet
✅
❌
❌
💲users can sign up for diet/weight loss challenges
❌
Incorporates mental health
✅
🟠 users can input daily mood, but no suggestions are provided
🟠 users can input daily mood, but no suggestions are provided
💲users can sign up for meditation and self-care challenges
🟠
UX Flows
After theorizing potential features, I created two potential UX flows. The first flow allows access to information about mood, fitness, diet, and sleep. When the user first enters the app, they are faced with a circle that is usually pink (menstruation), blue (ovulation), or white. In order to increase education about the four phases, this circle will be redesigned to include purple and green circles to indicate the follicular and luteal phases. By offering “Mood”, “Fitness”, “Sleep”, and “Diet” buttons, users are easily able to propagate phase-specific suggestions by whichever category they are looking to most improve.
The second flow utilizes another popular entry point in the app, the calendar feature. This icon provides the user with a visualization of their whole cycle. As previously mentioned, color coding and phase names will be added to the calendar. Clicking filled in days (past days) and outlined days (predicted days) will prompt a “More” option to access phase insights.
UI Sketches
With our flows idealized, we brainstormed different layouts to incorporate our redesigned features by drawing out a few sketches by hand. UI sketching helped us find the right balance between an informative screen and a visually appealing, user-friendly screen by experimenting with how to make certain features stand out. These sketches were inspired by our UX flows and allowed us to mentally visualize how to lay out information and compare the pros and cons of each screen before prototyping.
Low-Fidelity Prototype
After creating UI sketches, we used Figma to make low-fidelity prototypes of our screens. We discussed each screen’s features, such as which button style would best guide the user to click on “Mood”, “Diet”, “Fitness”, or “Sleep” in Flow 1. We also chose to focus on the entry points into the Flo app that we felt were most popular, and thus, would be good options to introduce educational components to improve users’ health. These two entry points are the landing page, or the first screen that appears when opening the app, and the calendar page, which gives the user an overview of their entire cycle.
One of Flo’s strengths is that it represents cycle tracking information as visually as possible. We wanted to follow this design ideal by introducing visual aspects like color coding, filled-in/outlined circles, symbols/icons, and buttons to encourage user interaction. We also used Flo’s pre-existing pages, like “Insights”, to introduce phase-specific information while maintaining the current look and feel of the app.
Flow 1
Flow 2
User Testing
The participants consisted of busy, working people with periods. The participants also included different age groups, with one interviewee being over fifty and the other two being young adults. We first allowed them to navigate the two flows on their own without guidance. They all began by navigating to the center button of the screen and clicking “follicular phase”. We then prompted our interviewees to complete certain tasks such as "Can you try learning about how to exercise during the follicular phase?" and recorded our direct observations of their interactions, as well as their feedback about their experience.
Results
Overall participants liked the simplicity of Flow 1, but the layout and detailed information in Flow 2. While people liked aspects of both, Flow 2 was more popular amongst our interviewees.
One interviewee was confused about what “day ten” meant on the landing page since they view their cycle as five days. In reality the cycle is on average twenty eight days and the length of a period is around five days.
One participant seemed confused at the icons and didn't realize that they corresponded to tracking an activity. For example, they thought the glass icon was encouraging them to drink rather than prompting the user to record an activity.
One participant had difficulty locating the phase insights on the calendar page since the buttons did not jump out at them as clickable.
All interviewees reported that Flow 1 was intuitive and easy to use. In comparison, Flow 2 had much more detailed information and took more effort and time to read.
Next Steps
After conducting user testing, we gained insight on what users had trouble with when navigating the screens, as well as their preferences. Our next steps included adjusting our existing prototypes to combine the easy navigation of Flow 1 and the detailed information of Flow 2.
Strengths
- Abundance of valuable information in Flow 2
- Ease of navigation in Flow 1
- Created excitement in users about learning more about the menstrual phases
Improvements
- Designing more intuitive icons to navigate to calendar page and track symptoms
- Providing information is a more interactive format
- Making buttons appear more clickable
- Clarifying days of a cycle and what they mean
High-Fidelity Prototype
With the strengths and improvements of our low-fidelity prototypes in mind, we created high-fidelity prototypes to bring our screens to life. Starting at the landing page at the very left, users can navigate to the calendar to follow the top flow or navigate to "learn more" to follow the bottom flow. We completed another round of user testing on this new prototype to gain more feedback.
Results
Overall, our user testing resulted in mostly positive feedback. Users enjoyed the useful and consolidated information, but still found both flows interactive and easy to use. We accounted for minor preferences such as light background colors, bright buttons, and rounded rectangles. The biggest piece of feedback was implementing a key to define the colors on the calendar.
.png)
%20copy.png)
