A LITTLE BACKGROUND

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 (100M+ installations). So here is what I would do if I were redesigning the Natural Cycles app.

1: EYE ON THE END GOAL

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.

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 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.

2: HOLISTIC APP DESIGN APPROACH

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.

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.

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

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.

3: DESIGN FOR EMOTION

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.

4: DESIGN PRINCIPLES

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.
  

5: TELL A POWERFUL BRAND STORY

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.

Read more:

• WHAT PRODUCT DESIGN MEANS TO ME – The 5 key learnings, which are applied here in redesigning Natural Cycles, from revamping Instabridge and reaching its crucial first million downloads
  

• THE FULL INSTABRIDGE STORY (LONG READ) - A detailed and honest story about the Instabridge journey: the challenge, the approach, the solution, the reflection...