Flo Health Redesign
Class Project - an application redesign empowering women with insights on menstrual cycle phases for a more comfortable daily life.
As part of my Design and Interaction coursework at UC San Diego, my team was tasked with addressing a need for non-college students. We chose to explore women’s health, focusing on menstrual cycles—a topic we related to through personal experience. After researching cycle phases, we interviewed users to gauge their understanding, designed solutions, and completed usability testing within three weeks.
Problem
How might we support women who want to have a smoother experience throughout the month?
Outcome
We added features to Flo and redesigned part of the user experience and branding to facilitate finding the information they currently lack with the current Flo app experience and many current period tracking experience.
Role
Product Designer & Researcher
Timeline
8 weeks
Team
1 Designer
3 Researchers
Concept, research, redesigns & user tests in 8 weeks
This project was an incredible learning experience, as I was able to create a solution for a women's hormone health knowledge gap with my team of researchers and designers at UC San Diego. In just 8 weeks, we came up with the idea, conducted interviews and research on the subject, wire-framed, designed, and conducted proper user tests to ensure a quality redesign that meets and exceeds user needs.
01
Week 1—Concept & Research
A few weeks before this project, I saw a TikTok about the four phases of the menstrual cycle and was shocked by how little I knew. I’d always assumed the menstrual phase was the whole story. That moment led me to dig deeper and share what I was learning. Suddenly, symptoms like brain fog, fatigue, energy bursts, and motivation shifts made sense.
When I brought the idea to my team, they were just as unaware. That's when we knew we had a golden idea on our hands, so we interviewed women we knew to see if this knowledge gap was as widespread as we thought. (Spoiler alert: it was!)
When I brought the idea to my team, they were just as unaware. That's when we knew we had a golden idea on our hands, so we interviewed women we knew to see if this knowledge gap was as widespread as we thought. (Spoiler alert: it was!)
02
Week 2—Research & Analysis
First, we used screening surveys to find women that fit our target user audience. Once qualified we conducted user interviews, where we asked participants about their general menstrual cycle knowledge, methods they utilize to track their cycle, and other information about their lifestyle.
We organized our interview data using Google Forms to visualize the data in charts, then we synthesized our findings by creating an affinity diagram on Miro. This helped us identify key UX problems to solve.
We continued by conducting additional (secondary) research, in which we utilized the white paper research method and conducted a competitor analysis between competing menstrual health apps. I was in charge of the competitor analysis, while my teammates conducted most of the white paper research.
We organized our interview data using Google Forms to visualize the data in charts, then we synthesized our findings by creating an affinity diagram on Miro. This helped us identify key UX problems to solve.
We continued by conducting additional (secondary) research, in which we utilized the white paper research method and conducted a competitor analysis between competing menstrual health apps. I was in charge of the competitor analysis, while my teammates conducted most of the white paper research.
03
Week 3—Visual Design & Brand Identity
With the mid-fidelity designs in place, I finalized the color palette, typography, icons, and logos for the MVP. This was an iterative process where I explored multiple UI library variations, refining them based on feedback. Through continuous collaboration with the founders, we identified the perfect visual direction to align with the product’s goals and brand identity.
04
Week 4—High-Fidelity Prototypes
Once the branding elements were finalized, I created high-fidelity mockups and interactive prototypes of the MVP screens using Figma. To ensure usability and effectiveness, I conducted four usability tests, gathering feedback to refine the designs. After implementing necessary adjustments, I delivered the final designs, completing the project with a user-centered and visually cohesive product.
User research
results & findings
Given the quick turn around, we conducted a competitor analysis and interviews with various physicians. Here are the results:
87 %
of the survey takers complained about standard EHR systems being difficult to navigate to access relevant patient medical history.
ER physicians are currently using outdated systems that often slow down the process of gaining insight on a patient's previous medical history due to user experience issues such as information overload, bad interaction design, and slow information retrieval.
85%
of the survey takers agree that it is easy to overlook patient information with the design of some of these platforms as information is not easy to find.
ER physicians say that they may have missed patient history information to provide the most accurate diagnosis in the past due to the lack of organization in current EHR systems that their hospitals use.
Feature #1
AI Patient Summary
0
ER physicians best familiarize themselves with a patient by reviewing a concise summary of their medical history and current symptoms. ChartER uses AI to analyze this information, delivering an accurate and efficient summary for quick assessment.
.png)
Feature #2
Cited Document Locator
0
Patients in the ER often struggle to provide complete medical information due to their condition, so I designed a centrally located document finder to enhance the AI-generated summary, giving physicians quick access to cited records such as past labs, scans, and visit summaries for ease of access and visibility.
Feature #3
Trend Charts
0
While summaries give doctors a quick overview, supporting them with raw data reveals important health trends. I designed a dashboard section with visual charts from past visits to help ER physicians spot patterns and make informed treatment decisions.
Feature #4 & #5
AI Workup Suggestions & Dynamic Treatment Plans
0
In a fast paced ER, ordering the right tests can be challenging and error prone. To address this, I designed an AI feature that suggests only the most relevant workups, reducing unnecessary testing and easing patient stress.
I also created a treatment plan feature that updates in real time as new data becomes available, ensuring care remains accurate and adaptive.
Together, these features support a holistic, informed, and efficient approach to patient assessment, which is crucial in emergency care settings.
I also created a treatment plan feature that updates in real time as new data becomes available, ensuring care remains accurate and adaptive.
Together, these features support a holistic, informed, and efficient approach to patient assessment, which is crucial in emergency care settings.
Feature #6
ER Status Dashboard
0
In a busy ER, it’s hard for doctors to track patient flow without leaving their workspace. To solve this, I designed an ER Status Dashboard that gives a real-time view of all checked-in patients—their symptoms, status, and workup progress. This helps doctors stay organized, prioritize urgent cases, and deliver faster, more efficient care.
End-to-End App Design from scratch
0
Designing this from scratch was challenging yet fulfilling for me. It was cool to work with physicians in the emergency room field to learn about what they need most in an EHR and how we can improve patient care using AI.
Final designs and prototype
0
Here is the final prototype, hosted on Figma. I did 4 usability tests to make sure everything was intuitive and working perfectly.
