Bỏ qua tới nội dung
Danh sách dự án
MicroSaaS / ProductBeta

NAVI — Công cụ Onboarding SaaS

NAVI — Product Onboarding SDK

Trình tạo onboarding no-code cho các sản phẩm SaaS. Hợp nhất product tour, checklist và khảo sát NPS.

2026 2 tháng 2026-03
#SDK#Growth#Web Components#Edge#Analytics#No-code

Demo trực tiếp

Xem trước giao diện ứng dụng thực tế

DEMO
app.navi.jp/dashboard

Luồng Onboarding

Dành cho Người Dùng Mới · Đang Hoạt Động

Trực tiếp
Bước 1Chào mừng
Tin nhắn

Lời chào cá nhân hóa và giới thiệu sản phẩm

Tỷ lệ Hoàn thành98%
Thời gian Trung bình8 giây
Bước 2Tour Tính năng
Tương tác

Hướng dẫn thực hành các tính năng chính (5 bước)

Tỷ lệ Hoàn thành72%
Thời gian Trung bình2 phút 30 giây
Bước 3Hoàn thành
Danh sách Kiểm tra

Xác nhận thiết lập và các bước tiếp theo

Tỷ lệ Hoàn thành58%
Thời gian Trung bình45 giây

Phễu Chuyển đổi

Màn hình Chào mừng
100%
2,480 người dùng
Thiết lập Hồ sơ
86%
2,133 người dùng
-14%
Tour Tính năng
72%
1,786 người dùng
-14%
Hành động Đầu tiên
58%
1,438 người dùng
-14%
Hoàn thành
51%
1,265 người dùng
-7%

Điểm NPS

+4
72
58%Người Ủng hộ
28%Trung lập
14%Người Phản đối
Số Phản hồi: 1,840

Phân Khúc Người Dùng

Hoạt động Theo Thời Gian Thực

Taro Tanaka đã hoàn thành onboarding

2 phút trước

Hoàn thành

Hanako Sato đã rời ở tour tính năng

5 phút trước

Bước 2

Ichiro Suzuki đã xem màn hình chào mừng

8 phút trước

Bước 1

Misaki Takahashi đã hoàn thành onboarding

12 phút trước

Hoàn thành

Kenta Ito đã bỏ qua thiết lập hồ sơ

15 phút trước

Bước 2

Thách thức

Tỷ lệ giữ chân 7 ngày dậm chân ở mức 23%; mọi thay đổi onboarding đều cần đến đội kỹ thuật.

Giải pháp

Trình tạo product tour kéo-thả, checklist có điều kiện, khảo sát NPS tự động, phân tích hành vi người dùng. Cài đặt SDK 1 dòng.

Kết quả

  • Tỷ lệ giữ chân 7 ngày 23% → 58%
  • Giảm 90% thời gian xây dựng onboarding
  • Khám phá tính năng cao gấp 3 lần
  • Hơn 200 đơn vị triển khai SDK
Key Metrics

Measured Impact

コアSDK

0.9KB

初期化時間

6ms

グローバルP95

120ms

D7リテンション

+22pt

Features

What it does

SDK

超軽量コア

0.9KB(gzip)でツアー / チェックリスト / NPSをサポート。

宿主非干渉

Shadow DOMで完全隔離し、宿主のCSS/JSを汚染しない。

ビルダ

条件分岐フロー

ユーザー属性 / 行動に応じて分岐するフローを視覚的に構築。

多言語

フロー単位で多言語コンテンツを管理。

分析

フローファネル

各ステップの離脱率を可視化。

NPS トレンド

NPSスコアの時系列とカテゴリ別要因を分析。

Architecture

System Layers

Layered architecture showing components, responsibilities, and data flow.

L1

Layer

SDK

宿主アプリに依存せず動作するスタンドアロンSDK。

Preact SignalsWeb ComponentsShadow DOM
L2

Layer

配信

フロー定義はエッジキャッシュから最速で配信。

Cloudflare WorkersKVETag
L3

Layer

管理画面

Drag & Drop でフローを構築し、JSONスキーマをPgに保存。

Next.jsReact DnDZod
L4

Layer

分析

アクション完了率やNPSスコアを時系列で可視化。

PostHogClickHouse
L5

Layer

品質

主要ブラウザでの表示回帰をVisual Regressionで検出。

PlaywrightVisual Regression
Development Process

How we built it

01

Discovery

自社プロダクトおよび友人企業のオンボーディング痛点をインタビュー。

Deliverables

  • 痛点マップ
02

パフォーマンス要件

コアSDKサイズと初期化時間のハード予算を設定。

Deliverables

  • 予算ドキュメント
03

SDK設計

Shadow DOM境界とイベントインターフェースを決定。

Deliverables

  • ADR
04

Implementation

コアランタイム → 管理画面 → 分析の順で実装。

Deliverables

  • SDKパッケージ
  • ダッシュボード
05

QA

Playwright + Visual Regression + SDKバジェットCIで防御。

Deliverables

  • CIパイプライン
06

Beta

自社および協業プロダクト3つで試験導入。

Deliverables

  • ベータFB
07

Iteration

フロー完了率を指標にしたA/B改善サイクル。

Deliverables

  • 改善レポート
Roadmap

Delivery Timeline

  • P0Done2026-03-08

    SDKアーキテクチャ

    コアランタイムとフロー遅延ロードの分離方針を確定。

  • P1Done2026-03-26

    コアランタイム

    0.9KBのコアランタイムを実装し、シンプルツアーを動作検証。

  • P2In Progress2026-04-18

    ビジュアルビルダ

    ノーコードビルダで条件分岐フローを構築可能にする開発中。

  • P3Planned2026-05

    NPS & 分析

    PostHog連携でNPSおよびアクションイベント分析を予定。

  • P4Planned2026-06

    一般公開

    マイクロSaaSとして料金プラン整備後に公開予定。

Team

Who built it

2engineers

Roles

  • フロントエンドエンジニア
  • バックエンド/エッジ
Công nghệ sử dụng

Tools & Platforms

Frontend

TypeScriptPreact

Data

PostgreSQL

Infrastructure

Cloudflare Workers

Other

SignalsWeb ComponentsShadow DOMDurable ObjectsKVPostHogSupabasePlaywright
Build with KGA

Bạn quan tâm đến dự án tương tự?

Chúng tôi sẽ đề xuất giải pháp tốt nhất cho doanh nghiệp của bạn.

Trao đổi về dự án