Кейс: как разработать UI-дизайн для 2 азиатских крипто-платформ

Заказчик хотел скопировать Телеграм, но мы отговорили. И вот как.

Проект Ritm

В октябре 2022 года к Roobinium обратилась компания Ritm (NDA) с готовыми UX-прототипами и размытым UI. Ritm — это крипто-платформа для внутренней p2p-торговли, которая поддерживает интеграцию с онлайн-магазинами и API для приёма платежей.

<p><i>UX-прототипы. <a href="https://i2.paste.pics/8702f42ee1a6d53c295e4a92b2858059.png" rel="nofollow noreferrer noopener" target="_blank">Источник</a></i></p>

UX-прототипы. Источник

Цель

Удобный и интуитивно понятный UI-дизайн. Заказчик хотел, чтобы система соответствовала ожиданиям пользователей, — что-то интересное и объёмное, но при этом простое. Юзер не должен отвлекаться или путаться при выполнении транзакций. Также необходимо было подкорректировать и дополнить UX-прототипы.

Что было сделано?

Тезисно распишем основные процессы.

  • Дополнили кнопку «скорость перевода», чтобы пользователь понимал всю выгоду от фичи.

Раньше: быстро, средне, медленно.

Сейчас: быстро 15м/0,0005 btc, средне 40м/0,0004 btc, медленно 90м/0,0003 btc.

  • В функционал активов добавили профит за определенный период времени.

Раньше: нельзя выбрать время.

Сейчас: пользователь выбирает профит за определённый/весь период.

  • В функционал активов внесли цены на подписку.

Раньше: пользователь не видит, за что платит деньги.

Сейчас: пользователи уведомлены об изменениях.

  • Добавили возможность выбора кто будет оплачивать комиссию за перевод: «Получатель или Отправитель».

Раньше: комиссию всегда оплачивал отправитель.

Сейчас: у пользователя есть выбор.

Теперь детально распишем, как мы вносили изменения, какие трудности возникали в процессе и как мы их решали.

Сравнительный анализ

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

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

UI и немного UX

Мы придерживаемся чёткой структуры в дизайн-системе — расположение, группировка и обозначение:

  • макетов,
  • блоков,
  • списков,
  • иконок,
  • цветов,
  • шрифтов,
  • кнопок.
<p><i>Структура дизайн-системы. <a href="https://i2.paste.pics/58e7af34c634d120456f2096ca5bf58d.png" rel="nofollow noreferrer noopener" target="_blank">Источник</a></i></p>

Структура дизайн-системы. Источник

Изначально создали базу — поля ввода, кнопки, шрифты, иконки, базовые состояния Header и Footer. Остальное дополняли уже в процессе:

  • выпадающие списки,
  • радио-кнопки,
  • чек-боксы,
  • боковое меню,
  • состояния для Header и Footer,
  • компоненты пагинации.

Макеты разбивали на отдельные страницы по смыслу и функционалу: авторизация, экраны входа, сброс полей, регистрация (иногда по двум сценариям — физическое лицо и компания).

Подобный метод выручает разработчиков, так как флоу здесь удобный и понятный.

Затем лаконично и наглядно обыграли дашборд — теперь пользователю на одном экране доступна вся необходимая информация:

  1. Баланс всего аккаунта. В криптовалюте и в фиатном эквиваленте, который пользователь в любой момент может скрыть.
  2. Статус аутентификации пользователя. Добавили также преимущества за её прохождение.
  3. Быстрый доступ. К режиму «Компания» и списку контактов.

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

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

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

Мы добавили кнопки «получатель-отправитель», чтобы пользователи понимали смысл подобной функции.

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

Чем вдохновлялись?

Руководствовались разными референсами. Например, для реализации P2P-таблиц повышали насмотренность и изучали функционал Binance, Huobi и других крипто бирж

Обращали внимание на расположение ячеек и отображение релевантной информации — продавец-покупатель, количество сделок, рейтинг.

В итоге собрали таблицу по логичной и понятной структуре, где информация по сделкам расположена в привычной и удобной для пользователя последовательности:

  1. Участники сделки. Продавец/Покупатель.
  2. Число и процент успешных сделок для оценки надежности.
  3. Рейтинг пользователя, то есть оценки от пользователей, с которыми сотрудничал юзер.
  4. Сумма к покупке/продаже криптовалюты.
  5. Стоимость 1 токена в фиатной валюте для оценки выгоды предложения.
  6. Способы оплаты в сделке. Банки или другие способы.
<p><i>Таблица. <a href="https://i2.paste.pics/cf111350ec313698ff015040d0e541ae.png" rel="nofollow noreferrer noopener" target="_blank">Источник</a></i></p>

Таблица. Источник

Выводы

Реализация визуального дизайна — это самая сильная часть нашей команды. Мы произвели улучшения UX-части, а не просто перерисовывали с средне детализированного варфрейма заказчика.

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

Проект Plug

Заказчик изначально строил глобальную экосистему, где основа Ritm — крипто-платформа для внутренней p2p-торговли, а остальные проекты — её дополнение. Мы 2 месяца работали над полноценным UI-дизайном одного из таких проектов — мессенджером Plug.

Система построена таким образом, что пользователь свободно переключается между двумя платформами — Ritm и Plug.

Цель

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

В проекте Plug, в отличие от Ritm, визуальных UX-прототипов не было — только текстовый запрос. «Добавьте кнопку отправки платежа» — что-то в этом роде. Мы ходили к заказчику и вытаскивали пожелания, также в процессе добавляли свои идеи, которые быстро согласовывали.

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

Что было сделано?

Изначально интерфейс был построен по material design, но заказчик решил отойти от данной концепции и попробовать что-то объёмное и интересное. Так при оформлении шапки мы отошли от классической лайт-версии:

  • контрастно её выделили,
  • добавили градиент,
  • применили овальные кнопки,
  • растянули аватары по высоте, а не по ширине.

Вертикальные аватары стали нашей фишкой — подобных приёмов на рынке ещё нет.

Так как это международная платформа — мы сразу вынесли выбор языка и страны в шапку на главной странице. Это было сделано для быстрого и лёгкого переключения.

Кнопки выполнили в стиле неоморфизма — тени по границам внутри и выпуклые формы. Это касалось только кнопок — компоненты «сообщения» и «счета на оплату» остались плоскими.

В запросе на платёж добавили отображение суммы, чтобы пользователи верно осуществляли коммуникации, а также были осведомлены о статусе платежа и валюте.

Выводы и фидбек заказчика

Мы разработали уникальную визуальную концепцию бренда, обеспечив фактор BX (brand expirience) and CX (client expirience) на высочайшем уровне. Каждый компонент проекта в UI KIT отражает суть и визуальное позиционирование, разработанное специально для экосистемы.

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

33
Начать дискуссию