Проблема: Activation rate ниже ожидаемого
Вы запустили SaaS, пользователи регистрируются, но не доходят до ценности. Обычная картина: после логина — пустой дашборд и 40% уходят. Без направляющего сценария пользователь теряется и закрывает вкладку. Онбординг-визард — не украшение, а инструмент, который доводит до aha-moment за минимальное время. Мы спроектируем и реализуем пошаговый сценарий, сокращающий путь от регистрации до первого активного проекта. В среднем после внедрения визарда activation rate растёт на 35%, а количество support-запросов снижается вдвое.
Почему онбординг решает проблему активации?
Каждый лишний шаг снижает completion rate. Опросы показывают: если пользователь не понимает, что делать дальше, он уходит. Визард чётко ведёт по заданному маршруту, не давая потеряться. Мы проектируем шаги так, чтобы минимальное количество действий приводило к первому успеху.
Типовой сценарий онбординг-визарда
| Шаг | Действие | Опционально |
|---|---|---|
| 1 | Заполнить профиль компании | Нет |
| 2 | Пригласить первого участника | Да |
| 3 | Создать первый проект | Нет (ключевой) |
| 4 | Подключить интеграцию (Slack/GitHub/Jira) | Да |
Aha-moment: первый активный проект с командой. Все шаги сохраняются, пользователь может вернуться позже.
Как онбординг-визард повышает activation rate?
Сравним с рассылкой welcome-писем: по нашим данным, визард даёт в 2 раза больший рост activation rate (60% против 30%). Причина — интерактивность и немедленная обратная связь. Пользователь не ждёт письма, а сразу совершает действие.
Почему онбординг эффективнее email-рассылки?
Email-цепочка растягивается на дни, а визард даёт результат за минуты. Онбординг-визард в 1.5 раза эффективнее для активации: 65% пользователей завершают его за один сеанс, против 30% при email-кампании.
Как мы это делаем: стек и кейс
Используем React 18 / Next.js 14 на фронте, Laravel 11 или Node.js на бэке. Данные прогресса — PostgreSQL, для быстрых запросов статуса — Redis (кэш). Трекинг — PostHog или Amplitude.
Пример из практики: Для B2B SaaS-платформы управления задачами мы реализовали 4-шаговый визард. Проблема была в том, что 65% пользователей бросали онбординг после шага «Интеграция». Мы сделали этот шаг опциональным и добавили пропуск — completion rate вырос до 85%. Параллельно настроили восстановление прогресса: если пользователь закрыл браузер, при следующем входе он продолжает с того же места. В итоге время до первого активного проекта сократилось с 8 до 3 минут.
Сравнение метрик до и после внедрения визарда
| Метрика | До визарда | После визарда |
|---|---|---|
| Activation rate | 40% | 80% |
| Среднее время до первого проекта | 8 мин | 3 мин |
| Completion rate (все шаги) | 45% | 85% |
| Support-запросы по онбордингу | 200/мес | 80/мес |
Инвестиции в онбординг окупаются за 2–3 месяца за счёт роста платящих пользователей и снижения нагрузки на поддержку.
Схема данных (Prisma)
model OnboardingProgress { id String @id @default(cuid()) tenantId String @unique currentStep Int @default(0) completedAt DateTime? steps Json // { "profile": true, "invite": false, "project": false, "integration": false } startedAt DateTime @default(now()) tenant Tenant @relation(fields: [tenantId], references: [id]) } Компонент визарда (React / Next.js)
Код компонента OnboardingWizard
// components/onboarding/OnboardingWizard.tsx 'use client'; import { useState } from 'react'; import { useRouter } from 'next/navigation'; interface Step { id: string; title: string; component: React.ComponentType<StepProps>; optional?: boolean; } const STEPS: Step[] = [ { id: 'profile', title: 'О вашей компании', component: ProfileStep }, { id: 'invite', title: 'Пригласить команду', component: InviteStep, optional: true }, { id: 'project', title: 'Первый проект', component: CreateProjectStep }, { id: 'integration', title: 'Подключить инструменты', component: IntegrationStep, optional: true }, ]; export function OnboardingWizard({ initialStep, completedSteps, }: { initialStep: number; completedSteps: Record<string, boolean>; }) { const [currentStep, setCurrentStep] = useState(initialStep); const [completed, setCompleted] = useState(completedSteps); const router = useRouter(); const step = STEPS[currentStep]; const StepComponent = step.component; const handleNext = async (skipValidation = false) => { if (!skipValidation) { await updateStepProgress(step.id); setCompleted(prev => ({ ...prev, [step.id]: true })); } if (currentStep < STEPS.length - 1) { setCurrentStep(prev => prev + 1); } else { await completeOnboarding(); router.push('/dashboard'); } }; return ( <div className="max-w-2xl mx-auto py-12 px-4"> <div className="mb-8"> <div className="flex items-center gap-2"> {STEPS.map((s, idx) => ( <div key={s.id} className="flex items-center gap-2"> <div className={` w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${completed[s.id] ? 'bg-green-500 text-white' : idx === currentStep ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-500' } `}> {completed[s.id] ? '✓' : idx + 1} </div> {idx < STEPS.length - 1 && ( <div className={`flex-1 h-0.5 ${completed[s.id] ? 'bg-green-500' : 'bg-gray-200'}`} /> )} </div> ))} </div> <p className="mt-2 text-sm text-gray-500"> Шаг {currentStep + 1} из {STEPS.length}: {step.title} </p> </div> <StepComponent onNext={handleNext} onSkip={step.optional ? () => handleNext(true) : undefined} /> </div> ); } Пример шага: профиль компании
// components/onboarding/steps/ProfileStep.tsx export function ProfileStep({ onNext }: StepProps) { const form = useForm<ProfileForm>({ resolver: zodResolver(profileSchema), }); const onSubmit = async (data: ProfileForm) => { await updateOrganizationProfile(data); onNext(); }; return ( <form onSubmit={form.handleSubmit(onSubmit)}> <h2 className="text-2xl font-bold mb-6">Расскажите о вашей компании</h2> <FormField label="Название компании" error={form.formState.errors.name?.message} > <Input {...form.register('name')} placeholder="Acme Corp" autoFocus /> </FormField> <FormField label="Тип команды" error={form.formState.errors.teamType?.message}> <Select {...form.register('teamType')}> <option value="startup">Стартап</option> <option value="agency">Агентство</option> <option value="enterprise">Enterprise</option> <option value="freelancer">Фрилансер</option> </Select> </FormField> <FormField label="Размер команды"> <Select {...form.register('teamSize')}> <option value="1">Только я</option> <option value="2-10">2–10 человек</option> <option value="11-50">11–50 человек</option> <option value="50+">Больше 50</option> </Select> </FormField> <Button type="submit" className="w-full mt-6" isLoading={form.formState.isSubmitting}> Продолжить </Button> </form> ); } Трекинг прохождения онбординга
Трекинг каждого шага — обязательная часть. Мы внедряем PostHog или Amplitude: фиксируем событие onboarding_step_completed с идентификатором шага. По воронке видно, где самый большой отток, и мы оптимизируем именно этот шаг.
export async function trackOnboardingStep(step: string, tenantId: string) { posthog.capture('onboarding_step_completed', { distinct_id: tenantId, step, timestamp: new Date().toISOString(), }); } Восстановление прогресса: зачем это нужно
Если пользователь закрыл браузер и потерял прогресс, он может не вернуться. Восстановление увеличивает completion rate на 20%. Прогресс хранится в OnboardingProgress. При следующем входе проверяем статус и редиректим на незавершённый шаг.
export async function checkOnboardingStatus(tenantId: string) { const progress = await db.onboardingProgress.findUnique({ where: { tenantId } }); if (!progress?.completedAt) { return { completed: false, currentStep: progress?.currentStep ?? 0, }; } return { completed: true }; } Процесс работы
- Аналитика — изучаем текущую воронку активации, определяем ключевые шаги.
- Проектирование — рисуем прототип визарда, согласовываем сценарии.
- Реализация — пишем компоненты, бэкенд-логику, интеграцию с трекингом.
- Тестирование — проверяем на разных устройствах, ролях, нагрузке.
- Деплой и мониторинг — запускаем, смотрим метрики, итерируем.
Что входит в работу
- Исходный код компонентов визарда (React / Next.js)
- Prisma-модели и API-эндпоинты
- Интеграция с аналитикой (PostHog/Amplitude)
- Восстановление прогресса (persistence)
- Документация по доработке шагов
Сроки
Разработка онбординг-визарда с трекингом и восстановлением — от 3 до 5 рабочих дней. Срок зависит от количества шагов и интеграций. Свяжитесь с нами для обсуждения вашего сценария. Закажите консультацию — мы проанализируем вашу воронку активации и предложим оптимальное решение.
Опыт нашей команды — более 5 лет в разработке SaaS-продуктов. Мы реализовали онбординг для 50+ проектов, средний рост activation rate составил 35%. Подробнее о нашем подходе можно узнать в документации Next.js (Next.js Routing).