[UX] Women’s Health Tracker

Project overview
This is my first ever UX project and I chose something that I always found annoying to do: tracking menstrual period. It’s something that seems trivial (just another calendar app) but once something is amiss, these records can be important. I mean does anyone remember this back in 2014? https://www.theverge.com/2014/9/25/6844021/apple-promised-an-expansive-health-app-so-why-cant-i-track

Key considerations

  • App needs to be inclusive for people of different gender and sexual orientations (Epstein et.al, 2017)
  • People have different purposes: tracking to remember their period, for health reasons, to communicate with their doctors, or to find out the best days to conceive
  • People are in different life stages and have different needs.
  • Calendar predictions are based on models and sometimes the model predicts wrong dates. Need to have robust models but more importantly, flexibility in changing the dates too (Worsfold, et.al., 2021)


  • Make recording of period symptoms and mood simpler
  • Make understanding of menstrual cycle easier for anyone with experiences period

User persona
A mid-20 student who has regular periods and is motivated to keep track of period symptoms and dates. The student wants to understand what different terms actually mean, hopes to find out what others are going through also, and to seek advice if her period delays or anything like that happens. She is tech-savvy, does not want to spend so much time figuring out how to use an app so a simple intuitive design is necessary for her.

Home Screen

Home screen
The home screen mainly shows the current date, the number of days left before the next cycle as well as the next fertile date. It is meant to give users a quick summary of the key dates to note. When the user presses it, the app will be redirected to the calendar screen. The scroll function for Articles and Forum show the hot topics and once clicked, the user will be redirected to a different page.

Instead of adding illustrations of women, I opted to include just names to ensure users of all gender and sexual orientations who experience menstruation feel comfortable using the app.

Calendar Screen

Calendar Screen

This screen shows the current month view, the current date (in yellow circle), period and ovulation dates. Ideally, they should be adjustable to create flexibility for users who have irregular menstrual period or may be taking various birth control pills that affect the cycle.

When the question mark icon is clicked, users will be redirected to the Insights screen where they can browse various related articles or participate in forum discussions on relevant topics.

Log screen

Log screen

A simple log screen, this allows users to track their menstrual flow, their mood for the day and select any symptoms they may have. Hopefully the simple hover-and-click rating system and the drop-down buttons would make it easier for users to track their day.

Insights screen

Insights screen

This screen consists of a Forum and Articles segment where users can discover more insights on menstrual cycle and health in general. This helps meet the needs of users from various demographic groups as they may have differing needs. If you browse through the Figma prototype, there are also hyperlinks for users to access reliable information.

Figma prototype can be found here. Best viewed on desktop

Duration: 2 – 4 weeks (including multiple breaks as I was revising for examinations and working, picking up the basics and researching)

Lessons learnt
1. To always research first before diving into the product. Understand what people really want.
2. Always do wireframing even if it is a basic sketch.
3. Experiment. Experiment. Experiment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s