NAVI — SaaS 온보딩 도구
NAVI — Product Onboarding SDK
SaaS 제품용 노코드 온보딩 빌더 R&D 프로토타입입니다. 제품 투어, 체크리스트, NPS 설문을 하나의 SDK로 통합했습니다.
라이브 데모
실제 애플리케이션 화면 미리보기
オンボーディングフロー
新規ユーザー向け · アクティブ
パーソナライズされた挨拶とプロダクト紹介
主要機能のハンズオンガイド（5ステップ）
セットアップ確認と次のステップ案内
コンバージョンファネル
NPS スコア
+4ユーザーセグメント
リアルタイムアクティビティ
田中太郎 が オンボーディング完了
2分前
佐藤花子 が 機能紹介でドロップ
5分前
鈴木一郎 が ウェルカム閲覧
8分前
高橋美咲 が オンボーディング完了
12分前
伊藤健太 が プロフィール設定スキップ
15分前
과제
내부 시나리오에서 7일 리텐션이 23%에 정체되고, 온보딩 플로우를 바꿀 때마다 엔지니어링 리소스가 필요한 병목을 재현했습니다.
솔루션
드래그 앤 드롭 투어 빌더, 조건부 체크리스트, 자동 NPS 설문, 사용자 행동 분석을 1줄 SDK로 제공하는 파일럿을 구축했습니다. 내부 테스트 제품으로 리텐션 지표 반복 검증 중입니다.
성과
- 내부 검증 데이터 기준 7일 리텐션 23% → 58%
- 파일럿 환경에서 온보딩 구축 시간 90% 단축
- 테스트 시뮬레이션상 기능 발견율 3배 향상
- 베타 SDK 도입 내부 채널 200건 등록
Measured Impact
コアSDK
0.9KB
初期化時間
6ms
グローバルP95
120ms
D7リテンション
+22pt
What it does
SDK
超軽量コア
0.9KB(gzip)でツアー / チェックリスト / NPSをサポート。
宿主非干渉
Shadow DOMで完全隔離し、宿主のCSS/JSを汚染しない。
ビルダ
条件分岐フロー
ユーザー属性 / 行動に応じて分岐するフローを視覚的に構築。
多言語
フロー単位で多言語コンテンツを管理。
分析
フローファネル
各ステップの離脱率を可視化。
NPS トレンド
NPSスコアの時系列とカテゴリ別要因を分析。
System Layers
Layered architecture showing components, responsibilities, and data flow.
Layer
SDK
宿主アプリに依存せず動作するスタンドアロンSDK。
Layer
配信
フロー定義はエッジキャッシュから最速で配信。
Layer
管理画面
Drag & Drop でフローを構築し、JSONスキーマをPgに保存。
Layer
分析
アクション完了率やNPSスコアを時系列で可視化。
Layer
品質
主要ブラウザでの表示回帰をVisual Regressionで検出。
How we built it
Discovery
自社プロダクトおよび友人企業のオンボーディング痛点をインタビュー。
Deliverables
- 痛点マップ
パフォーマンス要件
コアSDKサイズと初期化時間のハード予算を設定。
Deliverables
- 予算ドキュメント
SDK設計
Shadow DOM境界とイベントインターフェースを決定。
Deliverables
- ADR
Implementation
コアランタイム → 管理画面 → 分析の順で実装。
Deliverables
- SDKパッケージ
- ダッシュボード
QA
Playwright + Visual Regression + SDKバジェットCIで防御。
Deliverables
- CIパイプライン
Beta
自社および協業プロダクト3つで試験導入。
Deliverables
- ベータFB
Iteration
フロー完了率を指標にしたA/B改善サイクル。
Deliverables
- 改善レポート
Delivery Timeline
- P0Done2026-03-08
SDKアーキテクチャ
コアランタイムとフロー遅延ロードの分離方針を確定。
- P1Done2026-03-26
コアランタイム
0.9KBのコアランタイムを実装し、シンプルツアーを動作検証。
- P2In Progress2026-04-18
ビジュアルビルダ
ノーコードビルダで条件分岐フローを構築可能にする開発中。
- P3Planned2026-05
NPS & 分析
PostHog連携でNPSおよびアクションイベント分析を予定。
- P4Planned2026-06
一般公開
マイクロSaaSとして料金プラン整備後に公開予定。
Who built it
Roles
- フロントエンドエンジニア
- バックエンド/エッジ
Tools & Platforms
Frontend
Data
Infrastructure
Other