Разработка онбординг-визарда для SaaS-приложений

Проблема: Activation rate ниже ожидаемого

Вы запустили SaaS, пользователи регистрируются, но не доходят до ценности. Обычная картина: после логина — пустой дашборд и 40% уходят. Без направляющего сценария пользователь теряется и закрывает вкладку. Онбординг-визард — не украшение, а инструмент, который доводит до aha-moment за минимальное время. Мы спроектируем и реализуем пошаговый сценарий, сокращающий путь от регистрации до первого активного проекта. В среднем после внедрения визарда activation rate растёт на 35%, а количество support-запросов снижается вдвое.

Почему онбординг решает проблему активации?

Каждый лишний шаг снижает completion rate. Опросы показывают: если пользователь не понимает, что делать дальше, он уходит. Визард чётко ведёт по заданному маршруту, не давая потеряться. Мы проектируем шаги так, чтобы минимальное количество действий приводило к первому успеху.

Типовой сценарий онбординг-визарда

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 минут.

Сравнение метрик до и после внедрения визарда

Инвестиции в онбординг окупаются за 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)

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

Процесс работы

1. Аналитика — изучаем текущую воронку активации, определяем ключевые шаги.
2. Проектирование — рисуем прототип визарда, согласовываем сценарии.
3. Реализация — пишем компоненты, бэкенд-логику, интеграцию с трекингом.
4. Тестирование — проверяем на разных устройствах, ролях, нагрузке.
5. Деплой и мониторинг — запускаем, смотрим метрики, итерируем.

Что входит в работу

• Исходный код компонентов визарда (React / Next.js)
• Prisma-модели и API-эндпоинты
• Интеграция с аналитикой (PostHog/Amplitude)
• Восстановление прогресса (persistence)
• Документация по доработке шагов

Сроки

Разработка онбординг-визарда с трекингом и восстановлением — от 3 до 5 рабочих дней. Срок зависит от количества шагов и интеграций. Свяжитесь с нами для обсуждения вашего сценария. Закажите консультацию — мы проанализируем вашу воронку активации и предложим оптимальное решение.

Опыт нашей команды — более 5 лет в разработке SaaS-продуктов. Мы реализовали онбординг для 50+ проектов, средний рост activation rate составил 35%. Подробнее о нашем подходе можно узнать в документации Next.js (Next.js Routing).

Разработка SaaS-платформ

Мы знаем эту боль наизусть. Запускаешь MVP с авторизацией и подпиской, а через полгода упираешься в архитектурные решения, которые нельзя откатить без переписывания половины кода. Multi-tenancy, биллинг, аудит логов, feature flags — каждый блок требует предварительного проектирования, иначе цена ошибки при масштабировании уходит в десятки человеко-месяцев, а в деньгах — от 3–5 млн ₽ на рефакторинг.

За 8 лет работы над SaaS-продуктами мы проверили на практике, какие решения работают, а какие превращают поддержку в ад. Ниже — архитектурные подходы, которые используем сами и рекомендуем клиентам.

Как мы строим multi-tenancy: изоляция без оверхеда

Первое, что решаем — схема разделения данных. Shared schema (tenant_id на каждой таблице) — наш стандартный выбор для большинства проектов. Все арендаторы в одной базе, миграции применяются разом, операционная сложность минимальна. В Laravel реализуем через Global Scope:

protected static function booted(): void
{
    static::addGlobalScope('tenant', function (Builder $builder) {
        $builder->where('tenant_id', TenantContext::current()->id);
    });
}

Глобальный скоуп — только первый уровень защиты. Обязательно добавляем Row-Level Security в PostgreSQL — она сработает, если приложение пропустит WHERE tenant_id = ?:

ALTER TABLE orders ENABLE ROW LEVEL SECURITY;
CREATE POLICY tenant_isolation ON orders
    USING (tenant_id = current_setting('app.tenant_id')::uuid);

Для enterprise-клиентов, которым нужна физическая изоляция, выделяем отдельную базу. Такой гибридный подход (shared + dedicated) используется в 80% зрелых SaaS: базовый продукт на shared schema, премиум — на отдельной инстанции. Мы внедряем его с первого спринта, чтобы не переписывать логику позже.

Модель multi-tenancy описана в Wikipedia: Multitenancy — рекомендуем ознакомиться для понимания trade-off'ов.

Почему биллинг — самый недооценённый блок

