Back to Home

Clue Onboarding

Clue Onboarding

Clue Onboarding

Tekkeikan is a kendo club based in Schöneberg, Berlin. 

In case you were wondering, here you can find out what kendo is about. Founded in 2011, it’s one of the most popular dojo in the city, and it currently holds the title of the 2023 Berlin Kendo Championship.  After updating their logo, I was also entrusted with a re-styling of the website. It’s a work-in-progress project, but here you can have an idea about how it started and how it is developing.


Tekkeikan

Tekkeikan

Tekkeikan

New look for Tekkeikan’s existing website, keeping the same content but re-organizing the design architecture.

The main goal: attract new potential members to the club.

Project Duration

Project Duration

Project Duration

November 2023 - Ongoing

My Role

My Role

My Role

UX, UI and visual design, creating a high-fidelity prototype for delivery to developers.

Responsibilities

Responsibilities

Responsibilities

Conducting competitive audits, paper and digital wireframing, low and high-fidelity prototyping, icon design, proposals on design architecture, and iterating on designs.

Here’s a preview.


No, I don't own 4 iPhones.

Here’s a preview.


No, I don't own 4 iPhones.

The Problem

When opening the app for the first time, I noticed users don’t get clear information about the app’s features, yet they are asked to share a lot of sensitive data and invited to sign up for a premium plan. This could lead to a high dropout rate.

The Goal

In this case study my main objective was to improve the user flow of the onboarding by displaying more clearly what are the app’s features: this could potentially decrease the dropout rate at such crucial point of the app. On top of that, I tried to tackle all the pain points mentioned above.

The Problem


When I opened the app for the first time, I noticed users didn't get clear information about the app’s features, yet they were asked to share a lot of sensitive data and invited to sign-up for a premium plan. This could lead to a high dropout rate.

The Problem

When opening the app for the first time, I noticed users don’t get clear information about the app’s features, yet they are asked to share a lot of sensitive data and invited to sign up for a premium plan. This could lead to a high dropout rate.

The Goal

In this case study my main objective was to improve the user flow of the onboarding by displaying more clearly what are the app’s features: this could potentially decrease the dropout rate at such crucial point of the app. On top of that, I tried to tackle all the pain points mentioned above.

The Goal


In this case study my main objective was to improve the onboarding user flow by displaying more clearly what the app’s features are: this could potentially decrease the dropout rate at such crucial point of the app. On top of that, I tried to tackle all the pain points mentioned above.

UX Pain Points

  • Onboarding progress duration unclear

  • User flow interrupted for consent solicitation

  • Post-onboarding confirmation lacks consistency

  • Premium account benefits poorly displayed on the promo page

  • Home screen prioritizes promo banner over tracker tool

UI Pain Points

  • User flow interrupted for consent solicitation

  • Post-onboarding confirmation lacks consistency

  • Premium account benefits poorly displayed on the promo page

  • Home screen prioritizes promo banner over tracker tool

Clue Original Onboarding

First of all, the antidote to most
assumptions: research

First of all, the antidote to most
assumptions: research

After breaking down Clue onboarding flow, I conducted a competitive audit of direct competitors first, and then I analyzed indirect ones to explore other onboarding tools possibilities.

After breaking down Clue onboarding flow, I conducted a competitive audit of direct competitors first, and then I analyzed indirect ones to explore other onboarding tools possibilities.

After breaking down Clue onboarding flow, I conducted a competitive audit of direct competitors first, and then analyzed indirect ones to explore other onboarding tool's possibilities.

This research helped me redefine the objectives and prioritize some of the user pain points over others. Mostly, it was a great opportunity to investigate competitors' choices around do's and don'ts when asking users for sensitive data. 
After this analysis, as I was working on an existing app, I proceeded with low and high-fidelity prototypes. Here below you can find a selection of the screens I’ve developed. For the complete flow, you can have a look at the GIF at the end of this page.​​​​​​​

To the Left: Original Screen  / To the Right: My Proposal
This research helped me redefine the objectives and prioritize some of the user pain points over others. Mostly, it was a great opportunity to investigate competitors' choices around do's and don'ts when asking users for sensitive data. 
After this analysis, as I was working on an existing app, I proceeded with low and high-fidelity prototypes. Here below you can find a selection of the screens I’ve developed. For the complete flow, you can have a look at the GIF at the end of this page.​​​​​​​

To the Left: Original Screen  / To the Right: My Proposal

Before

  • Not all features are fully visible, users need to scroll

  • Selecting manually day, month, and year can require quite some time

  • The background color of some boxes doesn't follow  WCAG standards

After

  • All the boxes are visible and the copy is more readable

  • The icons support users in understanding what the features are about

  • An extra confirmation step has been added, to show the users what had been selected before proceeding

Before

  • Not all the buttons are visible (on Android)

  • Selecting manually day, month, and year can require quite some time

After

  • The input format is more intuitive

  • The pre-filled example helps users who are not familiar with this format understand what to do

Before

  • The copy appears generic

  • Not visually engaging

After

  • More information has been added to explain what’s the current status

  • A subtle animation was implemented in the background, to entertain users as they wait for the next screen to load

Before

  • The notification preview appears so realistic that some users might thing their period is about to start and not understand that it's just a sample

  • The notification set up is not engaging

After

  • The notification preview is clearly separate from the standard content

  • The preview appears to be less realistic because it's on top of a phone, yet easy to understand

Before

  • The benefits are not immediately displayed, and some users might completely skip them while scrolling

  • Important content is not visible without scrolling

  • Some users might struggle to exit this page once they scroll down

After

  • The main benefits are listed clearly on top of CTA buttons

  • Added "Maybe later" as a more visible alternative to "X" button 

Before

  • The promo banner placed before main tools could lead to frustrating interactions

  • The tracking wheel lacks intuitiveness without a tutorial

After

  • The main tool is now prioritized and accompanied by additional information

  • An informative button appears below, to engage more with users and give them extra insight about their period

  • The promo banner, at the bottom of the screen, is now less intrusive

Finally, I conducted a usability study using Useberry, a UX research platform I highly recommend. This phase led to further iteration of course, reminding me how crucial user testing and user feedback are. Here's a preview of the study.

Finally, I conducted a usability study using Useberry, a UX research platform I highly recommend. This phase led to further iteration of course, reminding me how crucial user testing and user feedback are. Here's a preview of the study.

The Impact

Thanks to iterative improvements following the usability study, all the pain points identified at the project's outset were successfully addressed and resolved.

As evidenced by the survey findings, the majority of users found the re-designed process enjoyable and are inclined to sign up for the app, fulfilling the primary objective of effective onboarding.

What I learned

With this project, I had the opportunity to test many different UX and UI principles an onboarding flow can have. It is indeed a crucial phase, where users don’t know the app and yet they are asked to give consent, share sensitive data, and even sign up for a paid plan. How can we turn this delicate phase into a smooth, informative, and reassuring experience for them?

Behind the abundance of UX solutions available, I've come to appreciate the vital role of self-questioning for UX designers regarding bias, inclusivity, accessibility, and ethicality. These reflections have guided me, for example, to prioritize user privacy by minimizing sensitive questions and providing explanations to justify them. These principles not only enhance the user experience but also foster trust and respect, ultimately contributing to the creation of more ethical and inclusive design solutions.

The Impact

Thanks to iterative improvements following the usability study, all the pain points identified at the project's outset were successfully addressed and resolved.

As evidenced by the survey findings, the majority of users found the re-designed process enjoyable and are inclined to sign up for the app, fulfilling the primary objective of effective onboarding.

What I learned

With this project, I had the opportunity to test many different UX and UI principles an onboarding flow can have. It is indeed a crucial phase, where users don’t know the app and yet they are asked to give consent, share sensitive data, and even sign up for a paid plan. How can we turn this delicate phase into a smooth, informative, and reassuring experience for them?

Behind the abundance of UX solutions available, I've come to appreciate the vital role of self-questioning for UX designers regarding bias, inclusivity, accessibility, and ethicality. These reflections have guided me, for example, to prioritize user privacy by minimizing sensitive questions and providing explanations to justify them. These principles not only enhance the user experience but also foster trust and respect, ultimately contributing to the creation of more ethical and inclusive design solutions.

The Impact

What I learned

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 laptop showing the homepage of Tekkeikan website,, with a picture of a kendoka
Tekkeikan Website

The new look for the best kendo
club in the city

Close-up of a laptop showing the homepage of Tekkeikan website,, with a picture of a kendoka
Tekkeikan
Website

New look for the best
kendo club in the city

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