Bankinter
Bankinter
Bankinter
Bankinter
Bankinter
UX / UI
UX / UI
Creation of the new application for individuals for Bankinter, one of the main banks in the Spanish financial system.
Creation of the new application for individuals for Bankinter, one of the main banks in the Spanish financial system.
Creation of the new application for individuals for Bankinter, one of the main banks in the Spanish financial system.
UX / UI
Hey, I'm Daniel.
Digital Product Designer based in Madrid, working worldwide.
Bankinter
Design System
Fintech
Launch of a consistent and scalable design system for four banking applications
My Rol: Senior Product Designer
Situation
Bankinter lacked a unified design system, creating inconsistencies across its digital products. The goal was to establish a scalable and cohesive design system that could be seamlessly integrated into all four existing applications.
This system needed to enhance efficiency, improve collaboration among design and development teams, and ensure a consistent user experience across platforms.
Challenge
The challenge was not only to create a comprehensive design system but also to integrate it seamlessly across all applications without disrupting active projects. Key focuses included:
—
Immediate integration requirements to support ongoing development.
—
Flexibility to ensure compatibility with four distinct applications.
—
Establishing a structured framework for designers and developers to collaborate effectively.
Constraints
We face several challenges in implementing this transformation:
—
No existing design system culture. Teams were unfamiliar with working within a structured DSL framework.
—
Ongoing projects. The design system had to be introduced while applications were already in development.
—
Limited dedicated resources. The initiative lacked a full team exclusively focused on DSL implementation.
—
Accessibility challenges. Existing color palettes did not meet accessibility standards and required adjustments.
Achievements
—
Successfully developed the foundation of the design system, setting a clear standard for future design consistency.
—
Facilitated the integration of the design system into all active projects, ensuring alignment with UX and development teams.
—
Created a collaborative structure that allowed DSL designers and project designers to work efficiently together.
Business Impact
—
Design consistency increased by 60% minimizing redundant design work and accelerating implementation.
—
Development speed improved by 40%, minimizing redundant design work and accelerating implementation..
—
User accessibility improved, addressing previous color contrast and usability concerns.
—
Scalability enhanced, enabling future applications to adopt the design system seamlessly.
Stakeholders
—
DSL UX team, UX teams from each project, Developers, Product owners (POs)
Our typeface
We have created a new typeface specifically designed to work well in digital environments and small or large scales. Inspired by our corporate typography. With simpler, more homogeneous lines and proportions that favor its contrast and legibility.
It has four different weights: black, bold, regular and ligth. Turning it into a typeface that create a texture with a purpose. With them we can hierarchize the information and help to manage the display of the content, keeping it useful, simple and effective.
Orange is our core color
We have developed a new color palette derived from our current corporate colors. Adjusted for better on-screen display and accessibility.
All applications have a series of common colors. The Core Orange family has been designated as the primary action color across all products and experiences, ensuring our color aesthetic is a part of every interaction. But for each application it has its own color family, oriented to the user we are targeting. Each of the color families have been divided into different swatches ranging from light to dark.
Grays
Having multiple gray families gives each design the opportunity for nuance and meaningful moments of color.
Our icons
We have created a set of more than 250 icons, categorized into different families (Animals, Audiovisual, Location…). They help us to represent ideas, objects or actions. They can communicate messages at a glance, afford interactivity, and draw attention to important information.
His style delivers a meaningful bond with our corporate typeface since his strokes and details are born from the shapes of our typographic characters.
Our framework
To create our applications we have developed a four-column framework for all the visual elements and typography.
Based on an 8px grid. We like this measure because it scales perfectly in all the different screen displays. And because it’s a good basic unit to work with. the numbers 4 and 8 are easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
More than 250 components
Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products. Each component has been designed and coded to solve a specific UI problem. They must work work harmoniously together, as parts of a greater whole.
Toast
Main button
Account card
CRM
Nav Bar
Search bar
Icon tab
Swipe
Input amount
Selection
Input text
Process detail
Radio button
Head
Text link
AMoney App
Creating a catalog
We have created a catalog of components that speeds up and facilitates its use by all the teams involved.
How to use each component
Each component has a tab that describes in detail how to use it. Showing examples, explanations, variants, use cases ...
Component families
Grouping components into families helps us create a more robust and flexible component system. Streamlining and facilitating its creation, modification, development, implementation, dissemination and application by the UX/UI and development teams.
Our work flow
We have created a work system, appropriate to our structure, which helps us to optimize the component creation processes. From the moment the need is detected until the moment the version is released. It is not a closed system, it is evolutionary, open and constantly changing.
Cross-UX flows
Our design collects and explains how those flows that are used recurrently in our applications work. They provide consistency and improve the user experience.
Tone of voice
We have defined how we want to communicate with our users.We are transparente and authentic. We keep our promises and do what we say we will do. Customers understand us because we are transparent, optimistic and inclusive.
What do we do?
Be precise. Words are precious.
Using them sparingly is not only more effective, it´s more considerate.
We use sentences instead of passive ones (eg. “we recommend”, rather than “it is recommended that”).
Keep sentences sort.
What do we not do?
Use jargon.
Include unnecessary detail.
Only explain (If tis clear the first tome, rewrite than add).
App Design System
Motion
Finally we have defined the basic patterns of animation and interaction. We want to bring life to our screens and develop interactions that facilitate the experience of our users.
