Klem

Designing an onboarding flow to drive activation & value

Project overview

Klem is a SaaS application that helps companies manage employee absences and recover IJSS (daily sickness benefits) from the French social security system.

The product relies on DSN (Déclaration Sociale Nominative) files to retrieve employee data and calculate potential recovery amounts.
Without DSN, the product cannot deliver any value.

My role
Product Designer (UX & UI)

Context
Internal SaaS product

Focus
UX strategy, onboarding, activation, interaction design

The problem

After creating an account, users were immediately redirected into the application — without any onboarding or guidance.

As a result:

• Users didn’t know what to do first

• Empty dashboards created confusion on first use

• The interface felt complex and overwhelming

• Klem’s core value wasn’t visible early on

Users could create an account without ever reaching Klem’s core value, directly impacting activation and adoption.

Research & UX auditing

Before designing the onboarding flow, I focused on understanding why users were struggling during their first interaction with Klem.

Since no onboarding existed, the audit focused on the first-time experience after account creation.

Existing flow analysis

After receiving an invitation email, users:

• Created their account

• Were redirected directly into the app

• Landed on empty dashboards without guidance

Without DSN import or Net-Entreprises connection, the interface provided no value or direction.

Internal insights (Sales & Support)

Key insights came from recurring feedback shared by Sales and Support teams:

• Users didn’t understand what to do after signing up

• DSN import was often skipped or misunderstood

• Support teams spent time explaining basic setup steps

• Manual assistance was required to activate accounts

This became a critical issue with the long-term goal of opening the product to self-serve trial users, without human onboarding.

Competitive exploration

I reviewed onboarding flows from other B2B SaaS products to understand how they guide users through complex setup steps.

This highlighted the importance of:

• Step-by-step configuration

• Clear framing of mandatory actions

• Early exposure to product value

Key research takeaways

• Dropping users directly into the app created confusion

• Mandatory steps needed clear explanation

• Users needed to see value before completing complex setup

• Onboarding had to support both Sales-led and self-serve usage

These insights directly shaped the onboarding strategy.

Design goals

The goal was to design an onboarding experience that improves user understanding while supporting Klem’s activation and growth objectives.

1. Guides users before entering the app

2. Makes DSN import unavoidable but understandable

3. Reduces complexity by breaking the setup into steps

4. Shows Klem’s value as early as possible

5. Improves activation and time-to-value

UX strategy

Instead of dropping users directly into the product, I designed a guided onboarding tunnel displayed after account creation and before first access to the app.

This onboarding acts as a bridge between:

“I just created an account”
and
“I understand what Klem does and why it matters”

The flow is linear, progressive, and focused on one task at a time.

Design system foundations

To support the onboarding flow and ensure consistency across the product, I worked within Klem’s existing design system and contributed to its evolution.

The goal was to create scalable components that could support complex workflows while remaining clear and easy to use.

Design flow

Step 1 — Company information

The first step collects essential company data.

Why this step first

• Simple and non-threatening

• Helps users get started smoothly

• Provides necessary context for DSN processing

This step eases users into the product without overwhelming them.

Step 2 — DSN import (core step)

This is the most important and non-optional step of the onboarding.

Users must import one or more DSN files to continue.

Key product decision

During early iterations, this step was purely functional.
I proposed adding a real-time summary table of recovery opportunities displaying:

• Estimated recovery amounts

• Breakdown per establishment

• Data calculated directly from imported DSNs

Why this mattered

• Creates an emotional trigger

• Makes the product’s value tangible early

• Encourages users to complete the onboarding

• Transforms a technical constraint into motivation

Users can now immediately see what Klem can bring them — financially — before even entering the app.

Step 3 — Net-Entreprises connection

This step allows users to connect their Net-Entreprises account to automatically retrieve required data for IJSS calculation.

UX focus

• Clear explanation of why the connection is needed

• Reassurance around data usage

• Possibility to skip and complete later

  
  

Step 4 — Invite collaborators

The final step invites colleagues to join the workspace.

This step:

• Encourages early collaboration

• Helps internal adoption

• Remains optional to avoid blocking progress

End of the tunnel — Entering the app

Once the onboarding is completed, users access the main application.

At this point:

• The product is fully configured

• DSNs are already imported

• Value is visible

• Users understand what to do next

The transition into the app feels intentional rather than abrupt.

Iterations & trade-offs

The onboarding flow went through several iterations to balance clarity, motivation, and product constraints.

Showing value during onboarding

Initial version
The right-side panel was static and purely visual, providing no insight into Klem’s value.

Iteration 1

A summary panel was introduced to confirm DSN import.

Iteration 2 (final)

The panel evolved to include a breakdown per establishment and status indicators.

Trade-off
Each iteration increased visual density, but significantly improved trust, clarity, and motivation by making value visible early.

Optional vs mandatory steps

DSN import remained mandatory, while other steps — Net-Entreprises connection and inviting collaborators — were made optional to reduce friction during first use.

Removing an onboarding step

An early step asking users to define a recovery tolerance threshold was removed and replaced with a default value.This reduced cognitive load and allowed users to reach value faster.

Impact & learnings

Impact

This onboarding redesign improved the first-time experience by guiding users toward Klem’s core value from their very first interaction.

Key learnings

• Onboarding is a product and business lever, not just a UX task

• Mandatory actions should be explained, not hidden

• Early value exposure increases engagement and completion

• Iteration and trade-offs are essential to reach clarity

• Small UI decisions can have a large impact on activation

Final reflection

This project reinforced the importance of designing onboarding as a value-driven activation experience, not a technical checklist.

By aligning user needs, product constraints, and business goals, onboarding becomes a key moment that helps users understand, trust, and adopt the product faster.