Natural cycles Redesign

A little background

Natural Cycles is the world's first certified contraceptive app. I have been a loyal user for 3 years. I absolutely love the function of the app, but as a product designer, I see so many ways to improve the app big time, both look-wise and experience-wise. So here is what I would do if I were revamping the product design.



This is how the app is used every day: you measure temperature right after waking up every morning using a thermometer in the mouth. 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 will make decisions in behaviour which will eventually have a big impact on their lives. The reliability is depending on the algorithm, but also depending on the 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 hangover, or when you have fever etc. Right now, the rules are explained in many paragraphs of fine text hidden inside a little information button and that can make it easier for the users to make mistakes, hence rendering the final result less reliable. 

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

 Different ways to help users determining which data can be trusted.

Different ways to help users determining which data can be trusted.

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 honesty 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 rely on both the algorithm and the quality of user data. Even with perfect algorithm, human errors can still render the result untrustworthy, and we all know how inevitable human errors are. 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 come in to help the users to reduce human errors, hence making the app more reliable.  


First thing first, the background colour. This is an app used by women first thing in the morning. The strong glow of the white background really hurts for the morning eye.

So I made the background dark grey, which helps the red and green colour to stand out as well. 


When it comes to app product design, it is so much more than bundling together a few webpages. As I can see on the current version, two of the most used screens can be easily packaged organically into one. It will not only have more relevant information at one glance, it will also give users the right 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 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. 

app design.png

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

 A closer look of the main design. The 3 points are explained in detail below.

A closer look of the main design. The 3 points are explained in detail below.

  1. I always loved the name “Natural Cycles”. Finally, it has a design that reflected the name and also the cyclic nature of the female body. It also helps the user to have a feeling 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. Prediction for the next few days. When the colour is semi-transparent, users instinctively know it is not something one can trust 100%. It looks elegant this way too.
  3. A little gamification: 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 over kill and it dilutes the goal of showing red or green days. )



I suppose only females who use this app every day for real can feel this in their hearts – when it is a red day, the screaming red colour makes me feel like there is something wrong with me ;(  A red day means I am 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.

red days.jpg



  • Reliable: For Natural Cycles, this is a given.
  • 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 bodies. There is a relationship, and we want that relationship to be good.


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 artificial-hormone-free.  



Read more: