Все кейсы Кейс 01 — продуктовый стартап
No-Code Builder в продуктовом стартапе
Посмотреть живой продуктNo-Code Builder — инструмент платформы Qonversion, с помощью которого команды могут без разработчиков собирать и публиковать пейволлы, онбординги и другие экраны, связанные с подпиской.
В процессе моей работы над этим продуктом появились ещё две важные части проекта: дизайн-система и онбординг. Поэтому в этом кейсе я отдельно рассказываю и о них.
- 26+ пользовательских сценариев за год: структура экранов, состояния и варианты в продукте со сложной логикой
- Дизайн-система и библиотека компонентов — строила, развивала и проводила дизайн-QA реализованных экранов
- ~3 недели на редизайн продукта на третьем месяце работы, светлая и тёмная темы сразу; за первые два месяца объём готовых макетов вырос примерно втрое
- роль
- Продуктовый дизайнер — ведущий дизайнер интерфейсов продукта
- команда
- Head of Product, тимлид разработки, CEO, фронтенд-инженеры
- сроки
- Редизайн сдан за ~3 недели, затем год фичевых флоу
- что сделано
- Редизайн редактора в двух темах, собственный UI-кит билдера, галерея шаблонов, multi-page editing, платежи, генерация изображений нейросетью
- результат
- 26+ флоу выпущено за год
Глава 01
Редизайн билдера
Макеты, которые я получила в начале работы, и то, что успела изменить за два месяца работы над флоу и за три недели редизайна.
На момент моего подключения к проекту билдер был практически на начальном этапе: первая версия уже существовала, но флоу почти не были проработаны, а сам интерфейс выглядел сырым и требовал полной пересборки.
Поэтому я не стала просто обновлять внешний вид существующего редактора, а пересобрала его целиком. Отдельно проработала структуру экранов и флоу, затем перенесла всё это в новую визуальную систему. Светлая и тёмная темы прорабатывались параллельно, чтобы каждый компонент и его состояния сразу были согласованы в обоих вариантах и не требовали дополнительных решений со стороны разработки.
На сам редизайн ушло около трёх недель.
Я пришла в команду в середине ноября и до начала января успела сделать около одиннадцати флоу. Это и было первой задачей: не сосредотачиваться на визуальной части, а как можно быстрее разблокировать работу разработчиков.
Небольшое исследование перед редизайном
Времени было мало, поэтому подход был упрощённый, но прагматичный: я разобрала продукты конкурентов — структуру интерфейса, UX-паттерны, доступность функций, выделила из них лучшие практики и адаптировала самые работающие решения под наш конструктор.
До и после редизайна
Одна и та же рабочая область редактора: версия 2024 года, которая мне досталась, и редизайн 2025 года.
Помимо Билдера я также работала над страницами Дашборда, ниже показаны некоторые из них.
Фичи, которые прошли через дизайн
За год через дизайн прошло больше двадцати шести сценариев. Вот некоторые из них:
- Раздел ассетов — раздел, где собраны все компоненты, доступные для использования в макетах: кнопки, поля, карточки, иконки и другие элементы интерфейса.
- Локализация — настройка разных языков для одного макета без копии файла.
- Настройки Билдера — глобальные настройки, влияющие на подключаемые к макету продукты.
- Генерация изображений — пользователь получает арт для пейволла по промпту, а билдер хранит историю промптов, чтобы к удачному результату можно было вернуться.
Интерактивные прототипы
С кем работала
- Head of Product — ревью макетов, маркетинговая аналитика решений
- Тимлид разработки и фронтенд-инженеры — брейнстормы по реализации фичей, обсуждение лучших решений
- CEO — приносил идеи фич
Глава 02
Дизайн-система
Библиотека, из которой собран билдер и остальной продукт: семантические токены, компоненты в двух темах.
- Storybook — библиотеку внедрила команда разработки
- Датированные changelog-страницы — систему вели, а не сдали один раз
Основа системы — цвет, хранится он не палитрой, а токенами по смыслу: Background, Surface, Content, Border, Action. У каждого токена два значения, для светлой темы и для тёмной, поэтому компонент ссылается на токен, а тему переключает система.
На компонентах становится видно, как работает эта палитра. Например, кнопка не получает конкретный цвет напрямую — она использует токен Action, а его значения для initial, hover, pressed и disabled задаются в самой системе. Поэтому один и тот же компонент корректно работает в обеих темах, меняются только значения токенов.
Тайпкит
Дизайн-система Qonversion
Система, которая осталась живой
Когда команда разработки позже перешла на shadcn/ui, у системы уже был словарь токенов и компонентов. Переход оказался миграцией, а не стартом с нуля.
Глава 03
Онбординг для билдера
Онбординг в этом проекте — это путь от первой регистрации до полностью настроенного No-Code Билдера. За это время пользователь должен создать аккаунт, подключить своё приложение и установить SDK, чтобы начать пользоваться продуктом.
- Регистрация и настройка пересобраны — OAuth как полноценный вход, настройка спрашивает по одному шагу за раз
- Дашборд начат до редизайна, поэтому выглядит иначе: в нём главное — логика и способ подачи информации пользователю
- роль
- Продуктовый дизайнер
- команда
- Head of Product
- что сделано
- Конкурентный ресёрч по 4 продуктам, новые флоу регистрации и настройки с полным покрытием состояний
Задача была собрать онбординг для No-Code Билдера — путь от первой регистрации до момента, когда продукт полностью настроен и подключён. В существующем сценарии было два основных проблемных места: подтверждение почты, которое могло остановить пользователя ещё до начала работы, и настройка продукта, где слишком много всего требовалось сделать сразу.
Это определило основные принципы нового онбординга. OAuth стал полноценным способом регистрации наравне с почтой, чтобы не заставлять пользователя проходить дополнительный шаг с подтверждением. Настройку я разбила на небольшие последовательные шаги: вместо большого количества полей пользователь получает только то, что нужно сделать на текущем этапе. При этом основной целью онбординга стала не сама регистрация, а подключение приложения и установка SDK — именно после этих шагов пользователь с большей вероятностью переходит к платному использованию продукта.
Параллельно я разобрала четыре конкурирующих продукта: Adapty, RevenueCat, AppHud и Purchasely.
Ниже показаны некоторые экраны из флоу онбординга.
Настройка SDK
Связаться
Открыта к ролям продуктового дизайнера: удалённо в Европе и Евразии или гибрид в Сербии. Быстрее всего написать на почту или в Телеграм.