Pular para conteúdo
Voltar ao Portfólio
MicroSaaS / ProdutoBeta

NAVI — Ferramenta de Onboarding para SaaS

NAVI — Product Onboarding SDK

Construtor de onboarding no-code para produtos SaaS. Tours de produto, checklists e pesquisas NPS unificados.

2026 2 meses 2026-03
#SDK#Growth#Web Components#Edge#Analytics#No-code

Demonstração ao Vivo

Prévia da interface real do aplicativo

DEMO
app.navi.jp/dashboard

Fluxo de Onboarding

Para Novos Usuários · Ativo

Ao Vivo
Passo 1Boas-vindas
Mensagem

Saudação personalizada e introdução ao produto

Taxa de Conclusão98%
Tempo Médio8 seg
Passo 2Tour de Recursos
Interativo

Guia prático dos principais recursos (5 passos)

Taxa de Conclusão72%
Tempo Médio2 min 30 seg
Passo 3Concluído
Checklist

Confirmação de configuração e próximos passos

Taxa de Conclusão58%
Tempo Médio45 seg

Funil de Conversão

Tela de Boas-vindas
100%
2,480 usuários
Configuração de Perfil
86%
2,133 usuários
-14%
Tour de Recursos
72%
1,786 usuários
-14%
Primeira Ação
58%
1,438 usuários
-14%
Concluído
51%
1,265 usuários
-7%

Pontuação NPS

+4
72
58%Promotores
28%Neutros
14%Detratores
Respostas: 1,840

Segmentos de Usuários

Atividade em Tempo Real

Taro Tanaka concluiu o onboarding

há 2 min

Concluído

Hanako Sato abandonou no tour de recursos

há 5 min

Passo 2

Ichiro Suzuki visualizou as boas-vindas

há 8 min

Passo 1

Misaki Takahashi concluiu o onboarding

há 12 min

Concluído

Kenta Ito pulou a configuração de perfil

há 15 min

Passo 2

Desafio

Retenção de 7 dias travada em 23%; toda alteração de onboarding exigia trabalho de engenharia.

Solução

Construtor de tour de produto via drag-and-drop, checklists condicionais, pesquisas NPS automatizadas, analytics de comportamento do usuário. SDK instalado em 1 linha.

Resultados

  • Retenção de 7 dias 23% → 58%
  • Tempo de construção de onboarding reduzido em 90%
  • Descoberta de funcionalidades 3× maior
  • Mais de 200 adotantes do 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

  • フロントエンドエンジニア
  • バックエンド/エッジ
Stack Tecnológica

Tools & Platforms

Frontend

TypeScriptPreact

Data

PostgreSQL

Infrastructure

Cloudflare Workers

Other

SignalsWeb ComponentsShadow DOMDurable ObjectsKVPostHogSupabasePlaywright
Build with KGA

Pensando em um projeto semelhante?

Propomos a melhor solução para as necessidades do seu negócio.

Consultar Sobre Seu Projeto