Дизайн сложного интерфейса для агрегатора криптообменников

Главное о кейсе

Разработали лендинг как точку входа на платформу, продумали все флоу сразу для двух ролей — обменника и покупателя и прописали чёткое тз для разрабов. Результат — более 100 экранов и готовое решение, которое клиент смог сразу передать в разработку.

Как проект изменил жизнь пользователей

Результат для клиента — более 100 экранов и готовое решение, которое Get Crypto смогли сразу передать в разработку.

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

Бизнес-задача и ее решение

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

GetCrypro должен был состоять из двух частей:

— Лендинг — визитная карточка сервиса и входная точка на P2P-платформу
— P2P-платформа с двумя ролями — продавца и покупателя

Сначала мы отрисовали несколько экранов в рамках пресейла. Заказчику всё понравилось — и мы приступили к полноценной работе на проекте.

Что мы сделали
— Отрисовали дизайн внешней страницы — лендинга (точка входа на платформу)
— Проработали UI и UX двух ролей: покупателя (с листингом обменников, профилем, историей операций и флоу обмена) и продавца, или криптообменника (с кастомными найтроками доступа, тикетами с предложениями об обмене и историей сделок)
— Подготовили макеты для разработки: собрали подробный UI-кит: со всеми компонентами, состояниями инпутов, карточек, ховеров и кнопок

Крафт (мастерство), реализация, технические детали

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

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

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

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

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

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

— Сделки
У продавца тоже есть листинг с текущими и завершёнными сделками. Их можно отфильтровать по статусу сделки, сумме, валюте и реквизитам клиента.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Скриншоты