Upgrade посреди расчётного периода, downgrade с отложенным вступлением, истёкший trial, failed payment с grace period — Stripe Billing закрывает 90% сценариев из коробки. Обязательно обрабатываем вебхуки (customer.subscription.updated, invoice.payment_failed) с идемпотентным ключом — без него retry на клиенте приведёт к двойному списанию.

Для рынка СНГ — ЮKassa или Tinkoff recurring. API менее удобны, но покрывают требования 54-ФЗ.

Сравнение: переход с самописного биллинга на Stripe сокращает время разработки подписочной логики на 60%, а количество багов — на 80% (данные наших проектов). Экономия в деньгах для проекта среднего размера — до 2–3 млн ₽ на этапе разработки.

Onboarding: как не потерять пользователя до aha-moment

Технически onboarding — это wizard с persistent состоянием, который нельзя случайно пропустить. Таблица onboarding_steps с чек-листом, middleware редиректит на незавершённый шаг. После завершения — флаг в user settings, middleware отключается.

Критический нюанс: показывайте прогресс реального продукта, не абстрактные шаги. «Создайте первый отчёт» вместо «Завершите шаг 3 из 5». Мы используем drip-кампании через Customer.io или собственную очередь с отложенными jobs — если пользователь выполнил ключевое действие, следующее письмо не отправляется.

Feature flags и управление доступом

SaaS с тарифами требует гранулярного контроля. Не делайте if ($user->plan === 'pro') по всему коду — через месяц он станет неподдерживаемым. Вместо этого:

• Backend: Gate + Policy с проверкой через таблицу features, связанную с планами.
• Frontend: контекст с флагами, загружаемый при инициализации приложения.
• Open-source инструменты: Unleash или Growthbook — UI для A/B-тестов и rollout.

Как защитить API от агрессивных клиентов

Rate limiting — must-have для публичного API. Один клиент может положить всех остальных. В Laravel используем Redis с sliding window counter:

Каждый ответ содержит X-RateLimit-Remaining и X-RateLimit-Reset — клиенты рассчитывают на эти заголовки.

Аудит-логи и мониторинг: что, кто и когда

Без аудит-лога невозможно узнать, кто удалил проект или когда изменились настройки биллинга. Таблица audit_logs с индексами по (tenant_id, created_at) и (subject_type, subject_id). В Laravel — Observer'ы на ключевых моделях.

class OrderObserver
{
    public function created(Order $order): void
    {
        AuditLog::create([
            'tenant_id' => $order->tenant_id,
            'user_id' => auth()->id(),
            'action' => 'created',
            'subject_type' => Order::class,
            'subject_id' => $order->id,
        ]);
    }
}

Мониторинг: Sentry для exception tracking, Grafana + Prometheus для метрик. Алерты на error rate > 5% и response time p95 > 2s.

Опыт нашей команды и гарантии

Над SaaS-платформами работают инженеры с 8+ летним опытом, за плечами — 50+ проектов, от стартапов до enterprise с миллионными нагрузками. Мы даём гарантию на архитектурные решения: если выбранный подход не масштабируется — перепроектируем за свой счёт.

Deliverables и гарантии

• Документация архитектуры: схемы, ERD, sequence diagrams.
• Настройка CI/CD (GitHub Actions / GitLab CI).
• Доступы к репозиторию, стейджингу и продакшену.
• Обучение команды: 2–3 сессии по код-ревью и runbook.
• Post-launch поддержка 1 месяц.
• Гарантия на архитектуру: бесплатный рефакторинг, если решение не проходит по нагрузке.

Процесс работы

1. Discovery (1–2 недели) — аудит текущей архитектуры, скоуп MVP, приоритеты фич.
2. Проектирование (1 неделя) — выбор стека, схема multi-tenancy, план биллинга.
3. Разработка (4–12 недель) — спринты по 2 недели, демо после каждого.
4. Тестирование (1 неделя) — нагрузочные тесты под target нагрузки, security audit.
5. Деплой и обучение (1 неделя) — rollout, настройка мониторинга, передача документации.

Ориентиры по срокам

Стоимость рассчитывается индивидуально — свяжитесь с нами, мы оценим проект за 2 дня. Закажите разработку под ключ: от проектирования до деплоя с гарантией архитектуры. Получите консультацию по архитектуре вашего продукта — первый час бесплатно.