Designing a more inclusive period tracking experience for iOS
View Prototype

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

How might period tracking apps be more inclusive of the experiences of non-cisgender people who menstruate?

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 high-fidelity mockups
Enable users to customize the experience to meet their unique needs

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.

Exploring users’ experiences of existing menstrual cycle tracking solutions

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.

View Survey Results

What are the strengths and weaknesses of existing menstrual cycle tracking apps?

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.

View Full Analysis

Using research insights to define user personas, stories, and high-priority flows for a new menstrual cycle tracking app

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.

View All Personas
High-priority menstrual tracking features determined by user research

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

View All User Stories
User flows representing MVP user stories

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.

Menstruation tracking flow
View All Flow Diagrams

Sketching layout ideas, creating digital wireframes, and testing the menstrual tracking app’s structure with potential users

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.

Initial dashboard sketch
Initial wireframe sketches of the account creation flow and main user dashboard

Digital Wireframes

Digital wireframes of the user dashboard and symptom tracking flow
Dashboard digital wireframe
View Wireframes
Usability tests to identify issues in app structure and navigation

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

Heatmap showing where testers attempted to interact with the design

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.

View Lo-Fi Prototype

Creating an inclusive brand identity to appeal to a broad range of users by naming the app, designing a logo, and determining color palette and font styles

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.

Menstrual cycle tracking app mindmap

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.

Metra moodboard

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.

Metra logo sketches and final logo 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.

Logo sketches
Final logo design
A color palette inspired by nonbinary and genderqueer pride flags

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.

Choosing a typeface that conveys the brand characteristics

The typeface used throughout the app is Lato, a humanist sans serif typeface that works well with the welcoming vibe of the brand.

View Full Style Guide

Designing high-fidelity mockups, conducting a second round of usability tests, and creating an interactive prototype of the Metra MVP using InVision

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.

Mockups show the cycle history screen empty state and the user dashboard filled with data
The dashboard displays user data from the current cycle
Day detail view shows a summary of tracked data
Interactive prototype of the Metra MVP

After conducting a second round of usability testing, I made some adjustments to the mockups and created a final prototype in InVision.

Metra MVP final app screens
View InVision Prototype
Project reflections and learnings

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.

View More Of My Work
Mail icon
LinkedIn IconInstagram IconBehance Icon