sCPlab

• Роль. Единственный дизайнер в команде, отвечал за весь дизайн продукта.

• Срок. 8 месяцев.

• Старт. Продукт с нуля — на входе была только карта приложения.

• Что сделал. Исследование, сценарии, интерфейс, дизайн-систему и передачу в разработку.

• Итог. 68 экранов, UI-кит из 88 компонентов, готовые к разработке макеты со всеми состояниями.

Спроектировать с нуля мобильное приложение-тренер для профессиональных спортсменов.

Бизнес-цели: сократить время до старта тренировки и чаще переводить пользователей из бесплатного периода в подписку по полной цене (full-price).

Пожелание клиента: премиальный эффект стекла в интерфейсе.

Техническое ограничение от клиента: подписка продаётся только через встроенные покупки App Store. Окно оплаты — системное, его нельзя изменить или дополнить своими аргументами, а цена и пробный период задаются в App Store Connect, а не в приложении.

Конкуренты. Работают видео и программа, а жалуются пользователи на пейвол до того, как стало понятно, за что платить. Вывод: выделяться функциями и дизайном, а не ценой.

Воронка. В фитнес-приложениях платят ещё до того, как почувствовали ценность. Вывод: спортсмен должен вложить в продукт свои усилия до оплаты.

Зал. Потные руки, тремор после подхода, блики от ламп. Вывод: крупно, контрастно, в пару касаний.

Контент. Технику профессионал знает, возвращают его видео топовых тренеров. Вывод: видео — центр продукта.

Варианты сравнил по трём критериям: растит ли оплату по полной цене, работает ли в условиях зала, сколько стоит в разработке.

А — скидка на первый месяц. Быстрый эффект, но приучает ждать скидок и не растит оплату по полной цене — а это главная цель.

Б — короче анкета, пейвол на прежнем месте. Меньше трения, но человек всё ещё платит, не поняв, за что.

В — сначала ценность, потом оплата. Спортсмен бесплатно проходит тестирование с видеоуроками, а подписку видит, когда персональная программа уже готова: платят за то, во что вложились (IKEA-эффект).

Выбрал В — только он закрывает все четыре вывода исследования. Риск — первая оплата приходит позже. Я не спрятал его, а вынес на защиту вместе с планом проверки после запуска: сравнить пейвол в начале и в конце тестирования по конверсии в полную подписку.

Иконка «play» на шагах. В первой версии плашки на главном пути выглядели как обычные карточки — на каждом шаге люди задерживались, соображая, что делать дальше. Я добавил на плашки иконку «play»: сразу видно, что плашка запускает видео и следующий шаг. Задержек на шагах стало меньше.

Тренировка, которой не было. Видеосъёмки ещё не было, а проверить, читается ли интерфейс поверх видео в зале, нужно было сразу. Я сгенерировал кадр тренировки с плохим светом, наложил на него интерфейс и пошёл с телефоном в обычный спортзал: смотрел сам при ярком освещении и просил случайных посетителей прочитать экран и нажать нужную кнопку.

Проверка показала проблему: индикатор просмотра видео справа был недостаточно контрастным и терялся на фоне кадра. Я переделал его — теперь он читается при любом свете. Ошибку поймал до видеопродакшена и разработки, где исправление стоило бы дороже.

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

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

Макеты передал системно: все экраны, состояния и модальные окна собраны на Auto Layout и привязаны к UI-киту с дизайн-системой, анимации прокомментированы.

Как я работаю. Восемь месяцев я был единственным дизайнером, поэтому каждое решение привязывал к цели бизнеса и аргументировал сам. Спорные решения выношу открыто — вместе с риском и способом его проверить.

У продукта пока нет статистики, поэтому пишу, что изменил и на какую метрику рассчитано каждое изменение.

Продуктовые — как работает продукт и как с ним взаимодействуют

• Перестроил вход в продукт: тестирование с видеоуроками → «ваша программа готова» → подписка, вместо пейвола на старте или после анкеты. Рассчитано на рост конверсии в подписку по полной цене.

• Упростил экран тренировки: видео, таймер и базовые кнопки, всё под одну руку. Рассчитано на сокращение времени до старта тренировки и между подходами.

• Сделал навигацию главного пути очевидной: иконка «play» на плашках сразу показывает, что нажать дальше. Рассчитано на доходимость онбординга до конца.

• Сделал читаемым индикатор просмотра видео после проверки в зале: спортсмен с одного взгляда видит, сколько осталось. Рассчитано на комфорт на тренировке и возвраты.

• Спроектировал функции удержания: смарт-напоминания и еженедельную аналитику прогресса. Рассчитано на retention — есть повод возвращаться и видно, что растёшь.

Коммуникационные — как продукт доносит ценность до аудитории

• Ценность раньше цены: видео топовых тренеров и своя программа видны до того, как предлагают платить, — продукт сам объясняет, за что подписка.

• Момент оплаты объяснён: сообщение «ваша индивидуальная программа готова» превращает пейвол из преграды в логичный следующий шаг.

• Визуальный язык для профессионалов: глубокий чёрный, неоново-жёлтый акцент и стекло говорят «премиальный инструмент», а не «очередной трекер» — это оправдывает полную цену.

• Информация считывается за секунду: крупная типографика и контраст дают понять главное в зале между подходами, не вчитываясь.

68 экранов · 10 UX-тестов · 15 секций · 88 компонентов в 22 сетах · 47 стилей · 59 переменных · 5 983 инстанса · 117 020 нод · 27 изображений · 4 шрифтовых семейства