Clue UX&UI case study


Role & Responsibilities: User Research, Prototyping, UX/UI Design
Duration: 12/2020 – 02/2021
Tools: Figma, Marvel

Clue is a period recording tool that helps users manage their health status through cycle tracking, ovulation prediction and other methods. Clue is committed to creating a friendly, scientific, and trustworthy brand image. For the explanation of gynecological symptoms, Clue provided the most advanced medical documents in Europe and America as references. ​​​​​​​


To begin my research, I started to look for critical reviews about Clue app on App Store, here are some reviews that appear repeatedly.

·Need subscription for features that once free.
·Expensive membership.
·A lot of extra features that are not needed.
·Layout is not user-friendly.
·Must make an account as the first step.
·Not enough symptoms for choose.
·Outdated UI.
·Frequently crashes.

User Journey Map:

Personas & 

According to my observation and user research, I focus the redesign on 3 aspects:

  1. Improve the first user experience.
  2. Adjust paid subscription advertising.
  3. Add the function of pregnancy tracking.

Core Function


In the redesign, the conspicuous subscription ad on the homepage was removed, the most commonly used Track function was placed in a more clickable position, and the bottom menu buttons were streamlined.
In the current design, users are directly urged to pay for subscriptions by reducing an important page. Many users have complained that this experience is very terrible.
By redesigning, I retained the articles of the Content page, no longer “you gonna feel bad if you don’t pay” but “paying will bring you a better experience”, encourage users to subscribe through some articles that need to be paid to unlock.

In the current design, symptom recording needs to be swiped and clicked to complete. If you need to browse all the symptoms, a total of 29 swipes are required.
Redesign integrated the same kind of symptoms into one page, you only need to click 3 times and swipe 1 time to browse all symptoms. The recording function is also completed on the same page by sliding up and overlaying, which improves the convenience of operation. 

You can browse the full experience using the prototype below or click HERE 

Dark mode:

Responsive website: