Metra is a menstrual cycle tracking app that is intuitive and gender-inclusive. With Metra, users can customize their tracking options, track symptoms, and take notes about their cycle and general health and wellbeing.
Design a period tracking app that is inclusive of the experiences of non-cisgender individuals who menstruate
UX Design, Branding, Visual Design
Sketches, Wireframes, Logo, Style Guide, High-Fidelity Mockups, Interactive Prototype
Sketch, InVision, Maze, UsabilityHub
Billions of people worldwide menstruate, but digital tools for menstrual cycle tracking leave a lot to be desired for many users. The experiences of transgender, non-binary, and gender nonconforming individuals in particular are often overlooked. Existing products predominantly center the experiences of cisgender women who menstruate. As a result, they often make assumptions about user goals or behaviors that can be alienating or cause feelings of dysphoria for users who do not identify as cis women.
Metra is a gender-inclusive cycle tracking app that gives users the option to customize their cycle tracking experience to meet their own unique needs. Metra doesn’t make assumptions about users based on their presumed gender identity and addresses the need for a customizable digital tracking tool for anyone who wants to record data about their cycle.
To kick off this project, I conducted a survey to learn more about users’ current and past experiences with existing cycle tracking apps. I distributed the survey through Instagram, Slack, and Facebook and received a variety of responses from women and non-binary participants. The survey revealed that user priorities when it comes to tracking apps include simplicity and an ability to customize the product to meet their needs.
After gaining some insight from the user survey, I conducted a competitive analysis of four existing menstrual cycle tracking applications: Clue, Flo, Groove, and Period. All four apps give users the ability to track their periods, but they differ significantly in the number of users they reach and the features they offer.
Despite the prevalence of period-tracking apps, I believe that a new competitor could find success in the market with a focus on inclusivity and the right combination of features. A new app should take into account the varied experiences of people who menstruate and should acknowledge this diversity of experience with more customizable features.
The information gained from the survey about users’ habits and experiences informed the creation of three personas that are representative of potential users’ goals and frustrations with period tracking apps.
Next, I wrote out user stories that represented the features that users expressed a desire for in a cycle tracking app.
I prioritized the stories based on information learned from the user survey, and came up with 5 high priority stories that represented the core features of the project’s minimum viable product.
As a new or returning user, I want to...
• create a secure account
• track menstrual flow
• customize which symptoms are tracked
• make a note about my period, symptoms, or general wellbeing
• review symptoms from a previous day or cycle
With user stories defined, I sketched user flows to represent all of the high priority user stories to be included in the MVP of a new menstrual tracking app.
I began wireframing by sketching out screens that represented all of the high priority user flows. Many screens had a few different iterations in the initial sketches in order to visualize different layouts for the main app screens.
Digital Wireframes
To get some initial feedback on the navigation of the app, I created a usability test with Maze. Ten participants tested the following tasks:
1. Signing in to an existing account
2. Tracking symptoms
3. Viewing notes
4. Viewing custom tracking options
Test results indicated that testers found the main dashboard unclear, so I reworked the design to include a more familiar calendar layout before creating mockups of the design.
After creating my initial wireframes, I was excited to develop a brand identity for the unnamed product. I began to brainstorm names; I wanted a name that was meaningful without being overtly feminine. I began with a mind mapping exercise, and then turned to Google for some help narrowing down a name for the product.
I landed on Metra, a lesser-known synonym for uterus or womb. I discovered that it is also a word used as a unit of measurement in Ancient Greek. With its direct but discreet connection to measurement and the womb, Metra felt like a natural choice for a cycle tracking app.
The Metra brand is calming, clean, and relaxed, since menstrual cycles can be a stressor for many people. With the goals of the product and brand characteristics in mind, I created a moodboard to help inspire the visual design.
I sketched and then digitized some logo ideas. I liked the idea of using a circle as a motif in the design because of the cyclical nature of menstruation. I also liked the idea of using a moon in the logo because many people associate the menstrual cycle with the lunar cycle.
I approached the color palette carefully. Many period tracking and fertility awareness apps rely on a color palette that is full of pinks and pastels. There’s nothing inherently wrong with that, but I wanted to err on the side of something more neutral that would appeal to a broad range of users. I found inspiration in the nonbinary and genderqueer pride flags, and chose a palette based on purple (which is present in both flags), with green and yellow accents.
The typeface used throughout the app is Lato, a humanist sans serif typeface that works well with the welcoming vibe of the brand.
With a brand identity and product name in place, I created high-fidelity mockups that represented all of the high priority user flows of the MVP and took into account feedback from the first round of usability testing.
After conducting a second round of usability testing, I made some adjustments to the mockups and created a final prototype in InVision.
Designing Metra was a challenge and a learning experience for me. I set out to design a cycle tracking app that would center the needs of trans and non-binary users, rather than addressing them as an afterthought. I realized that I had a lot to learn about people’s experiences with periods, and my research led to some significant changes to my original conception of the project. Initially, I thought of it as a period tracking app, however I came to understand that a tracking app could be helpful for individuals who experience symptoms of a menstrual cycle but don’t have a period, which is fairly common.
In the future, I would like to add more features to the product that were not included in the MVP. These would include more customization options, and a pregnancy/fertility awareness mode that is not female-centric or heteronormative for users who are pregnant or trying to conceive.
