Master Onboarding: 7 Design Principles & 6 Patterns to Boost User Retention

What Is Onboarding?

Onboarding, also called new‑user guidance, aims to eliminate friction at the start of a user’s journey, turning desire into conversion by helping users quickly understand a product’s core features and achieve their goals.

Design Principles

1. Build Emotional Connection

Use personified visuals and copy to create an emotional bond, encouraging users to keep moving forward.

2. Set User Goals

Highlight benefits and milestones (e.g., daily sign‑in rewards) to give users clear short‑term objectives.

3. Timely Feedback & Highlight Benefits

Provide immediate feedback after actions, emphasizing the value users gain.

4. Design Rhythm

Introduce staged “climaxes” throughout the onboarding flow to maintain engagement, similar to pacing in a movie.

5. Tiered Feature Release

Gradually expose features based on importance, reducing learning overload and preventing early mistakes.

6. Avoid Monotonous Styles

Vary guide styles to break users’ habitual clicking patterns and encourage active thinking.

7. Concise Textual Expression

Prefer visual information; when text is necessary, keep it brief and highlighted.

Design Patterns

1. Introductory Screens

Definition: A set of 3‑5 pages shown on first app launch to set tone, showcase features, and teach core actions.

Elements: Text + images + interaction guide.

Usage: First‑time users need a full overview of the app.

Rules: No more than five pages; images should be realistic and engaging; provide clear navigation cues.

2. Overlay (Mask) Guide

Definition: A semi‑transparent dark mask covers the screen, highlighting specific UI elements with annotations, gestures, or illustrations.

Elements: Mask + highlighted area + description + action guide.

Usage: Introduce new features, explain UI changes, or demonstrate gestures.

Rules: Keep focus on the highlighted element, ensure description is tightly coupled, make action buttons obvious.

3. Tooltip / Modal Prompt

Definition: A bubble or modal appears near a control when the user first enters a scene, offering brief guidance.

Elements: Bubble + text; Modal + image/text + button.

Usage: Announce new functions, guide core actions, or reveal hidden menus without heavy interruption.

Rules: Show only in relevant contexts; use standout colors; require user interaction to dismiss; prefer visual explanations in modals.

4. Animation / Video Guide

Definition: Short animations or videos demonstrate complex interactions intuitively.

Elements: Text intro + animation/video + action guide.

Usage: Suitable for products with complex or dynamic workflows.

Rules: Keep duration under 10 seconds; focus on key steps; ensure visual clarity, otherwise use static images.

5. Interactive Walkthrough

Definition: Step‑by‑step guidance that walks users through real tasks, encouraging learning by doing.

Elements: Content intro + guided steps + interaction prompts.

Usage: Tool‑type products and games.

Rules: Highlight actions clearly, keep content tightly coupled with the operation, provide immediate feedback on success.

6. Preset Tasks

Definition: The system creates example tasks automatically when a user first enters, using the product’s own shape to immerse users in realistic scenarios.

Elements: Guide content + interaction prompts.

Usage: Tool‑type products such as prototyping tools, design software, documentation, or checklist apps.

Rules: Allow free exploration, pre‑design user paths, ensure tasks match core usage scenarios.

Advanced Application

Applying the seven principles and six patterns can be seen in the recent redesign of Taobao’s “Gold Coin” feature, where traditional onboarding was replaced by a locked manor, exclusive exchange floors, and tasks. The design uses tiered feature release to teach users about coins, then gradually unlocks the manor, while highlighting daily reward benefits and preset tasks (sign‑in, coin exchange, coin tasks) to foster habit formation and implicit learning.

Conclusion

Onboarding design guidelines are like a martial‑arts manual: mastering each technique improves skill, but true mastery comes from integrating them fluidly to achieve results without obvious moves.