No-Code Builder в продуктовом стартапе

Первая версия была тёмной, визуально сырой и явно собранной в спешке. Но под этой поверхностью лежала по-настоящему проработанная система состояний компонентов — типы действий, навигация, покупка и восстановление покупок, всё описано. Поверхность сохранять не стоило. Логику — стоило.

Поэтому редизайн не был перекраской. Я пересобрала редактор целиком и рисовала светлую и тёмную темы одновременно: каждый компонент сразу рождался в двух видах, и разработчикам не приходилось додумывать второй. Это заняло около трёх недель.

Основа системы — цвет, и хранится он не палитрой, а токенами по смыслу: Background, Surface, Content, Border, Action. У каждого токена два значения, для светлой темы и для тёмной, поэтому компонент ссылается на токен и ему не нужно знать, какая тема включена сейчас — тему переключает система.

Токены группы Action идут дальше и несут свои состояния: initial, hover, pressed, disabled. Именно это отличает лист с цветами от системы, которую разработчик может внедрить, не задавая отдельный вопрос про каждое взаимодействие.

Компоненты собраны поверх этого слоя, и каждый выходит сразу со всеми вариантами и состояниями, которые понадобятся в продакшене. Кнопка — это не один прямоугольник: это размер, иерархия, слоты под иконки, загрузка, disabled — и всё это дважды, потому что светлая и тёмная темы рисовались вместе, а не переносились задним числом.

Задача была собрать онбординг для No-Code Builder: путь от первой регистрации до продукта, который реально настроен и подключён. Урон в этом пути наносят два места — подтверждение почты, которое тихо останавливает человека ещё до старта, и сама настройка, которая просит всё сразу.

Эти находки и задали принципы дизайна. Сделать OAuth полноценным равным входом, чтобы письмо с подтверждением перестало быть шлагбаумом. Применить progressive disclosure, чтобы настройка спрашивала по одной вещи за раз, а не выкатывала стену полей. И считать привязку приложения и установку SDK настоящей целью онбординга — потому что именно в этот момент, если верить цифрам, пользователь становится платящим.

Параллельно я разобрала четыре конкурирующих продукта — Adapty, RevenueCat, AppHud и Purchasely — по одной и той же методике: sign in, sign up, dashboard. Сравнение одних и тех же трёх моментов в четырёх продуктах делает различия аргументом, а не украшением.

Новая регистрация ставит OAuth рядом с формой почты, а не прячет за ней, оставляет в форме только действительно нужные поля и несёт свои состояния ошибок и валидации как нарисованные экраны, а не как записку для разработки.