Cycle Syncing App
This project was for an original app design that helps menstruating people find meal plans and exercise routines that align with their menstrual cycle phase, to better support their health. This project utilizes user research throughout the design process to create a helpful tool.
My Role:
Sole UX/UI Designer
Project Duration:
February - March 2024
The Problem:
Many menstruating people want to feel more in tune with their cyclical hormonal shifts but don't have the information or tools. Lots of menstruating people don't have any knowledge about their hormonal cycles to even know that this is something affecting them.
The Goal:
This app serves to inform menstruating people about their bodies' monthly cycles and to offer practical ways to live in sync with where they are in their cycle.
Understanding the User
User Research: Summary
I began by conducting user research through collecting anecdotal evidence about the experience of menstruating people and their cycles. I identified common issues, frustrations, and knowledge gaps between all the participants in order to better address user needs.
User Research: Pain Points
1
Lack of Knowledge
Many participants didn't realize how much their hormonal levels change throughout the month, not just during menstration.
2
Health
Many participants stated that they wanted to better support their health throughout their cycle, but didn't know the best way to do that.
3
Food
Those who had heard of cycle syncing were curious about what foods would best support them at each point in their cycle and wanted an easy way to remember what to focus on.
User Personas
Problem Statement
Elizabeth is a busy engineer who needs an easy way to learn about cycle syncing and fit it into her life because she doesn't have time to research and develop new routines for herself, but wants to better care for her health.
.png)
Problem Statement
Sky is a health-conscious author who needs a way to organize their cycle syncing plan because they're excited to care for their health this way, but have struggled to stick to a plan.
Competetive Analysis
I researched several period apps and nutritional food blogs to make comparisons with the user needs presented.
​
I found that some period tracking apps have started suggesting how the user might feel based on where they are in their cycle, but not much more information was given. On a blog site, meals were categorized by cycle phase, which was a helpful tool. The one period app that focused on cycle syncing had 1.5/5 stars in the Play Store, with users citing that it was unusable and not synced with their cycle.
​
This research has helped me further identify a major gap in the menstrual care field. I have identified elements that were helpful that I will include as well as elements I will definitely want to improve.
Starting the Design
Wireframes
I began the design by doing a "Crazy 8s" exercise to ideate. I then used those ideas to create paper wireframes. Once I felt confident in my initial design, I created low-fi wireframes and a prototype.
%20(1)_gif.gif)
Refining the Design
Iteration
After developing low-fi prototypes, I conducted a usability study to identify any gaps in my design and find room for improvement before moving to higher-fidelity prototypes.
Research Insights
1
Education
Users were interested in more than just the practical implementations of cycle syncing; they also wanted to learn more about what each phase meant.
Before
.png)
Before
2
Daily View
Users were confused on if the home page was for the week or for today. They also wanted a way to see upcoming and previous days without navigating to the weekly overview.
3
Preview
Some users commented that they wished the home page had a preview on what the food/exercise plan was before clicking that category.
After
1.png)
After
UI Sticker Sheet
Mockups
Using the findings from the usability study and Gestalt principles, I created high-fidelity mockups for the app.
Prototype
Finally, I created a high-fidelity prototype.
Summary
Accessibility
1
High Contrast
All color choices were tested to ensure they exceeded the contrast requirements based on WCAG guidelines.
2
Clear Text
Text was formatted in a simple, straightforward manner to work optimally with screen readers, inlcuding through the use of clear headings.
3
Inclusive
No gendered language was used, making this app accessible to all who menstruate.
Impact
This app is filling a huge gap in the market of menstrual health. People who want to better lean into cyclical living are missing key resources, and this app helps them access health information more easily. This project aligns with the needs users expressed to help more people care for their bodies in a well-rounded, inclusive, positive way.
Takeaways
I really refined my UI skills in this project. I pushed myself to think beyond my go-to design choices and found that I was happier with the results when I pushed myself into more creative territory. I felt a lot more confident in the final polish of my designs than I had on previous projects. This was also another great opportunity to listen to user research and let that guide my ideation. I am grateful for the chance to improve as a designer.