The Period Tracking App that Nobody Thought of Making

Published in

Product Soup

6 min readJul 27, 2016

I’ve been using LoveCycles (now Maya) for more than 3 years now, and like everyone I downloaded it for the simplicity and the beautiful UI.

I recently noticed that the period tracking apps space has grown a lot since I first installed LoveCycles. So I downloaded some of these apps, and put down some thoughts and ideas around what Maya could do better.

Disclaimer: This is my first attempt at designing / animating an interface. It may be crude or amateurish and it doesn’t really fit in with Maya’s current design language and vocabulary. This is also not a critique of the app, which I’m a fan of. These are ideas around features I discovered in similar apps that I think Maya could benefit from.

Thoughts

One Size Fits All

I am sure smartphones now feature in Maslow’s hierarchy of needs. We live in an age where my 9 year old nephew teaches my 55 year old mother how to book movie tickets online. The ticketing app needs to be simple enough to be used by both my nephew and my mother, and at the same time be smart enough to recognise that they are two different users with different habits and preferences that it needs to adapt to.

Maya’s users can range from teenagers to women struggling with menopause, and yet Maya says the same things to all of them. There are subtle differences in user expectations and behaviour depending on whether they are avoiding pregnancy, trying to conceive or just tracking their cycles.

Possible Solutions:

Multiple Apps: Some app studios have different app listings for different types of users (fertility and ovulation tracking, sex positive girls and pregnancy). Pregnancy is a completely different domain with different requirements. Separate apps result in some redundancies shared across both, and it’s difficult for users to switch between the two if their goals change.
User Modes: Users can switch between avoiding pregnancy, trying to conceive and general well-being. The app adapts according to these user goals, including customising vocabulary (e.g. unsafe vs fertile), notifications etc.

Design and Interface

Interactions

There are 3 ways in which a user can interact with the dates on the calendar:

Double-tap logs sexual activity, mood etc.
Long-press marks the beginning or end of menstrual flow.
Single-tap just shows the phase of the cycle on that day (Safe, Unsafe, Fertile or Flow), which can also be deduced from the colour the date is shaded in.

These interactions aren’t intuitive, but are discoverable in a help screen.

Possible Solutions:

Prominent Help Text reminding user what each interaction does
Intuitive Interactions, including a clear primary action button

Information

Adaptiveness: Different information is relevant in different phases of the cycle. Some information is relatively more important.
Labels and Legends: The calendar lacks an easily accessible legend showing what each colour means. Some icons are missing labels in screens not shown here.
Graphical / Visual Info: The information I need most immediately is hidden behind taps and in multiple screens. The entire month’s calendar is probably not the best way to visually present this information.

Possible Solutions:

Show important information that adapts to the phase of the cycle. For examples, see my Menstrual Cycle Matrix below.
Even emojis aren’t universally interpreted the same way around the world. Facebook dropped the yay reaction because people were confused about what it meant. All icons should have labels, and the calendar should carry a legend for colours in the help screen.
There are multiple innovative ways other apps use to graphically show information. I’ve compared some of them below.

Monetisation

The app has a premium version, but the incentives to pay are limited, and there are no ads to monetise free users.

Possible Solutions:

More Premium Features and less free features like history on the cloud, backup and restore, share with partner etc. One-time payment won’t be a steady, sustainable source of revenue though.
Subscription Model but most competitors offer free apps, so it’s hard to sell.
Sponsored Content: Maya has unique access to the women’s health market. Promotional material for sexual well-being and menstrual health brands can be shown at a cost. Promotions can be targeted according to different user segments and timed for phases in cycle. For examples, see my Menstrual Cycle Matrix below.

Ideas

I looked at a few apps in the marketplace to understand how they differ and why. Some market themselves as simple period trackers, others offer insights and forums to engage the audience. A loading screen message in Glow succeeded in wowing me — Magic and Science at work.

As I sat down to think what would be the simplest and smartest way to present relevant, useful, engaging and actionable information to users, I realised that the most important information, the primary action button text, tips and sponsored content need to adapt to user goals and phases of the cycle. I put this in a chart that I call the Menstrual Cycle Matrix.

What could be the best way to visually depict the current status in the cycle?

I thought of several examples of how we can show all 28 days with the current status in the cycle. I drew a few rudimentary wireframes to illustrate my ideas. The goal was to show information in a minimalistic and visually intuitive way while keeping things simple.

The Progress Bar

This is a linear chart to depict where each day is placed in the phases of the cycle. A pointer with the current date marks the progress through the cycle.

The problem with this design is that it doesn’t fit horizontally on a mobile screen without wasting a lot of space. A vertical implementation could work though.

The Circular Cycle

It’s called a Menstrual Cycle after all. Medical guides use the above format. The phases can be colour coded.

While the cycle is circular, time is linear. This makes it difficult to show dates on the circle cutting across 2 cycles without confusing the user. Historical cycles are also hard to depict here.

The Slider

A date slider that’s is colour-coded by phase adheres to the linearity of time, but it’s hard to show a complete cycle using that. Users would have to switch to the calendar to see their menstrual history.

Circle + Slider

The slider emphasises the current date and the circle shows the current state and phases. The current date is highlighted in the same colour as the current phase. The user can slide through the dates or even drag the arrow around the circle.