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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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