app-onboarding

App Onboarding Design Skill

A general-purpose skill for designing and improving app onboarding. With "reaching the Aha Moment in the shortest time" as the top priority, optimize in the order of minimizing drop-off rate → personalization → measurement design.

Design Philosophy

Always follow these 3 principles:

1. Value Before Registration — Let users experience the value before registration. Ask for registration after they have experienced it
2. Learn by Doing — Have users learn through actual operation, not explanation slides. Repeatedly tapping through 5 tooltips is strictly forbidden
3. First Win in 60 Seconds — Provide a sense of "I did it" within 60 seconds of the first launch

Step 0: Define the Aha Moment

The starting point of onboarding design is to concretely define the app-specific Aha Moment. Define it using the following template:

### [アプリ名]
- **Aha Moment**: ユーザーが「このアプリの価値がわかった」と感じる瞬間
- **Activation Metric**: Aha Moment到達を示す計測可能な行動
- **Target TTV (Time to Value)**: Aha Moment到達までの目標秒数
- **Day1 Retention目標**: 翌日再訪率の目標値（アプリカテゴリ平均を参考に）
- **習慣化トリガー**: 継続利用を促す最初のフック

Tips for definition:

• The Aha Moment is not "I was able to use the feature" but the moment "I felt the value"
• The Activation Metric must be quantitatively measurable
• The shorter the TTV the better, but the appropriate value differs by category (utility: 30 seconds, learning: 60 seconds, creative: 120 seconds)

Reference examples:

App	Aha Moment	Activation Metric
Duolingo	First lesson completed + XP earned	1 lesson completed
Spotify	Generation of a playlist tailored to one's preferences	3 artists selected
Canva	First design completed	Template edited → saved
Headspace	Calmness after the first meditation	3-minute trial meditation completed
Notion	First page created from a template	1 page created

---

Onboarding Design Framework

Design using the following 6 phases. Each phase has mandatory check items.

Phase 0: Pre-Onboarding (before install to launch)

• Does the store description depict the user's "Better Self"?
• Do the screenshots show outcomes rather than features?
• Does the app size stay below the psychological barrier for the first download (guideline: 100MB or less)?

Phase 1: First Contact (launch to first interaction, 0-15 seconds)

• Is the splash screen within 2 seconds?
• Does the first screen convey "what kind of app this is" in 3 seconds?
• Is there a value experience before requesting registration (Value Before Registration)?
• Does it provide sample data or an immediate experience instead of an Empty State?

Phase 2: Quick Win (first success experience, 15-60 seconds)

• Can the user feel "I did it" with 1 action?
• Does feedback (sound, animation, text) return immediately?
• Is positive reinforcement for correct answers/success sufficient?
• Are the number of operation steps 3 or fewer?

Phase 3: Personalization (user branching, 60-120 seconds)

• Are purpose and level asked in 2-3 questions? (5 or more questions risks drop-off)
• Does the experience actually change based on the answers? (fake personalization is counterproductive)
• Is "Skip" always possible?
• Can the personalization result be felt within the first session?

Phase 4: Registration Gate (registration/account creation)

• Is it placed after the Quick Win is achieved?
• Is social login (Apple/Google) displayed with top priority?
• Is it a minimal form with only email address?
• Is it made clear what will be lost if the user does not register (e.g., saving progress data)?
• Can a certain range be used even if registration is skipped?

Phase 5: Habit Loop Setup (seeding habit formation, at the end of the first session)

• Is permission for reminders/notifications requested after the value experience?
• Is it clear what to do next time (e.g., "tomorrow's challenge")?
• Is a progress bar or streak set up?
• Is there guidance for widgets/shortcuts?

Phase 6: Re-engagement (promoting return visits on Day1-7)

• Is the Day1 push notification copy personalized?
• Is there a return-visit message based on the drop-off point?
• Can "continue from last time" be resumed with 1 tap?
• Is there an incentive to continue the streak?

---

Output Modes

This skill has 4 output modes. Select the appropriate mode according to the user's request. Simultaneous output of multiple modes is also possible.

Mode 1: Checklist + Improvement Report

Diagnose existing onboarding, and perform scoring + improvement proposals based on the above framework.

Output template:

# [アプリ名] オンボーディング診断レポート

## サマリー
- 総合スコア: X/30（各Phase 0-5点）
- 最大の改善機会: [Phase名]
- 推定インパクト: Day1 Retention +X%

## Phase別診断
### Phase 1: First Contact — X/5
✅ 達成項目
❌ 未達成項目
💡 改善提案（優先度・工数目安付き）

...（各Phase繰り返し）

## 優先アクション TOP3
1. [最もインパクトの大きい改善]
2. [次に重要な改善]
3. [コスト対効果の高い改善]

Mode 2: Flow Design Document (Mermaid)

Output the entire onboarding flow as a Mermaid diagram. Clearly indicate branching conditions, drop-off points, and measurement points.

Design rules:

• Add the estimated required time to each node
• Color-code nodes with high drop-off risk in red tones
• Write measurement event names below the nodes
• Represent personalization branches with diamond-shaped nodes

