NAVI — SaaS 온보딩 도구
NAVI — Product Onboarding SDK
SaaS 제품을 위한 노코드 온보딩 빌더입니다. 제품 투어, 체크리스트, NPS 설문조사를 통합 제공합니다.
라이브 데모
실제 애플리케이션 화면 미리보기
온보딩 플로우
신규 사용자 대상 · 활성
맞춤형 인사 및 제품 소개
주요 기능 핸즈온 가이드 (5단계)
설정 확인 및 다음 단계 안내
전환 퍼널
NPS 점수
+4사용자 세그먼트
실시간 활동
다나카 타로님이 온보딩을 완료했습니다
2분 전
사토 하나코님이 기능 소개에서 이탈했습니다
5분 전
스즈키 이치로님이 환영 화면을 열람했습니다
8분 전
다카하시 미사키님이 온보딩을 완료했습니다
12분 전
이토 켄타님이 프로필 설정을 건너뛰었습니다
15분 전
과제
7일 리텐션이 23%에 머물러 있었으며, 온보딩 변경이 발생할 때마다 엔지니어링 작업이 필요하였습니다.
솔루션
드래그 앤 드롭 제품 투어 빌더, 조건부 체크리스트, 자동 NPS 설문조사, 사용자 행동 분석을 제공합니다. 1줄 코드로 SDK 설치가 가능합니다.
성과
- 7일 리텐션 23% → 58%
- 온보딩 구축 시간 90% 단축
- 기능 발견율 3배 향상
- 200개 이상의 SDK 도입 사례
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