FitBurn — Web3-сервис «тренируйся и зарабатывай»

Спроектировал с нуля кросс-платформенный move-to-earn продукт: десктопный личный кабинет и мобильное приложение, где пользователь тренируется, зарабатывает токены и прокачивает NFT-футболки. Единственный дизайнер интерфейса — собрал полностью кликабельный прототип для клиента.

Продуктовый дизайнер · 2023 · YŪGA VISION · десктоп + мобайл
80+ экранов100+ попапов2 платформыкликабельный прототип
COVER · FitBurn

Контекст и задача

FitBurn — Web3-сервис на стыке фитнеса и NFT: пользователь тренируется, получает за это токены (CAL), покупает и прокачивает NFT-футболки-персонажи.

Задача — спроектировать сложную систему целиком: кошелёк, магазин, механику взаимодействия с NFT — и подать клиенту рабочим прототипом. Две платформы: десктопный личный кабинет и мобильное приложение.

Моя роль

Единственный дизайнер личного кабинета и приложения, работал напрямую с арт-директором студии. 3D-художникам ставил задачу на варианты моделей NFT-футболок; саму механику футболок — редкость, состояния, загрязнение, критерии различия — задавал сам.

Собрал полностью кликабельный прототип в Figma, чтобы клиент увидел продукт в действии — вплоть до поведения всплывающих окон на десктопе и мобайле.

ЭКРАН 1 · FitBurn
ЭКРАН 2 · FitBurn

Ключевые решения

01

Крипта, понятная не-крипто-аудитории.

Подключение кошелька (Metamask, сеть Polygon), обмен токенов, вестинг — завёл в понятный интерфейс с явными состояниями баланса (CAL) и историей транзакций «заработано / потрачено», чтобы фитнес-пользователь не упирался в крипто-сложность.

02

NFT-футболка как объект с состояниями.

Ядро продукта — футболка-персонаж со своими состояниями и взаимодействиями: тренируешься → футболка «загрязняется» → её моешь, чинишь, прокачиваешь → она работает лучше. По сути это игровая логика «объект + бафы и дебафы», ближе к тамагочи или покемонам. Я спроектировал экраны управления NFT — список, апгрейд — и наглядно показал на них состояния и доступные действия.

03

Магазин на стыке цифрового и физического (phygital).

Не только NFT, но и физические товары — футболки, худи, носки с доставкой. Спроектировал каталог с фильтрами, корзину, оформление заказа и статусы — вместе с пустыми состояниями экранов.

04

Тренировка с фитнес-трекера — в токены.

Вкладка Burn: пользователь подключает фитнес-трекер — от Garmin Fenix до Galaxy Fit, — запускает тренировку и видит живой пульс на шкале; по завершении — сводка сессии: длительность, средний пульс, сожжённые калории и начисленные токены. Десктопный ЛК и мобильное приложение держал на одной логике и общей дизайн-системе: кошелёк, профиль, прогресс, маркет — везде одинаковые паттерны.

05

Ребрендинг: логотип и фирменный стиль.

Сделал ребрендинг FitBurn — move-to-earn сервиса на стыке фитнеса и NFT: логотип и фирменный стиль. Личный кабинет и приложение выше собраны на этом же визуальном языке — чистый минимализм и фирменный оранжевый с эффектом свечения.

ЭКРАН 1 · FitBurn
ЭКРАН 2 · FitBurn
ЭКРАН 3 · FitBurn

Результат

Систему спроектировал целиком — от кошелька и обмена токенов до игровой механики NFT и phygital-магазина — и собрал в полностью кликабельный прототип. Клиент принял работу и передал макеты в разработку; дальше мы сотрудничали уже по печатным и диджитал-материалам сервиса, а сам проект жил ещё несколько лет — дошёл ли он до публичного релиза и в каком виде, мне уже неизвестно.

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

Рефлексия

Сегодня иначе выстроил бы старт — сначала разобрал бы сервисы с похожей механикой. С опытом видно, что «прокачка NFT-футболки за тренировки» — не уникальная находка, а базовая игровая логика: объект с бафами и дебафами, выгода за взаимодействие. Я бы перенял выверенные решения у похожих продуктов, а не изобретал с нуля. Визуальным решением при этом доволен до сих пор: чистый минимализм и фирменный оранжевый с эффектом свечения.

Другие кейсы