Ymove: Редизайн фитнес-приложения и лендинга тренера
Отрасль
SaaS
FitTech
Услуги
UX/UI-дизайн
Дизайн мобильного приложения
Дизайн лендинга
Сайт
ymove.appОбзор
Ymove — AI-платформа, которая позволяет фитнес-тренерам запускать полностью брендированные iOS и Android приложения без технических знаний. Платформа берет на себя инфраструктуру: тренеры сосредотачиваются на программах и клиентах.
Два ключевых элемента продукта требовали редизайна: стандартные шаблоны экранов приложения, которые видят новые тренеры при регистрации, и шаблон лендинга для конвертации трафика из социальных сетей в клиентов. Оба напрямую влияют на то, успешно ли тренер запускает приложение и вовлекаются ли его клиенты, — а значит, критически важны для роста платформы.
Задача
Стандартные шаблоны формируют первое впечатление о каждом приложении, созданном на Ymove. Существующие экраны были универсальными, не покрывали все состояния интерфейса и визуально не соответствовали разнообразию брендов тренеров на платформе.
На стороне приложения единый жесткий макет обслуживал тренеров из совершенно разных ниш — силовые тренировки, йога, долголетие, HIIT — без какой-либо значимой дифференциации.
- Пустые состояния не давали пользователям никаких ориентиров.
- Статистика на дашборде по умолчанию показывала потребление воды и калорий — вне зависимости от того, предлагает ли тренер поддержку по питанию.
- Просмотр программ не был структурирован для сценариев с несколькими программами.
На стороне лендинга тренеры привлекают клиентов почти исключительно через Instagram.
- Существующий шаблон рассчитывал на профессиональные фотографии и отточенные тексты — которых большинство тренеров не производят.
- Макеты разваливались при реальном контенте: короткие биографии, фото разных пропорций, снимки с телефона.
- Страница не удерживала внимание трафика из социальных сетей и не успевала донести ценность тренера достаточно быстро для конверсии.
Решение
Мы разделили проект на два параллельных направления, оба подчиненных единому принципу: результат должен выглядеть профессионально еще до того, как тренер выполнит какую-либо настройку.
Цели проекта
Задание предполагало два самостоятельных результата:
Часть 1 — Шаблоны экранов приложения: разработать V1 (темная тема) для всех основных типов экранов, охватив каждое значимое состояние, с которым может столкнуться клиент тренера. Дополнительно — два варианта светлой темы.
Часть 2 — Лендинг тренера: редизайн шаблона лендинга для десктопа и мобильных. Макет должен оставаться визуально сильным при несовершенном контенте, созданном самим тренером, и адаптироваться к любому фирменному цвету.
Исследование
До начала дизайна мы составили полную карту экранов продукта и определили все состояния, требующие проработки.
Для лендинга мы изучили воронку привлечения тренеров — Instagram → лендинг → регистрация — и выявили переменные контента, под которые нужно проектировать: фото низкого качества, разные пропорции изображений, короткие или избыточные тексты, один фирменный цвет без дополнительной палитры.
Подход
1. Шаблоны приложения
Активность, а не допущения. Блок статистики на дашборде был переименован из «Статистика» в «Активность» и переработан с гибкой системой резервных значений. Если тренер не предлагает отслеживание питания, блок отображает личные рекорды — Личный рекорд по упражнению 1, Личный рекорд по упражнению 2 — сохраняя дашборд актуальным для любой спортивной дисциплины.
Контекстные пустые состояния. Пустые экраны были переработаны в направляющие состояния. Если у пользователя есть персональная программа, расписание отображает её напрямую: Ваша тренировочная программа — [Фаза тренера], — сформулировано разговорно, как будто это сообщение от тренера. Если пользователь на стандартном плане, состояние показывает умные рекомендации: Рекомендуем вам, потому что [причина] — снижая барьер и стимулируя старт программы без дополнительных действий со стороны тренера.
Обзор программы на дашборде. Статус и прогресс программы отображаются прямо на дашборде, убирая лишний шаг навигации и давая пользователю мгновенную ориентацию при входе.
Варианты навигации. Разработаны два направления таббара: классический нижний таб (привычный для большинства платформ) и два варианта шапки — с логотипом и без — для тренеров, которые делают акцент на фирменном стиле.
Варианты тем. В дополнение к V1 темной теме: смешанный светло-темный вариант и полностью светлый — для тренеров из сфер велнес, лайфстайл и йоги.
2. Лендинг
Спроектирован для реального контента. Каждое решение по макету тестировалось в условиях худшего сценария: биография из трех предложений, фото героя с телефона и карточка программы с длинным названием. Дизайн держится при всех этих условиях.
Система на одном фирменном цвете. При наличии одного цвета, заданного тренером, мы построили систему градиентов и акцентов, которая автоматически создает глубину и визуальную целостность без необходимости во вторичной палитре. Кнопки, акценты и секция CTA — всё выводится из этого единственного цвета.
Логика сворачивания текста. Если биография тренера или текст секции превышает пороговое количество символов, он автоматически сворачивается с кнопкой «Читать далее». Целостность макета сохраняется вне зависимости от объема текста.
Гибкость шапки. Поддерживает как черный, так и белый вариант логотипа на фоне фирменного цвета тренера — без ручной настройки.
Структура страницы: десктоп + мобильная версия:
-
Герой: Имя тренера · 3 заголовочных тезиса · биография 2–3 предложения (со сворачиванием) · CTA для App Store / Play Store или кнопка «Начать» · Три экрана телефона рядом
-
Плавающие элементы функций: 3–5 функций, заданных тренером, расположенных рядом с экранами телефона, автоматически окрашенных по фирменной палитре
-
О тренере: Портрет или до 5 аватаров · Краткая биография
-
Блок «До/После»: Сравнение рядом или карусель · Устойчив к несовпадению пропорций изображений
-
Блок программ: Сетка карточек · Название · Продолжительность · CTA на каждой карточке
-
Видеоблок: Встроенный плеер или превью с иконкой воспроизведения
-
Отзывы: До 5 аватаров с цитатами · Горизонтальная прокрутка на мобильном
-
Секция CTA: Градиент фирменного цвета · Одно действие
Что мы сделали
1. Шаблоны приложения
Мы разработали полный набор стандартных шаблонов, охватывающих каждый шаг пользовательского пути клиента тренера: от первого входа до активного использования нескольких программ. Каждое состояние продумано: никаких тупиков, никаких допущений о том, что предлагает тренер.
- 10+ состояний экрана для 6 основных экранов
- V1 темная тема полностью разработана
- 2 варианта светлой темы (смешанная и полностью светлая)
- Гибкий блок активности с резервным отображением личных рекордов
- Контекстные пустые состояния для персональных и стандартных пользовательских сценариев
- Обзор программы интегрирован в дашборд
- Два варианта системы навигации
2. Лендинг
Мы переработали лендинг тренера так, чтобы он работал в реальных условиях: один фирменный цвет, фото с телефона и текст, написанный за пять минут между тренировками. Десктоп и мобильная версия, восемь блоков, полная адаптивность.
- Десктоп + мобильная версия переданы в Figma
- Полное покрытие секций — 8 блоков
- Адаптивная система на одном фирменном цвете с автоматической логикой градиента
- Сворачивание текста для контента, созданного тренером
- Устойчивая работа с контентом низкого качества и смешанным форматом
- Поддержка черного и белого логотипа в шапке
Итог: решения для команд и отраслей
Платформа Ymove успешна, когда тренеры уверенно запускают приложения, а их клиенты сразу вовлекаются. Оба результата зависят от первого впечатления, которое контролирует платформа: стандартный шаблон приложения и лендинг, которым тренер делится со своей аудиторией.
Редизайн гарантирует, что независимо от объема загруженного контента, качества фотографий и ниши тренера — результат с первого дня выглядит профессионально. Создано с применением экспертизы Toimi в области продуктового дизайна и мобильной разработки.
Шаблоны выглядят профессионально с первого дня — наши тренеры могут уверенно запускать приложения, не меняя ни одной настройки дизайна.
Тош Коевутс, CEO и основатель Ymove
