Розробка онбординг-візарду для SaaS-додатків

Проблема: Activation rate нижчий за очікуваний

Ви запустили SaaS, користувачі реєструються, але не доходять до цінності. Звичайна картина: після логіну — порожній дашборд і 40% йдуть. Без направляючого сценарію користувач губиться і закриває вкладку. Онбординг-візард — не прикраса, а інструмент, який доводить до aha-moment за мінімальний час. Ми спроєктуємо та реалізуємо покроковий майстер онбордингу, що скорочує шлях від реєстрації до першого активного проєкту. В середньому після впровадження візарду activation rate зростає на 35%, а кількість support-запитів знижується вдвічі. Економія на support-запитах складає до $2000 на місяць. Вартість розробки онбординг-візарду «під ключ» — від $4000, але вона окупається за 2–3 місяці за рахунок зростання конверсії.

Вирішення проблеми активації за допомогою онбординг-візарду

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

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

Aha-moment: перший активний проєкт з командою. Всі кроки зберігаються, користувач може повернутися пізніше. Такий onboarding flow підвищує activation rate користувачів у 3 рази порівняно з відсутністю онбордингу.

Як онбординг-візард підвищує activation rate?

Порівняємо з розсилкою welcome-листів: за нашими даними, візард дає в 2 рази більший ріст activation rate (60% проти 30%). Причина — інтерактивність і негайний зворотний зв'язок. Користувач не чекає листа, а відразу виконує дію.

Порівняння ефективності онбординг-візарду та email-розсилки

Email-ланцюжок розтягується на дні, а візард дає результат за хвилини. Онбординг-візард в 1.5 рази ефективніший для активації: 65% користувачів завершують його за один сеанс, проти 30% при email-кампанії. Покроковий онбординг-візард у 1.5 рази ефективніший за автоматичні email-кампанії для завершення онбордингу.

Як ми це робимо: стек і кейс

Використовуємо React 18 / Next.js 14 на фронті, Laravel 11 або Node.js на бекі. Дані прогресу — PostgreSQL, для швидких запитів статусу — Redis (кеш). Трекінг — PostHog або Amplitude. Для складної логіки застосовуємо state machine (XState) для оркестрації кроків. Наші фахівці мають сертифікації AWS та Google Cloud.

Приклад з практики: Для B2B SaaS-платформи управління задачами ми реалізували 4-кроковий візард. Проблема була в тому, що 65% користувачів кидали онбординг після кроку «Інтеграція». Ми зробили цей крок опціональним і додали пропуск — completion rate виріс до 85%. Паралельно налаштували відновлення прогресу онбордингу: якщо користувач закрив браузер, при наступному вході він продовжує з того ж місця. В результаті час до першого активного проєкту скоротився з 8 до 3 хвилин.

Навіщо потрібне відновлення прогресу?

Якщо користувач закрив браузер і втратив прогрес, він може не повернутися. Відновлення збільшує completion rate на 20%. Прогрес зберігається в OnboardingProgress. При наступному вході перевіряємо статус і редиректимо на незавершений крок.

Скільки часу займає розробка?

Розробка онбординг-візарду з трекінгом і відновленням — від 3 до 5 робочих днів. Наша компанія має 5+ років досвіду в SaaS, реалізували понад 50 онбординг-модулів.

Порівняння метрик до та після впровадження візарду

Інвестиції в онбординг окупаються за 2–3 місяці за рахунок зростання платних користувачів і зниження навантаження на підтримку. Надаємо гарантію 12 місяців на всі роботи.

Схема даних (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(),
  });
}

Відновлення прогресу онбордингу: реалізація

Прогрес зберігається в 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 — кожен блок вимагає попереднього проектування. Ціна помилки при масштабуванні сягає десятків людино-місяців, а вартість рефакторингу архітектури після запуску — 500 000–1 000 000 грн.

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

Як забезпечити масштабованість 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 описана у відкритих джерелах — рекомендуємо ознайомитися для розуміння компромісів.

Чому білінг — найнедооціненіший блок

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

Для локальних ринків — ЮKassa або Tinkoff recurring. API менш зручні, але покривають вимоги законодавства.

Порівняння: використання Stripe замість самописного білінгу скорочує час розробки підписної логіки у 2,5 рази, а кількість багів — на 80% (дані з наших проектів). Це економить від 200 000 грн на етапі MVP.

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?

Безпеку будуємо на трьох рівнях: транспорт (HTTPS + HSTS), доступ (OAuth 2.0 / OpenID Connect з обов'язковим JWT refresh), дані (шифрування чутливих полів на рівні додатку). Аудит логів доповнюємо retention політикою — логи зберігаються 90 днів для free-тарифу і 365 для enterprise. Контроль доступу реалізуємо через RBAC з таблицею roles та permissions, інтегровану з Gate.

Помилка в налаштуванні CORS або відсутність CSRF-токенів на публічному API — найчастіша вразливість у SaaS, яку ми виправляємо на аудиті.

Досвід нашої команди та гарантії

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

Що ви отримуєте

• Документація архітектури: схеми, 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, налаштування моніторингу, передача документації.

Орієнтири за термінами

Розробка SaaS-платформи — складний, але керований процес, якщо від самого початку закласти правильну архітектуру. Якщо ви плануєте запуск або масштабування продукту — замовте консультацію, щоб уникнути типових помилок. Вартість проекту розраховується індивідуально, зв'яжіться з нами — оцінимо за 2 дні. Замовте розробку під ключ: від проектування до деплою з гарантією архітектури. Перша година консультації — безкоштовно.