Как мы сделали интерфейс «арабским» за один клик и спасли пользователей от бесконечной регистрации: кейс криптобиржи

К нам в Purrweb обратились за дизайном приложения криптобиржи. До этого мы уже работали с криптопроектами, и нас было трудно удивить. По крайней мере, мы так думали… Как мы победили гигантский этап регистрации, сделали арабскую локализацию по нажатию одной кнопки и помогли клиенту впечатлить инвесторов — в этом кейсе.

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

К тому моменту у нас уже был опыт в крипте. Мы разработали приложение для криптобиржи Broex, в котором разберутся даже новички, и минималистичный криптокошелек, где кроме «монет» можно хранить NFT. Клиент нашел нас по одному из таких кейсов и уже знал, как мы работаем и на что способны.

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

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

Нам предстояло проработать два основных сценария:

На старте договорились сделать дизайн мобильного приложения на английском языке. Но со временем проект ощутимо вырос. Сначала клиент попросил добавить веб-версию биржи, а затем решил локализовать все на арабский язык. Так один проект превратился в четыре. Для нас это не стало проблемой — как-то мы делали три приложения одновременно для сервиса аренды аккумуляторов, пытаясь разобраться в китайской документации. Но это другая история, а сейчас — о концепте. С ним было не все так просто.

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

У клиента было свое представление об идеальном дизайне, хотя и не совсем конкретное. Он сразу принес нам референсы и поделился главным пожеланием — добавить зеленый «электрический» градиент, как на примерах выше. Достичь идеала было нелегко, и мы начали экспериментировать.

В сумме мы перебрали 25 вариантов концепта, хотя в среднем хватает пяти. На это ушло 104 часа вместо стандартных 40. Мы пробовали разные акцентные цвета, оттенки фона, экспериментировали с формами и миксовали наши находки.

К счастью, все было не зря. Мы попали в ожидания клиента, и дальше проект шел практически без правок.

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

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

Второй путь — через таб-бар внизу экрана. В нем всего три кнопки: главная страница, центральная и кошелек. Если с первой все понятно, то об остальных стоит рассказать подробнее.

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

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

Непростой задачей для нас стала разработка экранов регистрации. Если вы когда-нибудь регистрировались на криптобиржах, то знаете, насколько это долгий и муторный процесс. У вас просят фото паспорта, банковскую карту, биометрию и даже счета за коммуналку. Эта проверка называется KYC, от английского «know your customer/client» — «знай своего клиента». Она нужна для безопасности финансовых операций. В нашем проекте тоже без нее не обошлось.

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

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

Финальным решением стало добавление гостевого режима. Теперь пользователь даже без регистрации мог попасть на основную страницу и изучить функции. Разумеется, возможности приложения в таком случае сильно ограничены, но этого достаточно, чтобы понять, нравится ли сервис.

После того, как мы доделали веб-интерфейс, заказчик пришел с просьбой локализовать все на арабский язык. На первый взгляд ничего сложного: перевели текст, выровняли по правому краю = profit. На деле это комплексный процесс со множеством нюансов. Нужно ли зеркалить иконки? А как верстать латиницу? Мы подробно разбирали все причуды арабской локализации в статье «Халяльный дизайн» — приглашаем почитать. Но с этим приложением пошли еще дальше и адаптировали интерфейс почти автоматически.

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

Для каждого мастер-компонента на английском языке мы сделали своего арабского брата по всем законам ближневосточных интерфейсов. Библиотека увеличилась вдвое, и настало время для магии компонентов. Все, что от нас требовалось — выделить на экранах нужные инстансы, а затем нажать на тоггл «arabic» в инспекторе. Элемент «привязывался» к арабскому мастеру и менял верстку на правостороннюю. Вуаля — все счастливы, экран локализован за один клик.

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

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

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

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

Финальным боссом этого проекта стало создание сквозного прототипа. Это кликабельный дизайн приложения, где можно пройтись по всем сценариям использования и оценить, как работает интерфейс.

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

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

Наши дизайнеры сплели гигантскую паутину из связей между экранами. Втроем они сделали четыре сквозных прототипа за 24 часа. В итоге заказчик мог в полной мере продемонстрировать инвесторам возможности своей биржи. И, судя по всему, у него получилось.

В конце, как обычно, немного цифр. Над этим проектом мы работали 5 месяцев, а точнее 518 часов. Общее количество экранов составило 2202, из них 542 экрана — это английская версия мобильного приложения.

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

Ловите ссылку на наш Telegram, чтобы не пропустить новые кейсы и статьи.