Back to Home

Tekkeikan Website

For this project, I focused on Clue, a period tracker I use myself. Clue is much more than that, but despite its regular use, it took some time for me to fully grasp its capabilities. As a UX designer, I saw an opportunity to apply UX and UI design principles and improve Clue’s Onboarding process. 

The Product

The Product

The Product

Clue is an app dedicated to people that want to track their period, fertility and learn more about how their bodies work.

Project Duration

Project Duration

Project Duration

February - April 2024

My Role

My Role

My Role

UX and UI, from wireframing to prototyping of the Onboarding screens.

Responsibilities

Responsibilities

Responsibilities

Competitive audit, user research, low
and high-fidelity prototyping, usability studies, and iterating on designs.

Website before redesign

Website before redesign

First Impression


A lot of content, a lot of pages, a lot of text.
Few pictures, few CTA. 

Especially when handling a lot of information,
I believe buttons become essential.

First Steps


After re-creating the sitemap on Miro, I proposed a new structure and agreed on a version with less content.

Then I started wireframing, both for desktop and mobile of course, asking them to mark their favourite parts with cute little stars. 

For the record, I like stars only on wireframes and unlimited blue surfaces. Never on clothing. Never.

Let’s release

the buttons.

First Impression


A lot of content, a lot of pages, a lot of text.
A few pictures and CTA's. 

Especially when handling a lot of information,
I believe buttons become essential.

Let’s release

the buttons.

First Steps


After re-creating the sitemap on Miro, I proposed a new structure and agreed on a version with less content.

Then I started wireframing, both for desktop and mobile of course, asking them to mark their favourite parts with cute little stars. 

For the record, I like stars only on wireframes and unlimited blue surfaces. Never on clothing. Never.

After collecting feedback, I transitioned to one of my favorite stages in the design process: prototyping. Initially, I conducted a basic test on the Low-Fidelity version, and upon confirmation of its success, proceeded to refine the High-Fidelity prototype.

Prototyping
Design System

In parallel, as there were no existing brand identity guidelines, I started creating their first Design System, based on the color palette of the logo, but adding more keeping in mind all the possible states of the buttons.

Design System

In parallel, as there were no existing brand identity guidelines, I started creating their first Design System, based on the color palette of the logo, but adding more keeping in mind all the possible states of the buttons.

Prototyping

After collecting feedback, I transitioned to one of my favorite stages in the design process: prototyping. Initially, I conducted a basic test on the Low-Fidelity version, and upon confirmation of its success, proceeded to refine the High-Fidelity prototype.

Prototyping
What I learned

This project gave me the opportunity to collaborate closely with web developers, allowing me to gain a deeper understanding of their perspective on various design principles. Despite the numerous iterations involved, I maintained confidence in the process, knowing that the final result would be improved – and indeed it was. Once again, I was able to practice keeping the user at the forefront of my considerations.

More authentic Elena Leone N.417 projects
Close-up of an iphone displaying Art.Be app screen about discovering workshop: a list of pictures that serves as preview of available workshops in the city, and a button to book them
Faircado Catalogue Page

A new hompage for an AI-powered
browser for sustainable ecommerce

Ipad showing an infographic with two children bodies outlined and a list of several diseases linked to different dots on their bodies
Faircado Search
Browser

The AI-powered
suistanable ecommerce

Close-up of an iphone displaying Art.Be app screen about discovering workshop: a list of pictures that serves as preview of available workshops in the city, and a button to book them
Art.Be App

Designed to connect artists
and art lovers in Berlin

Close-up of an iphone displaying Art.Be app screen about discovering workshop: a list of pictures that serves as preview of available workshops in the city, and a button to book them
Art.Be
app

Designed to connect artists & art lovers

Close-up of a iphone showing the period tracker wheel of Clue app
Clue Period Tracker

A safer and more comfortable
onboarding journey

Close-up of a iphone showing the period tracker wheel of Clue app
Clue Period
Tracker

A safer and comfortable
onboarding journey

Ipad showing an infographic with two children bodies outlined and a list of several diseases linked to different dots on their bodies
The Diagnostic Game

A solution for engaging
with physicians

Ipad showing an infographic with two children bodies outlined and a list of several diseases linked to different dots on their bodies
The Diagnostic
Game

A solution for engaging
with physicians

Let’s
Connect

Linkedin

Email

©

Elena Leone

2024

Let’s
Connect

Linkedin

Email

©

Elena Leone

2024

Let’s
Connect

Linkedin

Email

©

Elena Leone

2024