Финансы, страхование, инвестиции
iOS, Android
Январь 2024
Что делать, если приложение уже опубликовано в сторах, но вам как фаундеру оно не нравится? Заказчики этого проекта решили не латать старое, а собрать продукт заново — и сразу с прицелом на то, чем он должен стать через год.
Контекст проекта
К нам обратилась команда, которая занимается web3-финансами уже несколько лет и к моменту нашего знакомства выпустила первую версию приложения. Но останавливаться на крипто-маркетплейсе ребята не хотели: у них была идея платформы, где web3-сервисы работают так же обыденно, как банковские.
Ориентир заказчики назвали сразу — Revolut. Логика та же: одно приложение, в котором лежат все деньги и все карты, и из которого ими можно управлять. Только рядом с фиатным балансом здесь живут криптокошельки, и деньги между ними ходят свободно: крипта→крипта, крипта→фиат, фиат→крипта, фиат→фиат.
Что было важно бизнесу:
• собрать all-in-one решение для криптовалютных и традиционных финансовых сервисов;
• упростить вход в крипту для тех, кто раньше с ней не сталкивался;
• зарабатывать на комиссии с транзакций внутри платформы;
• выпускать собственные карты — виртуальные и физические.
Отдельная идея, которую хотели заложить с самого старта, — кэшбэк в криптовалюте. Пользователь пополняет счет и получает вознаграждение в собственном токене платформы, которое потом забирает на свой кошелек.
У клиента есть и ретейл-, и B2B-направление, поэтому продукт с самого начала проектировался как основа для дальнейшего роста, а не как разовое решение.
Роль Purrweb в проекте
Бэкенд писала команда клиента. Мы отвечали за все остальное:
• системная аналитика и BPMN-диаграммы;
• Discovery-стадия;
• UI/UX-дизайн;
• разработка мобильного приложения;
• разработка админ-панели;
• тестирование;
• управление проектом.

Готового описания функциональности у нас на старте не было — были идея, референс и понимание, каким должен получиться результат. Поэтому первым делом системный аналитик описал в BPMN каждый пользовательский процесс: создание и импорт кошелька, отправку и получение токенов, обмен крипты на фиат, работу с картами, авторизацию и KYC.
Диаграммы сработали как чек-лист по нерешенным вопросам. Прямо на схемах всплывало то, о чем никто еще не думал: что происходит с запросом денег, если получатель не отвечает (договорились — запрос живет 5 дней и отменяется с обеих сторон), что показывать пользователю, если сеть отвалилась в момент отправки.
На входе у нас была непростая вводная. С одной стороны — понятный референс: заказчики хотели «как в Revolut». С другой — набор функций, которого у Revolut нет: мультичейн-кошельки, сид-фразы, адреса в разных сетях, комиссии, обмен между четырьмя типами операций.

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

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


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

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

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

Крипта, которую объяснили через привычные вещи. Пользователь, который впервые открывает криптокошелек, видит незнакомые слова и длинные строки символов. Мы старались убрать из интерфейса всё, что требует отдельного объяснения:
у каждого токена — логотип его сети, чтобы монеты различались взглядом, а не чтением;
адреса везде показываются сокращённо: 7 первых символов и 3 последних;
балансы дублируются в долларовом эквиваленте, чтобы «0,42 BTC» превращалось в понятную сумму;
кошельки с ненулевым балансом всегда сверху списка — сначала то, чем человек реально пользуется.

Числа, которые не ломают вёрстку. Отдельная головная боль крипто-интерфейсов: баланс может быть и «5 389,87», и «0,462189075».
Мы прописали правила отображения — фиатные суммы до двух знаков после запятой, а размер шрифта в крипто-балансах уменьшается по мере роста числа символов. Экран не разъезжается ни на длинных значениях, ни на коротких.
Состояния, а не только счастливый путь. Финансовое приложение чаще всего тревожит пользователя не тогда, когда всё хорошо, а когда что-то пошло не так. Мы отрисовали поведение интерфейса при отсутствии сети: неактивные кнопки, уведомления, а на экране отправки — отдельный алерт, чтобы человек не решил, что транзакция ушла, и не отправил её повторно.

Приложение задумывалось как замена сразу нескольким: банковскому, криптокошельку и обменнику.
Вход и безопасность. Регистрация — по номеру телефона с кодом подтверждения, email добавляется позже. Дальше пользователь задает PIN и включает биометрию: при входе приложение сначала предлагает отпечаток или Face ID, PIN остаётся запасным вариантом.
Если PIN ввели неверно пять раз за две минуты, ввод блокируется — сначала на 2 минуты, потом на 5, потом на 10. KYC проходит по фото документа и селфи через стороннего провайдера.

Главный экран. Общий баланс с переключением между валютами и счетами, список счетов, новости, уведомления и последние транзакции. IBAN-счет создается при регистрации: реквизиты, SWIFT/BIC и выписка в PDF спрятаны в меню «три точки», чтобы не занимать место на главном.
История транзакций группируется по датам, с переходом к конкретному месяцу и детальной карточкой каждой операции.

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

На старте поддержали пять блокчейн-сетей, включая Bitcoin и Ethereum, а в профиль добавили переключатель между main- и test-сетью.
Отдельно продумали безопасный доступ к сид-фразе после бэкапа: посмотреть её можно в меню кошелька, но только после подтверждения отпечатком.
Отправка и получение. Отправить токены можно четырьмя способами: по адресу кошелька, по QR-коду, по username другого пользователя платформы и по номеру телефона или email из контактов. Транзакция подтверждается PIN-кодом или биометрией. Для крупных сумм — лимит пользователь задает сам — добавляется второй фактор: код из SMS или email.
Прием работает через QR-код: для мультичейн-кошелька пользователь сначала выбирает кошелек, потом токен и получает QR с адресом. Отдельно сделали поддержку Web3-QR, чтобы код читался не только внутри приложения, но и во внешних кошельках.

Карты. Пользователь заказывает виртуальные карты — можно несколько на один IBAN-счет — и физическую с указанием адреса доставки. В приложении карту можно заморозить (данные размываются, кнопка меняется на «разморозить»), посмотреть PIN и CVV, переименовать и терминировать. Лимит по карте работает для онлайн-операций.

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

В какой-то момент проект столкнулся с неприятной вещью: приложение переставало собираться везде, кроме машины одного разработчика. Причина была в node-зависимостях внутри криптографической части — той самой, которая отвечает за генерацию и работу с кошельками.
Такое обычно решают двумя способами: подкручивать окружение дальше и надеяться, что пронесет, либо переписать блок целиком. Мы оценили второй вариант в 16 часов, согласовали с заказчиком и написали нативную обертку над TrustWallet Wallet Core.
Что это дало:
сборки перестали ломаться на разных машинах;
из приложения ушли node-зависимости;
криптография работает на протестированных библиотеках TrustWallet;
новые блокчейн-сети подключаются заметно быстрее.
Последний пункт оказался важнее всего остального: сети на этом проекте добавлялись по ходу, и каждая следующая обходилась дешевле предыдущей.
Второй технический сюжет — лимиты криптопровайдера. Балансы и история транзакций приходили с ограничением по количеству запросов, и на экране со списком кошельков приложение упиралось в потолок. Мы переработали логику загрузки: приложение стало укладываться в лимит и перестало подтормаживать там, где пользователь бывает чаще всего.
По ходу проекта заказчики расширили задачу. Работали по той же схеме: сначала сценарий на схеме, потом вайрфреймы, потом отрисовка — включая ветки «ссылка неактивна», «недостаточно средств», «нужен второй фактор».
NFT. Раздел показывает токены из всех сетей пользователя, наверху — фирменная коллекция самой платформы. По каждому NFT есть развёрнутая карточка, отправить его можно по QR, адресу кошелька, username, телефону или email с подтверждением PIN или биометрией. Кнопка «купить» ведёт в webview. Реферальная программа. Кнопка в профиле генерирует ссылку и приглашение. Когда приглашенный регистрируется, система связывает его с пригласившим и начисляет вознаграждение.
Переводы по ссылке. Пользователь создает ссылку на отправку или получение токенов: выбирает кошелёк, токен и количество, делится с кем угодно. Получатель открывает ссылку, и дальше сценарий идёт как обычная транзакция — с подтверждением и вторым фактором для крупных сумм.

К концу работы у клиента было приложение, в котором пользователь:
заводит и импортирует мультичейн-кошельки в пяти блокчейн-сетях;
отправляет и принимает крипту по адресу, QR, username, телефону и email;
держит фиатный IBAN-счет и выпускает к нему виртуальные и физические карты;
обменивает крипту на фиат и обратно;
проходит KYC, получает кэшбэк в токенах платформы и приглашает друзей по реферальной ссылке.
Плюс админ-панель для работы с пользователями и контентом на стороне заказчика. Начинался проект без готового описания функциональности — с референса и общей идеи. Закончился продуктом, в котором крипта и фиат работают в одном интерфейсе и не требуют от пользователя разбираться, где заканчивается одно и начинается другое.