#design
Дизайн для банка Zeeves
Задача
Разработать дизайн для веб-версии банка zeeves.com и конверт для пластиковых карт.
Особенности проекта
До этого мы уже работали с Zeeves, совместно реализуя сервис по выпуску и использованию карт Visa на базе Telegram бота.
Подробнее: https://www.batonis.tech/ru/cases/bank-card-issuance

Для привлечения новой аудитории и расширения функциональности, было принято решение создания веб-версии проекта. Так, продукт становится независимым от экосистемы Telegram, что позволяет увеличить целевую аудиторию
Начало работы
Перед тем как приступить к работе, мы получили некоторые референсы от заказчика. Их анализ помог нам воплотить мысли клиента в реальность и создать дизайн, максимально удобный для пользователя.
Как тиндер-карточки превратились в викторину](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f99cc296-a8d4-4685-a5f5-3bbb7211a1c1/Frame_518_(1).png)  Как тиндер-карточки превратились в викторину
UI kit
Важную часть при разработке крупных проектов с развитой экосистемой составляет UI kit. Перед тем, как приступить к непосредственному проектированию экранов, мы подготовили масштабную дизайн-систему, включающую в себя различные компоненты: кнопки, поля ввода, иконки, иллюстрации, палитры и многое другое.

UI-кит обеспечивает единообразие визуального стиля элементов интерфейса и упрощает процесс совместной работы дизайнеров и разработчиков.
Как тиндер-карточки превратились в викторину](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f99cc296-a8d4-4685-a5f5-3bbb7211a1c1/Frame_518_(1).png)  Как тиндер-карточки превратились в викторину
Веб-версия банка, речь о дизайне которой пойдет ниже, еще не вышла, поскольку клиент занимается поиском инвесторов. Однако, на базе разработанного UI-кита Zeeves разрабатывает виджеты, переиспользуя готовые стили и компоненты, поддерживая общий стиль своих продуктов.
Макеты страниц
Нашей задачей было перенести функционал Telegram бота в веб-приложение. Мы подготовили десятки различных страниц и постарались рассмотреть как можно больше состояний окон и компонентов: загрузки, ошибки, успешные выполнения операций. Таким образом, облегчая работу фронтенд-разработчиков.
Страница KYC
Чтобы получить доступ к полному функционалу сайта, пользователю необходимо пройти верификацию в системе. Для этого необходимо подтвердить детали, касающиеся личности, и ответить на некоторые вопросы относительно финансов. По завершении, пользователь получает документ, подтверждающий его личность.
Dashboard
На этой странице пользователю доступен общий обзор его финансов, их разделение по валютам, просмотр информации о карте. Клиенты банка могут легко отслеживать свои транзакции, проверять историю платежей и управлять своими счетами.
Подключение кошелька
В центре экосистемы находится банк Zeeves, к которому можно подключать различные кошельки. Таким образом, пользователь может удобно управлять своими криптоактивами.
Чтобы подключить криптокошелек, необходимо выбрать криптовалютную сеть из предложенных, указать кошелек и токены. После подтверждения, он будет успешно подключен к аккаунту пользователя.
Страница транзакций
Страница транзакций предоставляет удобный функционал для отслеживания истории переводов. Особенность заключается в том, что отслеживать можно как переводы с карты, так и криптокошелька.
Красным отображаются платежи по карте, оранжевым - переводы между своими счетами, серым - пополнение и вывод средств, фиолетовым - SWIFT-переводы, а синим - переводы между аккаунтами.
Оформление карты
Чтобы оформить карту банка, в первую очередь пользователю нужно выбрать нужный тип (виртуальная или пластиковая). Виртуальная карта выпускается автоматически, а вот для получения физической версии необходимо оформить доставку, указав адрес получения. Мы также разработали специальный конверт, в котором приходит карта, об этом мы расскажем далее.
Конверты для карт / Card carrier
Кроме дизайна для веб-версии банка, мы разработали макеты конвертов для карт. Они представляют из себя лист формата А4, с определенной технологией сгиба и верстки, учитывая безопасные зоны. В данный конверт вкладывается карта, пишется справочная информация и персональные данные получателя.
Нам было интересно поработать с печатной продукцией, мы проанализировали огромное количество референсов, изучили особенности подготовки подобных макетов к печати. В итоге у нас получился эстетически привлекательный продукт, отражающий индивидуальность бренда, позволяющий клиентам банка получать карты в целости и сохранности.
итоги
Мы разработали глобальную библиотеку стилей, включающую более 10 компонентов, палитры и различные дизайн-элементы, а также несколько десятков макетов страниц. Мы поддерживаем связь с клиентом, а он уже активно использует разработанный UI-kit для реализации своих проектов!
Получите концепт вашего проекта
Мы свяжемся с вами, чтобы обсудить детали проекта
Your message has been sent successfully
Something went wrong while sending the email, please try again