A design system for the biggest bank in Honduras

A design system for the biggest bank in Honduras

A design system for the biggest bank in Honduras

Project Overview

Project Overview

Atlántida Bank is a company with a long history that has several digital products: digital banking for individuals, businesses, virtual wallets, etc. Each of these products used its own design logic. The challenge was to create a design system flexible enough to be able to rebuild all these products and new ones to come, while respecting and strengthening the brand identity.

Atlántida Bank is a company with a long history that has several digital products: digital banking for individuals, businesses, virtual wallets, etc. Each of these products used its own design logic. The challenge was to create a design system flexible enough to be able to rebuild all these products and new ones to come, while respecting and strengthening the brand identity.

Client

Banco Atlántida

Services

Design System

Industry

Banking

Date

January 2022

The initial analyisis

We meticulously examined the bank's digital products, pinpointing issues in basic components like buttons, inputs, and dropdowns, as well as complex elements such as menus, forms, and data visualization.

Our analysis revealed significant design inconsistencies across colors, typography, sizes, paddings, interactions, and iconography, evident in the image displaying all identified buttons.

The foundations

The following step entailed collaborating with the bank's developers to strategize the construction of a new design system. The goal was to achieve visual coherence across all products with minimal development effort. In this way, we started to come up with the foundations, defining text styles, colors, elevation, that would help us to start building components.

Creating the components

The next step was to start building the components, considering all their states and variants. We created flexible elements that could be adapted to all types of bank products.

For the handoff, the documentation of each component, with its measurements, status, correct and incorrect uses, was very important for its proper implementation.

For the handoff, the documentation of each component, with its measurements, status, correct and incorrect uses, was very important for its proper implementation.