Лидеры года — новая категория на Workspace Digital Awards! Номинируйте вашу команду, продукты и проекты.
Purrweb
Криптокошелек, банковский счет и карты в одном приложении. Кейс разработки web3 финтех-продукта
Purrweb
#Приложение под ключ

Криптокошелек, банковский счет и карты в одном приложении. Кейс разработки web3 финтех-продукта

16 
Purrweb Россия, Омск
Поделиться: 0 0 0
Криптокошелек, банковский счет и карты в одном приложении. Кейс разработки web3 финтех-продукта
Сфера

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

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

iOS, Android

Сдано

Январь 2024

Задача

Что делать, если приложение уже опубликовано в сторах, но вам как фаундеру оно не нравится? Заказчики этого проекта решили не латать старое, а собрать продукт заново — и сразу с прицелом на то, чем он должен стать через год.

Контекст проекта

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

Ориентир заказчики назвали сразу — Revolut. Логика та же: одно приложение, в котором лежат все деньги и все карты, и из которого ими можно управлять. Только рядом с фиатным балансом здесь живут криптокошельки, и деньги между ними ходят свободно: крипта→крипта, крипта→фиат, фиат→крипта, фиат→фиат.

Что было важно бизнесу:

• собрать all-in-one решение для криптовалютных и традиционных финансовых сервисов;

• упростить вход в крипту для тех, кто раньше с ней не сталкивался;

• зарабатывать на комиссии с транзакций внутри платформы;

• выпускать собственные карты — виртуальные и физические.

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

У клиента есть и ретейл-, и B2B-направление, поэтому продукт с самого начала проектировался как основа для дальнейшего роста, а не как разовое решение.

Роль Purrweb в проекте

Бэкенд писала команда клиента. Мы отвечали за все остальное:

• системная аналитика и BPMN-диаграммы;

• Discovery-стадия;

• UI/UX-дизайн;

• разработка мобильного приложения;

• разработка админ-панели;

• тестирование;

• управление проектом.

Решение

В одном продукте объединили мультичейн-кошелек, IBAN-счет, карты, обмен криптовалюты и админ-панель

С чего начали: разобрали продукт на сценарии

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

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

Дизайн: как уместить банк, кошелек и обменник в один интерфейс

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

Один из визуальных референсов, которыми вдохновлялись дизайнеры

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

Референсы помогли согласовать направление до отрисовки основных экранов

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

Потом — концепт в цвете. Затем приступили к отрисовке основных экранов и всех состояний: пустых списков, загрузки, ошибок, отсутствия сети.

Промежуточный этап работы: первые концепты

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

Вайрфреймы ключевых экранов собирали по согласованным BPMN-схемам

Решения, которые сформировали интерфейс

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

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

Пять основных действий собрали под одной кнопкой, чтобы не перегружать нижнюю панель

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

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

Перед подтверждением пользователь видит сумму, комиссию и адрес получателя

Крипта, которую объяснили через привычные вещи. Пользователь, который впервые открывает криптокошелек, видит незнакомые слова и длинные строки символов. Мы старались убрать из интерфейса всё, что требует отдельного объяснения:

  • у каждого токена — логотип его сети, чтобы монеты различались взглядом, а не чтением;

  • адреса везде показываются сокращённо: 7 первых символов и 3 последних;

  • балансы дублируются в долларовом эквиваленте, чтобы «0,42 BTC» превращалось в понятную сумму;

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

Балансы дублируются в долларовом эквиваленте, а токены различаются по логотипам сетей

Числа, которые не ломают вёрстку. Отдельная головная боль крипто-интерфейсов: баланс может быть и «5 389,87», и «0,462189075».

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

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

При проблемах с сетью приложение блокирует повторную отправку и объясняет, что произошло

Как работает приложение

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

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

Если PIN ввели неверно пять раз за две минуты, ввод блокируется — сначала на 2 минуты, потом на 5, потом на 10. KYC проходит по фото документа и селфи через стороннего провайдера.

Биометрия работает как основной способ входа, PIN-код остается запасным

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

История транзакций группируется по датам, с переходом к конкретному месяцу и детальной карточкой каждой операции.

Реквизиты и выписка спрятаны в дополнительном меню, чтобы не перегружать главный экран

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

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

На старте поддержали пять блокчейн-сетей, включая Bitcoin и Ethereum, а в профиль добавили переключатель между main- и test-сетью.

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

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

Прием работает через QR-код: для мультичейн-кошелька пользователь сначала выбирает кошелек, потом токен и получает QR с адресом. Отдельно сделали поддержку Web3-QR, чтобы код читался не только внутри приложения, но и во внешних кошельках.

QR-код читается и внутри приложения, и во внешних кошельках

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

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

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

Кешбэк накапливается в токене платформы и выводится на дефолтный кошелек одной кнопкой

Челлендж: криптография, которая ломала сборки

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

Такое обычно решают двумя способами: подкручивать окружение дальше и надеяться, что пронесет, либо переписать блок целиком. Мы оценили второй вариант в 16 часов, согласовали с заказчиком и написали нативную обертку над TrustWallet Wallet Core.

Что это дало:

  • сборки перестали ломаться на разных машинах;

  • из приложения ушли node-зависимости;

  • криптография работает на протестированных библиотеках TrustWallet;

  • новые блокчейн-сети подключаются заметно быстрее.

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

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

Дополнительный скоуп: NFT, рефералка и переводы по ссылке

По ходу проекта заказчики расширили задачу. Работали по той же схеме: сначала сценарий на схеме, потом вайрфреймы, потом отрисовка — включая ветки «ссылка неактивна», «недостаточно средств», «нужен второй фактор».

NFT. Раздел показывает токены из всех сетей пользователя, наверху — фирменная коллекция самой платформы. По каждому NFT есть развёрнутая карточка, отправить его можно по QR, адресу кошелька, username, телефону или email с подтверждением PIN или биометрией. Кнопка «купить» ведёт в webview. Реферальная программа. Кнопка в профиле генерирует ссылку и приглашение. Когда приглашенный регистрируется, система связывает его с пригласившим и начисляет вознаграждение.

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

NFT из разных сетей собраны в одном разделе и доступны для отправки по тем же сценариям, что и токены

Результат

К концу работы у клиента было приложение, в котором пользователь:

  • заводит и импортирует мультичейн-кошельки в пяти блокчейн-сетях;

  • отправляет и принимает крипту по адресу, QR, username, телефону и email;

  • держит фиатный IBAN-счет и выпускает к нему виртуальные и физические карты;

  • обменивает крипту на фиат и обратно;

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

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


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

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

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

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