Design System
A lean design system that boosted CSAT from 63% to 77%
COMPANY
PERIOD
10 months
jan/22 - oct/22
jan/22 - oct/22
ABOUT VINDI
Vindi is a Brazilian fintech specialized in recurring payments and subscription management.
Founded in 2013, the company offers a SaaS platform that helps businesses manage billing, invoices, and collections — especially for subscription-based models.
In 2020, Vindi was acquired by Locaweb Group, joining forces with Yapay, another company in the group focused on payment solutions. The merger expanded Vindi’s product portfolio and brought the challenge of unifying two platforms, teams, and visual identities into a cohesive user experience.
Founded in 2013, the company offers a SaaS platform that helps businesses manage billing, invoices, and collections — especially for subscription-based models.
In 2020, Vindi was acquired by Locaweb Group, joining forces with Yapay, another company in the group focused on payment solutions. The merger expanded Vindi’s product portfolio and brought the challenge of unifying two platforms, teams, and visual identities into a cohesive user experience.
SKILLS
Discovery
Design System
UI Design
Design System
UI Design
CONTEXT
Vindi faced challenges in implementing its design system due to technical debt and the fact that design, engineering, and product teams struggled to adopt and consume it effectively.
DIAGNOSE
Why the Design System wasn't working
Vindi already had a design system in place, but it was rarely adopted by the teams.
The system had been launched, with little stakeholder involvement or testing. As a result, it became too complex and technical, with dense documentation and too many options, making it hard for product designers to use.
Additionally, the company had recently undergone a rebranding, which required a new visual language for the components to reflect the brand’s new positioning.
The system had been launched, with little stakeholder involvement or testing. As a result, it became too complex and technical, with dense documentation and too many options, making it hard for product designers to use.
Additionally, the company had recently undergone a rebranding, which required a new visual language for the components to reflect the brand’s new positioning.
OUR APPROACH
Applying the Pareto Principle
With a new team of 3 product designers and 5 developers, we applied the Pareto Principle to prioritize the 20% of components and screens that would deliver 80% of the impact.
By mapping the most-used flows and the key components they relied on, we reduced complexity and worked in lean cycles, fewer deliverables per iteration allowed us to test early and often with stakeholders like developers and designers.
This approach was especially important after Vindi’s merger with Yapay, which significantly increased the number of screens to be updated.
Our plan:
• Update design tokens to reflect the new brand identity
• Rebuild the most critical components
• Apply a visual facelift to the highest-impact screens
By mapping the most-used flows and the key components they relied on, we reduced complexity and worked in lean cycles, fewer deliverables per iteration allowed us to test early and often with stakeholders like developers and designers.
This approach was especially important after Vindi’s merger with Yapay, which significantly increased the number of screens to be updated.
Our plan:
• Update design tokens to reflect the new brand identity
• Rebuild the most critical components
• Apply a visual facelift to the highest-impact screens
Simplifying complexity: a lean approach to color system
I was responsible for adapting the previous color palette to align with the new brand identity. Simplification was a guiding principle across the entire design system work.
The existing palette had over 90 tokens, inherited from Vindi’s former branding, but lacked clear usage guidelines.
The naming conventions were inconsistent, combining semantic labels with raw color values, which made the system hard to scale and adopt.
Here’s how I approached rebuilding the palette from the ground up
The existing palette had over 90 tokens, inherited from Vindi’s former branding, but lacked clear usage guidelines.
The naming conventions were inconsistent, combining semantic labels with raw color values, which made the system hard to scale and adopt.
Here’s how I approached rebuilding the palette from the ground up
Definying semantics & simplyfing
Too many options can be overwhelming, so I asked: Which colors do we actually need?
I narrowed it down from 90 to 48 tokens, focusing only on real, recurring use cases.
I narrowed it down from 90 to 48 tokens, focusing only on real, recurring use cases.
Global raw pallete
Using the brand’s base colors, we built scalable hue ranges with tools like Leonardo and Accessible Color Palette.
Simplifying
Shades 500 and above are accessible on white backgrounds.
Simplifying
Shades 500 and above are accessible on white backgrounds.
Testing it out
I applied the palette to real screens, some free Figma templates from community, and components, refining the scales through visual testing and contrast validation.
Docummenting
I documented the color use cases directly in Figma, keeping it simple and practical for daily use.
Vindi's homepage
Dashboard Project Management - Asril Mochammad
Components
Core components, such as tables, charts, inputs, and the sidebar were prioritized using the Pareto Principle, focusing on the elements with the greatest usage and impact.
We followed iterative cycles with designers and engineers to validate behavior, usability, and edge cases.
Documentation followed the same approach as the color palette: keeping it clear, practical, and easy to apply.
We followed iterative cycles with designers and engineers to validate behavior, usability, and edge cases.
Documentation followed the same approach as the color palette: keeping it clear, practical, and easy to apply.
Facelift
With the core components in place, we applied a visual facelift to the 15 most accessed screens in the Vindi app by replacing outdated elements with the new design system components.
There were no structural or functional changes, the goal was to modernize the interface and align visuals with the new brand identity and design system foundations.
There were no structural or functional changes, the goal was to modernize the interface and align visuals with the new brand identity and design system foundations.
Home - before/after
Pending payments - before/after
Results
We shipped around 15 redesigned screens and observed a noticeable increase in user satisfaction, measured through our recurring CSAT survey.
A total of 1,166 users responded, and the platform reached a CSAT score of 77%. Prior to implementing the design system, the score was 63%.
This represents a 22% increase in user satisfaction following the visual update and system improvements.
We also received positive feedback from product designers, highlighting improved consistency and easier adoption thanks to our lean approach.
A total of 1,166 users responded, and the platform reached a CSAT score of 77%. Prior to implementing the design system, the score was 63%.
This represents a 22% increase in user satisfaction following the visual update and system improvements.
We also received positive feedback from product designers, highlighting improved consistency and easier adoption thanks to our lean approach.
