Glue, the first Design System in 🇸🇻
Glue, the first Design System in 🇸🇻
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?
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?
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 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.
To define an action plan, we prioritized efforts and defined design principles, leveraging frameworks from Design Systems experts Nathan Curtis and Dan Mall.
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.
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.
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
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.
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.
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.
"My code is now 100% reusable, with tokens I can trust and access everywhere. It's a game changer!"
"My code is now 100% reusable, with tokens I can trust and access everywhere. It's a game changer!"
— Kevin, front-end engineer
— Kevin, front-end engineer
— Kevin, front-end engineer
Impact
Impact
Impact
Timeline
12
months to launch Glue v1
Adoption
05
web and mobile products
Cost savings
>50%
design and development time
User-centric products
35%
90-day CRR of the main app
Learnings
Learnings
Learnings
Start small, don't rush
Start small, don't rush
Don't overthink naming
Don't overthink naming
What matters is that it feels right for your team.
What matters is that it feels right for your team.
What matters is that it feels right for your team.
Get comfortable with iterations
Get comfortable with iterations
Treat them as opportunities to learn and improve.
Treat them as opportunities to learn and improve.
Treat them as opportunities to learn and improve.
Collaboration creates ownership
Collaboration creates ownership
Overcome challenges together and celebrate small wins.
Overcome challenges together and celebrate small wins.
Overcome challenges together and celebrate small wins.
Contact
Let's talk!
I'm excited to collaborate creating delightful experiences and high-quality products.
Drop me a message at:
hi @ laurie fyi
Contact
Let's talk!
I'm excited to collaborate creating delightful experiences and high-quality products.
Drop me a message at:
hi @ laurie fyi
© 2013 - 2024
© 2013 - 2024
© 2013 - 2024