Output example:

flowchart TD
    A["🚀 アプリ起動\n⏱ 0s"] --> B["価値提示\n⏱ 2s"]
    B --> C["即体験\n⏱ 15s\n📊 event: first_interaction"]
    C --> D{"成功した？"}
    D -->|Yes| E["🎉 成功演出\n📊 event: first_win"]
    D -->|No| F["ヒント表示\nリトライ"]
    F --> C
    E --> G{"パーソナライズ\n2-3問\n📊 event: personalization"}
    G --> H["登録ゲート\n📊 event: registration_prompt"]
    H -->|登録| I["ホーム画面\n📊 event: onboarding_complete"]
    H -->|スキップ| I

    style C fill:#fff3cd
    style H fill:#f8d7da
    style E fill:#d4edda

Mode 3: Wireframe Specification

Describe the components, layout, and interactions of each screen at a level developers can implement.

Output template (for each screen):

## Screen: [画面名]
- **目的**: この画面でユーザーが得るもの
- **前の画面**: [画面名]
- **次の画面**: [画面名] / 分岐先
- **レイアウト**:
  - 上部: [要素の説明]
  - 中央: [メインコンテンツ]
  - 下部: [CTA・ナビゲーション]
- **インタラクション**:
  - タップ: [動作]
  - スワイプ: [動作]
  - 自動遷移: [条件と秒数]
- **計測イベント**: [イベント名とプロパティ]
- **離脱対策**: [この画面特有の対策]

Mode 4: Code Generation (React / SwiftUI)

Generate prototype code for the onboarding screen.

Tech stack:

• Web（React）: Tailwind CSS、Framer Motion
• iOS（SwiftUI）: iOS 16+ support, flow management with @State/@Binding

Code generation rules:

• One component per screen, screen transitions managed by a state machine
• Animations are subtle, but success feedback is flashy
• Consider accessibility (VoiceOver/TalkBack)
• Clearly indicate analytics event trigger points with comments

---

Analytics design template

To measure the effectiveness of onboarding, the following event system is standard.

Required events

Event name	Trigger timing	Properties
app_first_open	First launch	device, os_version, source
onboarding_start	Onboarding start	-
first_interaction	First action	interaction_type, time_from_open
first_win	First success experience	win_type, time_from_start
personalization_complete	Personalization complete	selections, skipped
registration_prompt	Registration gate shown	trigger_point
registration_complete	Registration complete	method(apple/google/email)
registration_skip	Registration skipped	-
onboarding_complete	Onboarding complete	total_time, steps_completed
onboarding_abandon	Onboarding drop-off	last_step, time_spent

Funnel definition

app_first_open
  → first_interaction （目標: 90%以上）
    → first_win （目標: 75%以上）
      → registration_prompt （目標: 70%以上）
        → registration_complete （目標: 40%以上）
          → onboarding_complete （目標: 35%以上）

KPI definition

• Activation Rate: onboarding_complete / app_first_open — target 35% or higher
• Time to First Value (TTV): first_win.timestamp - app_first_open.timestamp — target within 60 seconds
• Registration Conversion: registration_complete / registration_prompt — target 50% or higher
• Day1 Retention: Next-day return rate — target 30% or higher
• Day7 Streak Rate: Active on 3 or more of 7 days — target 15% or higher

---

Onboarding pattern classification

Select the optimal pattern according to the nature of the app:

Patterns	Suitable apps	Representative examples
Learn by Doing	Skill acquisition/learning type	Duolingo, ToneGym
Value Before Registration	Type that can deliver immediate results	Wise, Canva
Personalization-first	Content recommendation type	Spotify, Headspace
Progressive Disclosure	Multi-function tool type	Notion, LinkedIn
Gradual Engagement	Type with a high registration hurdle	Duolingo

Combining multiple patterns is effective. Design with Primary + Secondary.

---

Anti-patterns (designs to avoid)

1. Information-overloaded welcome slides: Three or more explanation slides cause the skip rate to spike
2. Forcing registration before the value experience: The order of registration → notification → value fails to motivate
3. Excessive permission requests: Requesting camera, location, and notifications all at once immediately after launch
4. Fake personalization: Asking questions but not changing the experience → loss of trust
5. Overly long tutorials: Five or more tooltips in a row → 80% skip
6. Empty home screen: A screen with nothing after registration is complete → users don't know the next action and drop off
7. Short-term pressure tactics: Pressure during onboarding such as "50% OFF for today only" → damages trust

---

Usage guide

1. New onboarding design: Define the Aha Moment in Step 0 → design Phases 0-6 in order → flow diagram in Mode 2 → wireframe in Mode 3 → prototype in Mode 4
2. Improving existing onboarding: diagnostic report in Mode 1 → identify the biggest improvement opportunity → design the improved flow in Mode 2 → implementation
3. A/B test design: apply the measurement design template → articulate the hypothesis for the changes → calculate the test period and sample size

Reference

If you need detailed information, refer to the following:

• references/research-digest.md — Summary of onboarding research and evidence collection