Назад

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

Спроектировал с нуля: десктопный личный кабинет и мобильное приложение, где пользователь тренируется, зарабатывает токены и прокачивает NFT-футболки. Довёл до полностью кликабельного прототипа для клиента: 80+ экранов и 100+ попапов.

ПериодАвгуст 2022 — январь 2023
РольЕдинственный дизайнер интерфейса
ПлатформаДесктоп и мобайл
FitBurn

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

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

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

Моя роль

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

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

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

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

01

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

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

РЕШЕНИЕ 01 · FitBurn
02

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

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

РЕШЕНИЕ 02 · FitBurn
03

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

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

РЕШЕНИЕ 03 · FitBurn
04

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

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

РЕШЕНИЕ 04 · FitBurn
05

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

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

РЕШЕНИЕ 05 · FitBurn

Результат

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

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

ИТОГ · FitBurn

Рефлексия

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