Design System Banco Galicia

Role: Design Manager

Type: Digital Design

Skills: Sketch | Technical Management

Brief

One of my major responsibilities at Banco Galicia was the creation of its Design System. While this is an ongoing project, I laid the foundation and set the basis for a more collaborative and organized way of working for the bank's Product Managers, Developers, and Designers.

We built the architecture of libraries and files, both for Dev and Design, and we first focused on having the "atoms" for the Online Banking platform available first because it was the product that most needed it.

design system process

Auditing and taking inventory

I led a team of 2 front-end developers and 2 product designers and started building a complete inventory of all the existing grids, colors, and text-styles in each of our products. The goal was to detect where inconsistencies exactly were in the code and local Sketch files, and prioritize necessary future changes in each product.

grids and viewports grids and viewports

Inventory: Grids and viewports in each product

colors

Inventory: Colors in Online Banking

Patterns

We also documented all the patterns we had in our flows. At this stage, we defined the dos and don'ts for each usability pattern and tried to minimize the complexity by merging them when possible and making them robust enough to be reused in many flows of our products.

This was perhaps the most important thing we did while building the system: it allowed us to rationalize our fundamental design decisions and significantly simplify our flows.

patterns

Definition & Documentation


Foundations

Fonts

We decided to unify the typography in all our products to make them consistent and also to make our brand stronger and easier to recognize. We chose Inter UI, which is an open source and well documented font, that worked perfectly in all our platforms (iOS, Android, Desktop). We simplified and documented our text-styles in a Sketch library for teams to use in their design process. In parallel, developers also documented these decisions in their Storybook React library for implementation.

Colors & Accessibility

Also, we designed our palette, organizing primary, secondary, and accent colors. Also different whites and blacks. We used Lyft's approach for creating color systems, which we found very effective. Also, we corrected all the accessibility issues that colors had in the previous implementation.

Final colors for all our products

accessibility & colors

Accessibility tests for fonts and colors

Atoms & Molecules

Motion

We also documented how these atoms should behave with GIFs and json snippets.

motion motion

Implementation and Ownership

Before I left the bank, all the Design team (10 people) was using our Sketch libraries and we were all in the same page regarding how and why to use each component and pattern. Dev team was still working on implementing the components in the final product.

The team that worked on the inventory, design, and implementation of these libraries remained as Design System owners, and we designed a process to keep it updated and useful for all the product teams.