Дизайн для веб-банка Zeeves

Задача: Разработать дизайн для веб-версии банка zeeves.com и конверт для пластиковых карт.

До этого мы уже работали с Zeeves, совместно реализуя сервис по выпуску и использованию карт Visa на базе Telegram бота.

Для привлечения новой аудитории и расширения функциональности, было принято решение создания веб-версии проекта. Так, продукт становится независимым от экосистемы Telegram, что позволяет увеличить целевую аудиторию

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

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

UI-кит обеспечивает единообразие визуального стиля элементов интерфейса и упрощает процесс совместной работы дизайнеров и разработчиков.

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

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

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

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

Подключение кошелька
В центре экосистемы находится банк Zeeves, к которому можно подключать различные кошельки. Таким образом, пользователь может удобно управлять своими криптоактивами.
Чтобы подключить криптокошелек, необходимо выбрать криптовалютную сеть из предложенных, указать кошелек и токены. После подтверждения, он будет успешно подключен к аккаунту пользователя.

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

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

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

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

Мы разработали глобальную библиотеку стилей, включающую более 10 компонентов, палитры и различные дизайн-элементы, а также несколько десятков макетов страниц. Мы поддерживаем связь с клиентом, а он уже активно использует разработанный UI-kit для реализации своих проектов!