Реализация Onboarding Wizard для SaaS-приложения

SaaS онбординг-визард

Онбординг определяет activation rate — процент пользователей, которые дошли до момента ощущения ценности продукта. Wizard — пошаговый сценарий, ведущий пользователя к первому успеху.

Проектирование шагов

Задача онбординга — довести до «aha moment» за минимальное время. Каждый лишний шаг снижает completion rate.

Шаг 1: Профиль компании (название, тип, размер)
Шаг 2: Пригласить первого участника команды
Шаг 3: Создать первый проект (ключевое действие)
Шаг 4: Подключить интеграцию (Slack/GitHub/Jira)
→ Aha moment: первый активный проект с командой

Схема данных

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])
}

Компонент визарда

// 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">
      {/* Progress bar */}
      <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>
  );
}

Трекинг онбординга

// Отслеживание completion rate по шагам
export async function trackOnboardingStep(step: string, tenantId: string) {
  posthog.capture('onboarding_step_completed', {
    distinct_id: tenantId,
    step,
    timestamp: new Date().toISOString(),
  });
}

// В аналитике смотрим funnel:
// onboarding_started → profile_completed → team_invited → project_created
// Находим где самый большой drop-off

Повторный онбординг

// Прогресс сохраняется — пользователь может вернуться позже
// При каждом входе проверяем статус онбординга

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 };
}

Разработка онбординг-визарда с трекингом и восстановлением прогресса — 3–5 рабочих дней.