Gu Jian
May 1, 2018 · 7 min read

A UX/UI makeover for the world’s first contraceptive app.


Natural Cycles is the world’s first certified contraceptive app. I have been a loyal user for 4 years. I absolutely love the function of the app and the change it brings to my life. But as a product designer, I see so many ways that the app could improve, e.g. by applying my 5 key learnings from revamping Instabridge (10M+ installations). So here is what I would do if I were redesigning the Natural Cycles app.


This is how the app is used every day: you measure the temperature in the mouth right after waking up. Then you input the data in the app, manually, to see if it is a green day (infertile) or red day (fertile).

The end goal is to give women reliable information about their fertility so they can make behavioural decisions that will eventually have a big impact on their lives. The reliability is dependent on the algorithm, but also on having correct user data. According to research, the algorithm is sound and solid, but there are conditions under which people are not supposed to input their data that day. For example, when you have a hangover, or when you have fever etc. Right now, the rules are explained in many paragraphs of fine print hidden inside a little information button. If the user is unaware of these rules, they might make mistakes that render the final result less reliable.

But this can be improved by design. Instead of a long text, just asking the user “are you hungover?” and “are you sick?” will help the app determine the data quality more accurately. For the users, they just need to report their condition honestly without remembering the rules. Win-win.

Before: the rules of how to determine if the data is valid if the user pressed the little “info” button on the upper right hand corner. After: the user just report their condition honestly and the rest will be taken care of by the app. So they don’t have to remember all the rules on a hungover morning.

Recently, the app received a storm of criticism in the media about the app’s accuracy, because some users got unwanted pregnancies while using the app. As I mentioned earlier, the result relies on both the algorithm and the quality of user data. Even with a perfect algorithm, human errors can still render the result inaccurate, and we all know how hard it is to completely avoid human errors. We can get pregnant because we accidentally scratched a condom with long nails, or we forget to use protection after stomach sickness while being on contraceptive pills.

But this is where design can help the users to reduce human errors, hence making the app more reliable.


First things first, let’s look at the background colour. This is an app used by women first thing in the morning. The strong glow of the white background really hurts the morning eye. So I made the background dark grey, which also helps the red and green colours to stand out.

The glow of a bright white background hurts the eyes in a dark morning bedroom.

When it comes to app product design, it is so much more than bundling together a few webpages. As I can see in the current version, two of the most used screens can be easily and organically packaged into one. It will both have more relevant information at one glance, and will also give users the intended feelings, such as the joy of having a green day, or the frustration of missing a day of data input — this is crucial because it is based on these feelings that the users will fall in love with the app and choose to be more active in measuring and inputting their temperatures.

Unfortunately (or fortunately), humans are really not as rational as we want to believe. Our feelings are normally the real bosses for decision making, which is something extremely important for UX designers to acknowledge and to leverage.

Daily and monthly calendar views combined into one.

With this new design, it is so much easier to have an overview of one’s menstruation cycle and fertility.

3 key features of the new all-in-one overview.
  1. A circular view gives users a lovely UX while underpinning the branding. I always loved the name “Natural Cycles” but found it a shame that it was not reflected more in the design. By making the main view this way, it matches the cyclic nature of the female body and it also reinforces the brand. Besides, it helps the user to have a feeling of how far they have come in a cycle and how far away they are from their next period. Three elements all aligned perfectly: meaning, function and form.
  2. Semi-transparence makes it clear that predictions are only predictions. The current design used a grey circle and a colour dot to indicate “these are only predictions”. In the new design I used semi-transparence so the users will instinctively know it is not something one can trust 100%. It looks elegant this way too.
  3. A little gamification that increases data input: for every day the user inputs temperature, this grey line becomes longer. But when they don’t input data, then it will be a gap. Somehow people just love to have a streak (Snapchat has succeeded with using the same psychological strategy), hence they will remember inputting data to win.

A side note: I do care about the brand colour purple. When users open the app, the first thing they see will be the data input screen, which is completely purple. Besides, all the other views will have purple too, just on this screen too many colours become an overkill and it dilutes the goal of showing red or green days.


I suppose only the women who are actual users can feel this in their hearts — when it is a red day, the screaming red colour makes us feel like there is something wrong with our bodies (a red day means we are fertile, and that is not a “bad” day).

Of course, if the app is used for contraception, the red days do mean that one has to be careful not to get pregnant. So to make it look like a warning sign is the right UX choice. But can we somehow achieve this goal without making the user feel bad?

First, I used a tone that is more friendly. Then I also added a heart and kind words “today, use protection, and still enjoy”. For every one I showed this design to, getting an “awww” reaction back was almost guaranteed.

Friendlier colour tone and message for a red day. It’s not a “bad” day, just need to use protection.


When I design, I always try to abstract a few design principles which I can weigh different options against and make choices. So here are four principles I identified for designing Natural Cycles and what they mean:

  • Reliable: This is a given for a contraceptive app.
  • Scientific: Respect data and reward users for their efforts recording data.
  • Smart: Predict, facilitate. Try to burden the users as little as possible.
  • Lovable: To get those “awww” reactions. After all, when a user looks at this app, she is looking at her body. There is a relationship, and we want that relationship to be good.


I think one feature that Natural Cycles could communicate better is that the app doesn’t work in a binary way like the pills do, where if you miss one day then you can’t trust it anymore. Actually, if you miss some days with the app, you will only have fewer green days, but the app is still useful.

On a higher level, I think one of the most powerful branding stories Natural Cycles can tell is to make women feel completely shame-free about their bodies. Menstruation is a natural function of the female body. But somehow through history and across cultures, it comes with so much misunderstanding and so much shame. Natural Cycles is in a position to properly educate women about their bodies and also rewrite the shame story — the monthly flow is not something we need to hide, it is a celebration of life. We love our bodies and we want to treat it in the best way possible. Admittedly, there is no better way to treat the body than the natural way, completely free of artificial hormones.

I hope you enjoyed reading this article. I’d love to know what you think and how you feel about my redesign. You can leave comments to me below. If you know any Natural Cycles users, I’d appreciate if you share this with them so I can hear their views. If you want to know more about me, you can read more on my website at

Thanks to Fredrik Olovsson

Gu Jian

Written by

Gu Jian

The “Swiss army knife designer”: product, UX/UI, interior, personal style, life.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade