Explore
Уложитесь в мой дедлайн?
Oops! Something went wrong while submitting the form.
Рассказываем, как спроектировали мобильную криптобиржу для арабского рынка: сократили муторную регистрацию, сделали локализацию на арабский в один клик и помогли клиенту впечатлить инвесторов.
К нам в Purrweb обратились за дизайном приложения криптобиржи. До этого мы уже работали с криптопроектами, и нас было трудно удивить. По крайней мере, мы так думали… Как мы победили гигантский этап регистрации, сделали арабскую локализацию по нажатию одной кнопки и помогли клиенту впечатлить инвесторов — в этом кейсе.
В начале 2022 года к нам пришел новый клиент. Он открывал криптобиржу специально для арабского рынка, и ему нужен был дизайн для мобильного приложения. Обычно мы отвечаем за весь цикл создания продукта и берем разработку на себя. Но у заказчика была своя команда, и его интересовали только наши компетенции в UI и UX.
К тому моменту у нас уже был опыт в крипте. Мы разработали приложение для криптобиржи Broex, в котором разберутся даже новички, и минималистичный криптокошелек, где кроме «монет» можно хранить NFT. Клиент нашел нас по одному из таких кейсов и уже знал, как мы работаем и на что способны.
Мы делали сервис для покупки и продажи криптовалюты, рассчитанный на пользователей из Ближнего Востока. В последние пять лет этот регион стал одним из центров развития индустрии цифровых денег. Местные охотно пользуются криптой, а лояльное законодательство привлекает инвесторов со всего мира. Так что интерес заказчика к этой нише был вполне понятен.
Клиент выбрал в качестве ориентиров Binance и Coinbase — самые популярные криптобиржи на сегодняшний день. Наша биржа должна была иметь схожую функциональность, но с дополнительными фишками и нашими дизайн-решениями.
Главные экраны мобильных приложений Binance и Coinbase. Биржи стали функциональными референсами для этого проекта
Нам предстояло проработать два основных сценария: покупка, продажа и обмен криптовалют; хранение криптовалюты и фиата (привычных долларов и евро) на внутреннем кошельке.
На старте договорились сделать дизайн мобильного приложения на английском языке. Но со временем проект ощутимо вырос. Сначала клиент попросил добавить веб-версию биржи, а затем решил локализовать все на арабский язык. Так один проект превратился в четыре.
Мы в Purrweb считаем, что проработанный дизайн-концепт — это важно. Поэтому закладываем на его создание 40 часов. За это время дизайнер погружается в задачи клиента, продумывает логику приложения, собирает макет и готовит понятную презентацию. Но в этот раз работа над концептом затянулась.
Референсы, которые принес клиент
У клиента было свое представление об идеальном дизайне, хотя и не совсем конкретное. Он сразу принес нам референсы и поделился главным пожеланием — добавить зеленый «электрический» градиент, как на примерах выше. Достичь идеала было нелегко, и мы начали экспериментировать.
В сумме мы перебрали 25 вариантов концепта, хотя в среднем хватает пяти. На это ушло 104 часа вместо стандартных 40. Мы пробовали разные акцентные цвета, оттенки фона, экспериментировали с формами и миксовали наши находки.
В поисках того самого зеленого градиента
К счастью, все было не зря. Мы попали в ожидания клиента, и дальше проект шел практически без правок.
Итоговый вариант концепта
На этапе концепта мы ставили перед собой задачу максимально сократить путь до основных функций. В итоге мы реализовали такой интерфейс, где от покупки и продажи криптовалюты или проверки кошелька пользователя отделяют буквально два клика.
Самый очевидный путь — нажать на плашку с монеткой на главной странице. Так мы попадаем на маркет пейдж — страницу криптовалюты, где указана ее стоимость, график изменения цены и краткая информация. Здесь же две кнопки: «купить» и «продать».
Переходим на маркет пейдж с главного экрана
Второй путь — через таб-бар внизу экрана. В нем всего три кнопки: главная страница, центральная и кошелек. При нажатии центральной кнопки выпадает список с основными функциями, где среди прочего есть те же «купить» и «продать». Такое решение ускорило навигацию и разгрузило таб-бар.
До всех основных функций можно добраться прямо из таб-бара
За третьей кнопкой в таб-баре находятся сразу несколько кошельков: криптовалютный и фиатный. Они позволяют хранить в приложении как крипту, так и привычные деньги, при этом для каждой валюты создается свой собственный маленький кошелек. Здесь можно пополнять счет, обменивать один фиат на другой и выводить средства.
Несколько кошельков в одном месте — одна из фишек нашей криптобиржи
Непростой задачей для нас стала разработка экранов регистрации. Если вы когда-нибудь регистрировались на криптобиржах, то знаете, насколько это долгий и муторный процесс. У вас просят фото паспорта, банковскую карту, биометрию и даже счета за коммуналку. Эта проверка называется KYC, от английского «know your customer» — «знай своего клиента». Она нужна для безопасности финансовых операций.
KYC в нашем приложении
В нашем случае регистрация нового пользователя занимала 95 экранов. Пока человек пройдет такое большое флоу, у него пропадет любое желание иметь дело с криптой. Пользователю нужно было помочь.
Для начала мы добавили отбивочный экран. Он появлялся после первых шагов регистрации и предупреждал о долгом KYC. Общаясь через интерфейс, мы повысили доверие к приложению и увеличили процент тех, кто пройдет весь путь до конца. В самом KYC мы добавили прогресс-бар, чтобы пользователь понимал, на каком этапе он сейчас находится.
Отбивочный экран и прогресс-бар
Финальным решением стало добавление гостевого режима. Теперь пользователь даже без регистрации мог попасть на основную страницу и изучить функции. Разумеется, возможности приложения в таком случае сильно ограничены, но этого достаточно, чтобы понять, нравится ли сервис.
В гостевом режиме можно посмотреть основные разделы приложения, но дальше придется регистрироваться
После того, как мы доделали веб-интерфейс, заказчик пришел с просьбой локализовать все на арабский язык. На первый взгляд ничего сложного: перевели текст, выровняли по правому краю = profit. На деле это комплексный процесс со множеством нюансов. Нужно ли зеркалить иконки? А как верстать латиницу? Мы подробно разбирали все причуды арабской локализации в статье «Халяльный дизайн». Но с этим приложением пошли еще дальше и адаптировали интерфейс почти автоматически.
В этом нам помогли мастер-компоненты. Это удобная фишка в Figma, благодаря которой не нужно редактировать каждую кнопку по отдельности. Достаточно изменить мастер в библиотеке — вместе с ним изменятся его копии на многочисленных экранах. Такие копии еще называют инстансами.
Английские мастер-компоненты и их арабские близнецы
Для каждого мастер-компонента на английском языке мы сделали своего арабского брата по всем законам ближневосточных интерфейсов. Библиотека увеличилась вдвое, и настало время для магии компонентов. Все, что от нас требовалось — выделить на экранах нужные инстансы, а затем нажать на тоггл «arabic» в инспекторе. Элемент «привязывался» к арабскому мастеру и менял верстку на правостороннюю. Вуаля — экран локализован за один клик.
На этих экранах мы ничего не правили вручную. Только нажали на «волшебную» кнопку
Изначально мы работали в Figma по типичной схеме: создавали компоненты интерфейса и в том же файле собирали готовые экраны. Этот подход работает на небольших проектах, но наш быстро разрастался. Со временем к мобильному приложению добавились веб-версия и локализация. К тому же нам предстояло передать дизайн сторонней команде разработки. Поэтому мы постарались структурировать проект и сделать его максимально понятным для наших коллег.
Для этого мы вынесли все компоненты в отдельную библиотеку, а файлы с нашими наработками отсортировали по направлениям. Чтобы в них не путаться, мы ввели цветовую кодировку. Наши дизайн-файлы и копии для клиента на английском засветились зеленым. Синий цвет стал обозначать кликабельный прототип. Оранжевый — арабскую верстку. Белый — библиотеку компонентов.
Так в итоге выглядел наш проект
Ориентироваться в файлах стало легче, работа ускорилась, а команда разработки сказала спасибо за аккуратный и понятный проект.
Финальным боссом этого проекта стало создание сквозного прототипа. Это кликабельный дизайн приложения, где можно пройтись по всем сценариям использования и оценить, как работает интерфейс.
В Purrweb мы обычно делаем линейные прототипы, где показываем заказчику одно из флоу — этого хватает. Сквозные прототипы были для нас в новинку, но клиент хотел показать инвесторам все возможные функции продукта. Их, к слову, было очень много.
Создание сквозного прототипа — кропотливый процесс. Мы вручную настраивали все связи между экранами, часть из которых была еще не готова. Чтобы не нарушить логику приложения, мы временно заменяли их заглушками. Потом возвращались и обновляли заглушки на готовый дизайн.
Точки на схеме — экраны, а паутина — ссылки, по которым пользователь перемещается в зависимости от своих действий
Наши дизайнеры сплели гигантскую паутину из связей между экранами. Втроем они сделали четыре сквозных прототипа за 24 часа. В итоге заказчик мог в полной мере продемонстрировать инвесторам возможности своей биржи. И, судя по всему, у него получилось.
Так выглядит готовый прототип
В конце, как обычно, немного цифр. Над этим проектом мы работали 5 месяцев, а точнее 518 часов. Общее количество экранов составило 2202, из них 542 экрана — это английская версия мобильного приложения.
Проект уже ушел в разработку. Клиент отдал его своей команде, но периодически обращается к нам за поддержкой в UI и UX. Мы рады, что проект продолжает развиваться, и с удовольствием в этом помогаем.
