Drive first action during onboarding

SummaryWalkthroughResourcesDownload
Customer Journey Stage
person_check
Activation
Context
flag
Onboarding
Metrics
arrow_upward_alt
Conversion
arrow_downward_alt
Drop-off
arrow_upward_alt
Engagement
arrow_upward_alt
Feature Adoption
arrow_upward_alt
Task Success
Download the Figma file
This cocktail helps new users complete onboarding and take their first meaningful step. We use psychology-backed patterns that reduce friction, build confidence, and keep users focused. By combining Action Bias, Anchoring, and Attentional Bias, it gives users a sense of progress right from the start.

The Psychology Cocktail ingredients

Action Bias role
Encourages fast engagement throughout onboarding.
Anchoring Bias role
Frames onboarding as simple and valuable with minimal effort.
Attentional Bias role
Focuses users on key tasks one step at a time to maintain flow.
These biases combine to create quick engagement, low perceived effort, and strong forward momentum. We're aiming to help users feel successful and motivated to continue through onboarding and take their first action.

Flow design walkthrough

Let’s take a look at how the biases influence the design of each part of the flow.
Screen
1

Welcome screen

Trigger immediate action.

Image

Uses Attentional Bias by directing the user’s visual focus to a metaphor of progress, reinforcing the idea of momentum and a clear starting point.
Attentional Bias

Heading

Applies Anchoring by immediately framing the experience as low effort and quick. This primes the user to see the journey ahead as easy and achievable.
Action Bias

CTA

Applies Action Bias by giving the user a single, unambiguous prompt to begin. The word “Start” is immediate, frictionless, and invites forward motion without decision fatigue.
Action Bias
Screen
2

Value proposition

Frame the effort-to-reward ratio.

Heading

Applies Anchoring by reinforcing a clear time-to-value message. Repeating the “2 minutes” anchor reduces perceived effort and sets a simple mental expectation.
Anchoring Bias

Checklist

Uses Attentional Bias by displaying benefit-driven bullet points that visually stand out. These reinforce desirable outcomes, keeping the user focused on the payoff.
Attentional Bias
Screen
3

Goal selection

Get a meaningful, low-commitment decision.

Heading

Leverages Anchoring by setting the mental frame that this setup is personal and valuable. It connects user expectations to a specific outcome they care about.
Anchoring Bias

Options

Applies Attentional Bias through clearly differentiated, icon-enhanced options. The design supports fast scanning and emotional resonance with each choice.
Attentional Bias

Progress bar

Uses Attentional Bias by showing a subtle progress indicator to focus the user on their position in the journey, creating a sense of commitment to finish.
Attentional Bias

CTA

Applies Action Bias by allowing progress only once a decision has been made, reinforcing the value of taking that first small commitment.
Action Bias
Screen
4

Social Proof moment

Reinforce belonging and encourage progression.

Heading

Uses Anchoring and light social proof to create trust and perceived popularity, reinforcing the user’s decision to proceed.
Anchoring Bias

CTA Microcopy

Using Action Bias to show that something is being done with the actions taken by the user.
Action Bias
Screen
5

Notification setup

Encourage light configuration and behavioural support

Heading

Uses Anchoring by framing notifications as helpful nudges rather than interruptions, which primes users to associate them with positive support.
Anchoring Bias

Time options

Leverages Attentional Bias with a clean grid layout and distinct time choices that make selection easy and visually engaging.
Attentional Bias

Content options

Applies Action Bias by offering users simplified choices that reduce friction. All options are helpful, so users can’t go wrong.
Action Bias
Screen
6

Notifications confirmation

Maintain confidence and reinforce benefit.

Heading

Reinforces Anchoring by promising a specific, emotionally reassuring benefit, a comfortable routine.
Anchoring Bias
Screen
7

Content preferences

Reinforce user ownership of the experience.

Heading

Applies Anchoring by reinforcing that the product is tailoring the experience around the user’s preferences. This gives an increased perception of personal value.
Anchoring Bias

Options

Applies Attentional Bias through icon-supported content types that encourage fast recognition and emotional resonance.
Attentional Bias
Screen
8

Content validation

Affirm personalisation and sustain the flow.

Heading

Uses Anchoring to reassure users that their selections are being respected and implemented. This increases perceived value and reinforces that the product is tailored to their goals.
Anchoring Bias

Micro-copy

Using Action Bias to show that something is being done using the user's input.
Action Bias
Screen
9

Setup complete

Reinforce success and guide next action.

Copy

Applies Anchoring by confirming success and signalling closure. The phrase “You’re all set!” reinforces that the user has completed something meaningful and primes them for confidence in the next step.
Anchoring Bias

CTA

Uses Action Bias to move the user straight into a meaningful product experience. The CTA is active, singular, and points toward a clear next step without needing a new decision.
Action Bias

Everything you need to get started

design_services
Fully designed flow
message
UX Psychology annotations
format_paint
Light and dark colour modes
smartphone
iOS & Android designs
Download the Figma file
Download the Figma file

Share your results!

Have you tried this cocktail on your product? We'd love to hear how it's impacted your customers and your metrics. Pay-it-forward so we can share with the wider community to help them improve.
Get in touch