Anna Doronina

нна Доронина

Все иллюстрации выполнены карандашом и пером в Фигме

anna.doronina@ro.ru

annadoris

annadoronina1

Bē

annadoronina1

MetaRacing

Редизайн крипто-гейминг веб-приложения

Задача

Провести редизайн веб-приложения, сохраняя привычные паттерны, но улучшив пользовательский опыт, логику работы и визуал; создать адаптив под мобильную версию

Моя роль

UX/UI дизайнер в дизайн-команде

Реализовано мной

UI-kit & компоненты / генерация и создание изображений / Вход и регистрация / Магазин / Кошелек / Гонки / Инвентарь

Реализовано совместно с дизайн-командой

Анализ референсов / user flow / вайрфреймы / UX анализ / Маркетплейс / Гараж

Дата

Май — Июль 2024

Дизайн-процесс

Исследование проблемы

обсуждение деталей задачи, определение требований
определение обязанностей, дедлайнов и способов взаимодействия

Определение

UX анализ: выявление сильных и слабых сторон существующего интерфейса

Разработка

построение User Flow: доработка существующих сценариев, корнер кейсов, ошибок
сбор референсов, разработка UI-kit (типографика, цвета, компоненты)
отрисовка макетов по согласованному UI

Реализация

сбор фитбэка от заказчика, внесение правок

Как поможет бизнесу редизайн существующего решения

Повышение Retention

Благодаря обновлённому UI/UX пользователям станет комфортнее возвращаться и проводить больше времени на платформе, при этом сохранение знакомых паттернов не отпугнёт лояльных юзеров.

Повышение Conversion Rate

Благодаря проработке сценария для незарегистрированных пользователей (ранее без регистрации не была доступна ни одна функция), ненавязчивым напоминаниям о гонках, понятной навигации и доработке основных разделов, мы повысим вовлечённость и сконвертируем пользователей на следующие шаги.

Рост NPS и новые пользователи

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

Вход и регистрация

Чтобы полноценно пользоваться сервисом, необходимо зарегистрироваться через емейл и получить кодовую фразу как в крипто-кошельке.

Гонки

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

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

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

До редизайна

После редизайна

Если у пользователя еще нет машины, на странице гонки мы предлагаем ему перейти в покупку Карбокса (единица, хранящая в себе случайную модель авто). После открытия Карбокса, если машина достаточного уровня для гонки, пользователь может заявиться на участие и получить уведомление, когда гонка начнется.
Саму гонку можно пропустить и сразу перейти к результатам или наблюдать короткий ролик имитации гонки.

По окончании пользователь видит место, которое он занял, заработанные очки и выигрыш. Он может также перейти в гонку, чтобы посмотреть результаты остальных участников. На главной странице гонок доступна вкладка со всеми прошедшими и предстоящими гонками пользователя.

Магазин

В этой вкладке есть возможность купить Карбокс или Лутбокс (единица, которая хранит в себе случайную деталь). При покупке и открытии пользователь должен заплатить внутреннюю валюту и комиссию блокчейна, поэтому на каждом из этапов мы показываем подтверждающий поп-ап со всей информацией о тратах.

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

Гараж

Все машины отображаются в этой вкладке. Пользователь здесь может перейти в покупку карбокса, отправить имеющиеся машины в квалификационную гонку, чтобы определить ее характеристики, прокачать квалифицированные машины с помощью купленных деталей с разными параметрами, посмотреть общий уровень тачки и по отдельности каждой из ее характеристик (ускорение, управление, прочность).

Мы добавили краткую инфо о каждой из машин в карточки внизу, чтобы пользователю было проще навигироваться среди их большого количества. упростили и сделали более понятным флоу по взаимодействию с новыми и текущими машинами, почистили UI.

До редизайна

После редизайна

Инвентарь

Здесь можно посмотреть все свои детали, машины, лутбоксы и карбоксы, открыть, отправить их на продажу, снять деталь с машины, чтобы иметь возможность навесить ее на другое авто.

Маркетплейс

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