Стартовали новые рейтинги digital-подрядчиковУспейте принять участие! Предварительные результаты.
Purrweb
Наш первый проект в криптовалютной индустрии. Кейс Broex
Purrweb
#Приложение под ключ #Фирменный стиль

Наш первый проект в криптовалютной индустрии. Кейс Broex

74 
Purrweb Россия, Омск
Поделиться:
Наш первый проект в криптовалютной индустрии. Кейс Broex
Клиент

Broex

Сфера

Финансы, страхование, инвестиции

Регион

Россия

Мобильная платформа

IOS, Android

Сдано

Ноябрь 2021

Задача

Когда к нам обратились, у заказчиков уже была веб-версия продукта, а вот с мобильным приложением как-то не задалось. В App Store его все время отклоняли и это стало большой проблемой, ведь важно иметь доступ к кошельку откуда угодно, а пользоваться веб-версией с телефона неудобно.

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

Решение

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

У наших разработчиков и менеджеров был опыт в финансовой индустрии: мы разработали платформу Fintarget для БКС-брокер. Но изучать криптовалюту пришлось во всех подробностях. Иначе было бы невозможно не то что обеспечить финансовую безопасность пользователей, но и в принципе работать с бэкендом заказчика.

1А пользователю «ломать голову» не нужно

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

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

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

Не даем заблудиться в экранах

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

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

Подписываем все элементы

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

Ориентируемся на то, что привычно

Классические финансовые приложения знакомы многим, даже новичкам в крипте. Поэтому в конкурентном анализе мы рассматривали и непрямых конкурентов, например, Тинькофф Инвестиции.

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

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

2Долой стереотипы в дизайне

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

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

3Разобрались в верификации

В плане стека никаких новшеств для нас не было — для разработки мобильных приложений всегда используем React Native. А вот небольших технических нюансов оказалось много.

К примеру, криптовалютные биржи обязаны верифицировать пользователей через процедуру KYC («know your customer» — «знай своего клиента»). Это стандарт безопасности и мера против отмывания денег.

Мы реализовали KYC в приложении через SDK SumSub. Это решение уже использовалось на бэкенде заказчика, поэтому выбора у нас не было. Но, к счастью, SumSub — отличный сервис, и проблем с ним не возникло.

4Сделали свой селектор валют

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

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

5Непредвиденные трудности: греем смартфоны и головы

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

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

Решаем проблемы на стороне приложения

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

Мы нашли компромисс между тем, какие данные нужно обновлять немедленно, а какие могут подождать. В режиме реального времени обновляется все, что связано с валютными операциями: покупка, продажа, вывод средств. А все остальное (например, курсы валют) мы решили обновлять раз в три секунды.

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

График рисуется по точкам, содержащим две координаты — время и курс. Бэкенд формирует их в режиме реального времени. Время известно всегда, а запрос на курс валюты может и не пройти из-за внешних сбоев. Тогда нам вернутся координаты подобного вида: {x: 100, y: undefined}. Такую точку отметить на системе координат невозможно, и возникает ошибка. 

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

Сотрудничаем с командой бэкенда

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

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

Результат

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

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

- пройти регистрацию и процедуру KYC;

- настроить меры безопасности в профиле;

- просмотреть список своих активов и информацию о них;

- изучить и добавить в избранное интересующие их активы.

К декабрю добавили финансовые операции, причем сюда вошли не только получение и отправка валют по уникальному адресу кошелька, но также покупка и вывод активов на карту.

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

Сейчас Broex у нас на поддержке: фиксим баги, релизим обновления. У компании много идей и планов. Например, добавить торговые сигналы на криптовалюты, чтобы привлечь еще больше пользователей-трейдеров.

Светлое криптовалютное будущее компании Purrweb

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

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


Стек технологий

  • React Native React Native Фреймворк/библиотека
  • Figma Figma Графический редактор

Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Purrweb с удовольствием обсудит вашу задачу

Оставить заявку