CLUE CASE STUDY
Overview
Role & Responsibilities: User Research, Prototyping, UI/UX DesignDuration: 12/2020 – 02/2021
Tools: Figma, Marvel
Clue, a menstrual health app developed by BioWink GmbH in Berlin, aims to promote women's reproductive health with its three main functions: tracking period cycles and predicting them, analyzing health status, and providing scientific articles on reproductive health. Clue Plus is a key source of revenue for the company.
Research
I conducted research by analyzing substantial feedback from users of the Clue app on the App Store. The recurring points that emerged include:-
Requirement of subscription for previously free features.
-
High membership cost.
-
Unnecessary additional features.
-
Poorly designed layout.
-
Required creation of account as the initial step.
-
Insufficient number of symptom options.
-
Outdated user interface.
-
Frequent app crashes.
User Journey Map & Personas
Based on my observations and comprehensive user research, I have pinpointed three primary areas for redesign:- Improving the initial user experience
- Fine-tuning the advertising strategy for paid subscriptions.
- Incorporating a pregnancy tracking feature.
Core Functions Adjustment
In the redesign process, my goal was to enhance the overall user experience by implementing essential functional modifications. To achieve this, I took the following steps:- I eliminated the prominent subscription advertisement that previously occupied the homepage.
- I made the frequently used "Track" feature more accessible.
-
I simplified the bottom menu buttons for improved user navigation.
Previously, the design directed users towards purchasing a subscription by limiting access to crucial pages, which garnered negative feedback. With the redesign, I maintained access to articles on the "Content".
In the redesign, I consolidated all symptoms onto a single page, significantly reducing the need for multiple swipes. What used to demand 29 swipes now requires only three clicks and one swipe. Furthermore, I relocated the recording function to the same page, making it more accessible by sliding it up and overlaying it on the screen. This adjustment enhances convenience and user-friendliness in the process.
︎︎︎ INTERACTIVE PROTOTYPE
![](https://freight.cargo.site/t/original/i/004c06be7c8a31175ef973d073037ecc4a3a9d4e7fd45a89272e7c577da81b3f/20.png)
![](https://freight.cargo.site/t/original/i/45f69b805bb7189ff6e96e8d2749436a31c536ba2f6c93682c66e8790ec9fc0b/Group-368.png)
![](https://freight.cargo.site/t/original/i/a2c5950589c74a8f5f2f9792282cb51d479f255a76ffbae848ab518a34d30247/Group-369.png)
![](https://freight.cargo.site/t/original/i/0e4c25aaaeade2735b52d760d3f7500e1ff03b7e31db3a0ba9ac59a35ed523dd/21.png)
![](https://freight.cargo.site/t/original/i/9f2f161c68d8504622bf3023ccd2f0ba14e6f96c31fc3cf1313a48d265aed786/22.png)
![](https://freight.cargo.site/t/original/i/7e813bef60fa02ddb478c312373aac9f1243f0e285a5057a3edfa99165d3cc15/flowmap.png)
![](https://freight.cargo.site/t/original/i/e84346765b7323d0eabd22c1aed2d074b79abc4abe6857c05ab92875d4dc2598/Scene-1.jpg)
![](https://freight.cargo.site/t/original/i/3c0634f9af6172b1d179f2cda3681b6660c5397b8ea6a88dbb9bc5cff1056044/Scene-1.png)
![](https://freight.cargo.site/t/original/i/b5aea65566c4fa43aebad970ee9881da0f5519997bdef437dfbbc8ccc7f13627/Digital-Device-Mockup-Freebie-Vol-1.png)