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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• макетов,
• блоков,
• списков,
• иконок,
• цветов,
• шрифтов,
• кнопок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Участники сделки. Продавец/Покупатель.
2. Число и процент успешных сделок для оценки надежности.
3. Рейтинг пользователя, то есть оценки от пользователей, с которыми сотрудничал юзер.
4. Сумма к покупке/продаже криптовалюты.
5. Стоимость 1 токена в фиатной валюте для оценки выгоды предложения.
6. Способы оплаты в сделке. Банки или другие способы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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