Let's Talk

Glue Design System

Glue, the first Design System in 🇸🇻

Leadership

Design Strategy

Design Systems

Fintech industry

In 2021, the Salvadoran startup teip launched its first product to democratize access to financial solutions in Central America, moving fast to find PMF. At the first signs of potential quality trade-offs, I was tasked with optimizing the product development process without losing the brand's essence.

Could a Design System enable scalability to disrupt a market?

Visit pilot product

Role

Research, creative direction, implementation alongside another designer, and education of everyone involved in the product development.

The problem

Create a Design System from scratch with a small team new to the practice, and ultimately increase velocity and scalability.

The company

Salvadoran Pre-Seed Fintech, with a platform that facilitates access to digitally-native financial services for people and SMEs.

Users

One Product Designer + Two Mkt Designers + Engineering team of one front-end, one iOS, and two Android engineers.

It all started because I had been evangelizing about Design Systems in the Salvadoran dev community since 2018, speaking at conferences and leading multiple initiatives to build one.

I became the "Design Systems expert", which led to the conversation with the team at teip, business case in hand.

It all started because I had been evangelizing about Design Systems in the Salvadoran dev community since 2018, speaking at conferences and leading multiple initiatives to build one.

I became the "Design Systems expert", which led to the conversation with the team at teip, business case in hand.

It all started because I had been evangelizing about Design Systems in the Salvadoran dev community since 2018, speaking at conferences and leading multiple initiatives to build one.

I became the "Design Systems expert", which led to the conversation with the team at teip, business case in hand.

Discovery

Developing empathy, not components

With the help of another Product Designer, we approached the situation as a design problem with UX Research instead of jumping into solving mode.

Discovery

Developing empathy, not components

With the help of another Product Designer, we approached the situation as a design problem with UX Research instead of jumping into solving mode.

Discovery

Developing empathy, not components

With the help of another Product Designer, we approached the situation as a design problem with UX Research instead of jumping into solving mode.

Auditing five products

An extensive UI audit revealed a lot of inconsistency:

6 variations of the "primary" color
Nearly 40 shades of gray
Over 60 text styles
And so much more…

An extensive UI audit revealed a lot of inconsistency:

6 variations of the "primary" color
Nearly 40 shades of gray
Over 60 text styles
And so much more…

An extensive UI audit revealed a lot of inconsistency:

6 variations of the "primary" color
Nearly 40 shades of gray
Over 60 text styles
And so much more…

The role of qualitative research

Surveys and interviews uncovered the real pain points and needs:

A design process that was hard to understand
The process was slowing down
Designs didn't reflect the real SSoT: Code

Surveys and interviews uncovered the real pain points and needs:

A design process that was hard to understand
The process was slowing down
Designs didn't reflect the real SSoT: Code

Surveys and interviews uncovered the real pain points and needs:

A design process that was hard to understand
The process was slowing down
Designs didn't reflect the real SSoT: Code

The team wanted to improve communication to reduce misunderstandings and worry less about tech debt.

The aha! moment

Strong collaboration as a vehicle for communication

Having clarity of the definition of success, in this case, achieving better communication, I approached the process as a co-creation dynamic to create a sense of mutual empathy and ownership.

The aha! moment

Strong collaboration as a vehicle for communication

Having clarity of the definition of success, in this case, achieving better communication, I approached the process as a co-creation dynamic to create a sense of mutual empathy and ownership.

The aha! moment

Strong collaboration as a vehicle for communication

Having clarity of the definition of success, in this case, achieving better communication, I approached the process as a co-creation dynamic to create a sense of mutual empathy and ownership.

Co-creating the roadmap

To define an action plan, we prioritized efforts and defined design principles, leveraging frameworks from Design Systems experts Nathan Curtis and Dan Mall.

Connecting code and design

We built and thoroughly tested foundations in collaboration with engineers, held office hours to share progress and answer questions, and got deep into the weeds of sending PRs to connect design tokens.

Outcome

A shared language to increase efficiency

The implementation time was reduced without compromising the brand, and in fact, it improved even further.

Outcome

A shared language to increase efficiency

The implementation time was reduced without compromising the brand, and in fact, it improved even further.

Outcome

A shared language to increase efficiency

The implementation time was reduced without compromising the brand, and in fact, it improved even further.

Trade-offs and learnings were part of the deal

Refactoring tokens several times and creating breaking changes wasn't fun, but the goal was successfully met. That's the story of how Glue Design System was born.

teip is entering an exciting phase as a business, and Glue plays a key role in that. With an early investment in rethinking how products are created, focusing on solving the right problems is easier than ever.

Refactoring tokens several times and creating breaking changes wasn't fun, but the goal was successfully met. That's the story of how Glue Design System was born.