There are plenty of cycle-tracking apps. Most of them do basically just that and leave people to figure out the rest of their health on their own. In addition, a number of these apps tend to refer to users as if they all identify as women when there are multiple genders who menstruate. These were my motivations to design concepts for a cycle tracking app that solves these problems.
Users
Menstruating people who are interested in supporting their cycle by optimizing their health with natural solutions.
Role
Design and research as a part of a self-led personal project.
Goal
Create an app for menstruating people who are interested in a scientific approach to tracking menstruation and getting health advice.
Discovery
Femtech + Facts
People who menstruate often face significant challenges in accessing adequate healthcare advice, particularly related to menstrual health.
Studies have shown that many healthcare providers lack sufficient knowledge and training in menstrual health issues, leading to misdiagnosis, inadequate treatment, and even dismissal of patients’ concerns. Additionally, systemic biases within the medical community can contribute to the underprioritization of menstrual health research and the development of effective treatments. This disparity in care can have serious consequences for individuals’ physical and emotional well-being.
Femtech, a burgeoning field of technology focused on menstruating people’s health, offers a promising solution to this problem.
By providing accessible, personalized information and tools, femtech can empower individuals to better understand and manage their menstrual health. Femtech apps and devices can help track menstrual cycles, predict symptoms, and provide guidance on reproductive health issues. This increased access to information and resources can help bridge the gap in healthcare and ensure that the needs of people who menstruate are adequately addressed.
29% of women say they’ve felt dismissed by a healthcare provider
72% of women say they’ve experienced medical gaslighting
11% of the National Institutes of Health research funding is allocated to the study of women’s health
Women fill just 25% of leadership positions in the the pharmaceutical industry
Research + Experience
Part of my process was using well-researched charts like this one that I recreated for the app. I have a version of this saved in my healthcare notes that are buried somewhere in my personal Notion docs. Navigating to it to reference on a regular basis is clumsy and it obviously doesn’t sync with the cycle tracking app I use, Clue.
This brings me to my next part of research which is my lived experience. I have slowly done the work to learn what is happening in my body over the past 5 years. It breaks my heart that so many people are left to just think that health issues like the emotional rollercoaster called Pre-Menstrual Syndrome (PMS) is just a part of life.
If you’re also struggling with menstrual health issues, I highly recommend the book Woman Code by Alisa Vitti. Her company also offers a cycle-syncing membership but it is quite pricy.
Terminology + Stigmatism
Did you know that using the term “period” to reference menstruation is kind of a euphemism to avoid the taboo topic. The stigmatization of the word “menstruation” can have significant negative impacts on the health and wellness of people who menstruate.
You will notice my post and the app itself does not use the term “period.” By challenging the stigma surrounding menstruation, we can help create a more inclusive and supportive environment for people who menstruate. This can lead to better health outcomes and a greater sense of well-being.
Inclusivity FTW
Did you know that menstrual cycles are experienced by more than just girls and women? That’s right! Many genders can menstruate, including people who identify as trans men, non-binary, intersex, or genderqueer. This was key in my UX writing work while designing this app.
I also kept this in mind when selecting colors. The brand is a combination of the 4 colors that represent each cycle. Though the menstrual phase features a lot of pinks, this is the tinted blood red that allows for color variations and visual accessibility.
Design
Design Elements
Overall, the design feel I was trying to evoke was “Soft Science.” I didn’t want the app to feel clinical because menstrual health is almost a bit of art mixed with science.
The design of the walk-through currently features illustrations from Humaaans‘ collection, though I hope to do some custom illustration in the future.
Most interactive elements are using a warm gray. Colors beyond that are strictly used for representing each phase to give the app a very immersive feel that slowly shifts day to day.
Primary interactive elements are also kept towards the bottom half of the screen. I also imagined the cards on the Home interface could be swiped left or right to quickly toggle between Info, Guide, and Track.
Splash Screen + Walk-Through
To onboard users, they must first fill in their recent menstruation history to base all the cycle content on.
I skipped the account creation flow but that would occur here as well. I do think a simple and largely anonymous onboarding process is key in order to prevent users from feeling like they’re medical history is being shared without anything in return.
Primary Cycle Sections
The “Info” card features static details about the chart above. New users might need to reference this information of a regular basis while experienced users will eventually memorize the details.
The “Guide” card features targeted advice to users based on the active phase.
The “Track” card allows users to view, add, or edit symptoms they experience each day, including menstrual bleeding which the entire cycle is then modified to.
Changing Phase Themes + Content
The “Guide” card updates depending on the active phase and is divided into nutrition, movement, and activities.
There are so many upsell opportunities that could benefit the users, like additional scientific explanations, recipes, workout plans, and lots more content.
As the user advances through their cycle day by day, the background color changes according to the current phase to create a more full experience.
Calendar + Smart Tips + Profile
Users have the option to view and toggle through each calendar month with their estimated phases at a glance.
Using this info would be great to plan activities or vacations according to your cycle.
Selecting a specific day in the past reveals the user’s “Added Symptoms” which would be helpful when recounting medical history in a healthcare appointment.
On the “Smart Tips” screen, users will get a list of recommendations based on frequently reported issues and the phase they occurred in. This is especially key for symptoms like migraines which can be triggered by vastly different issues depending on the cycle phase they occur in.
Track Symptoms via Widget
With the addition of a homescreen widget, users can add or edit their symptoms quickly and efficiently.
Tapping Track opens up the app to the “Add Symptoms” screen. A list of common ailments during that phase plus previously selected symptoms appears. Users also have the option to search for additional symptoms. And there is an option to add additional notes for context.
I would love to add a feature that allows users to download and send a summary of health issues tagged by date and cycle day to their healthcare provider. This could be an upsell feature or a tie-in to a virtual doctor service.
Final Thoughts
Once again, I have struggled to keep a personal project limited in scope to focus on developing UI for just one or two tasks. I truly love to think about all the UX design features that would solve a problem, what is feasible in an MVP, and the UI designs to support them. I will continue to refine the UI elements, including elements like custom illustrations. I’d love to know what you think about this app concept too!
