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 ran surveys with friends and family 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 ran surveys with friends and family to see if this knowledge gap was as widespread as we thought. (Spoiler alert: it was!)
02
Week 2—Research & Analysis
We conducted surveys via Google Forms, asking about menstrual cycle knowledge, tracking methods, and lifestyle. We organized responses using an affinity map on Miro, which helped highlight key issues in the tracking experience for our redesign. From the survey pool, we selected candidates for in-depth interviews focused on our problem space.
For secondary research, we used white paper methods and analyzed competitor apps (excluding Flo Health). I led the competitor analysis. Each team member did individual research, and we shared findings over Zoom. The affinity map was a collaborative effort.
For secondary research, we used white paper methods and analyzed competitor apps (excluding Flo Health). I led the competitor analysis. Each team member did individual research, and we shared findings over Zoom. The affinity map was a collaborative effort.
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.
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.
