Design for the Zeeves web banking platform

Task: Develop the design for the web version of zeeves.com and for the plastic card envelope.

Previously, we had already collaborated with Zeeves, jointly implementing a service for issuing and using Visa cards via a Telegram bot.
To attract a new audience and expand functionality, the decision was made to create a web version of the project. This makes the product independent of the Telegram ecosystem, allowing for a broader target audience.

Before starting the work, we received several references from the client. Analyzing them helped us turn the client’s ideas into reality and create a design that is highly user-friendly.

A crucial part of developing large-scale projects with a complex ecosystem is the UI kit. Before starting the actual screen design, we prepared an extensive design system that includes various components: buttons, input fields, icons, illustrations, color palettes, and much more.
The UI kit ensures consistency in the visual style of interface elements and streamlines collaboration between designers and developers.

The web version of the bank, whose design will be discussed below, has not yet been launched, as the client is currently seeking investors. However, using the developed UI kit, Zeeves is creating widgets by reusing existing styles and components, maintaining a consistent look and feel across its products.

Our task was to transfer the functionality of the Telegram bot to a web application. We prepared dozens of different pages and aimed to cover as many states of windows and components as possible—loading, errors, and successful operations—thereby simplifying the work for frontend developers.

To access the full functionality of the website, users must complete system verification. This involves confirming personal identity details and answering several questions related to their finances. Upon completion, the user receives a document verifying their identity.

On this page, users have access to an overview of their finances, including currency breakdowns and card information. Bank clients can easily track their transactions, review payment history, and manage their accounts.

At the center of the ecosystem is the Zeeves bank, to which various wallets can be connected. This allows users to conveniently manage their crypto assets.
To connect a crypto wallet, users need to select a cryptocurrency network from the available options, enter the wallet and tokens, and confirm the connection. Once verified, the wallet is successfully linked to the user’s account.

The Transactions page provides convenient functionality for tracking transfer history. A key feature is that users can monitor both card and crypto wallet transfers.
Payments are color-coded for clarity: red for card payments, orange for transfers between personal accounts, gray for deposits and withdrawals, purple for SWIFT transfers, and blue for transfers between accounts.

To issue a bank card, the user first needs to select the desired type—virtual or physical. The virtual card is issued automatically, while for the physical version, delivery must be arranged by providing a shipping address. We also designed a special envelope for the card, which we will discuss later.

In addition to the web version design, we developed layouts for card envelopes. They are A4 sheets designed with specific folding and layout techniques, taking safe zones into account. The envelope holds the card, along with reference information and the recipient’s personal details.

We were excited to work with printed materials, analyzing a large number of references and studying the specifics of preparing such layouts for printing. As a result, we created an aesthetically appealing product that reflects the brand’s identity and ensures bank clients receive their cards intact and secure.

We developed a comprehensive style library, including over 10 components, color palettes, and various design elements, as well as several dozen page layouts. We maintain ongoing communication with the client, who is already actively using the developed UI kit to implement their projects!