Clue app onboarding – Susi Vetter

Clue is a menstrual cycle tracking app with over 12 million monthly active users.

Clue lets people know when to expect their period, and gives them insights about their reproductive health.

Since its release in 2013, it has a fast-growing base of devoted users.

Client

Clue
(while employed at Clue)

Role

Lead Product Designer

Platforms

iOS, Android

The problem

When a user opened Clue for the first time, they were asked for information about their menstrual cycle.

These screens had a relatively high drop-off rate, so we wanted to learn why—and improve the experience accordingly.

We also wanted to use this opportunity to give the onboarding flow a brand refresh. The Clue brand had changed significantly since the onboarding flow had last been touched. We were aware of its importance: onboarding screens are a user's first point of interaction with Clue. We wanted to make it a coherent, delightful experience.

The team: We worked in a full stack cross-functional team. I took the project over at an early stage and served as product designer. We also collaborated closely with the Brand and Content teams.

Research

Stats analysis

Once we started looking closer at the drop-off numbers of the onboarding flow, we learned that there wasn’t a specific screen that drove users away. It was a gradual drop-off throughout the flow.

User research

From user surveys we learned that above all, users need customization. The user wants the app to be tailored to their individual needs—for example, tracking cramps, or trying to get pregnant.

Competitor research

In parallel I researched competitors' onboarding flows. Most of them were 5-6 screens shorter than ours.

Retention throughout the app onboarding

Hypothesis

If we provide a short and concise onboarding flow that leads the user to a more customized experience, we will achieve higher retention.

1

Cut down
existing flow

2

Implement

3

A/B test and
validate hypothesis

4

Redesign

5

Implement

6

A/B test
and evaluate

The process

This was the process we defined as a result of our research. It was important to us to validate our hypothesis before redesigning the flow.

So, what's the minimum?

Following Agile principles, we defined the first deliverable: cutting down the existing flow to a minimum. This was a great way to get early test results and validate our hypothesis with very little design and engineering resources. Together with the content and science teams, we fleshed out what info we absolutely needed from the user, and what we could let them enter later once they got into the habit of using the app.

A shorter version of the flow we landed on:

Sign up

Onboarding

From A/B testing this against the longer flow, we could observe that the completion rate indeed went up. Yay! That was a GO to kick off the redesign and introduce a functionality that would allow the user to tell Clue what their main goal in using the app was.

The redesign

Ideation

I started off with laying out the flow conceptually, focusing on the main functionalities. When it came to the redesign, we first nailed down structural improvements—e.g. a more comprehensive sign-up functionality, and a screen for the user to indicate their intended use for the app. Then we tackled the UI.

In collaboration with the product owner and with regular feedback from engineers, I iterated on different versions.

I got valuable feedback from a brand designer and a product copywriter on the look, feel, and narrative of the flow.

In parallel, we started work on a design system for the whole app. Creating a design system for Clue was a big project, as there had only been loose rules for design and engineering until then. The experience on iOS and Android was also noticeably different. Since the onboarding flow was going to get an entirely new UI, this was a great opportunity to start working on a design system and introducing reusable components.

We decided to start off with the most important components and tackle the rest on an ongoing basis. This allowed us to start streamlining the app's components for both designers and developers, and both iOS and Android.

Design System

Some examples of the components and guidelines we defined

The outcome:
The new onboarding

Design highlights

Micro interactions

I designed micro interactions and smooth screen transitions to make the flow a more delightful experience, and to introduce this aspect of interaction to the app more generally.

New sign up logic

A shorter, more intuitive sign up allowed the user to create an account much faster.

Welcome screen

I teamed up with Clue's illustrator to make the welcome screen a brand spark.

The outcome was a flow that was much shorter, more intuitive, and in line with the updated Clue brand. We also made great progress with the new design system during the course of this project.

While the initial A/B tests were promising, the completion rate of the final flow went up less than we had anticipated. Consequently, we decided to iterate more on copy and visuals and—depending on the results—more UX solutions for the flow.

Conclusion

You scrolled all the way! Might as well say hi 🙂
hello@susivetter.com