Infillion Design System
Infillion Design System
Overview
Challenge
Built a modular design system to support a complex marketing website during an active rebrand—enabling multiple teams to work in parallel while content and structure were still evolving.
Approach
We shifted the focus from isolated deliverables to a modular approach. By breaking the interface into reusable building blocks, we allowed content to dictate the form. Creating a scalable framework designed to adapt to future Infillion products.
Outcome
Delivered a scalable system in Figma, including 80+ reusable components and predefined templates—enabling the launch of ~40 website pages in just two weeks.
Project Type
Design System
My Role
Lead Product Designer
Year
2025
Client
Infillion
How the system took shape
We began by analyzing the client’s offering, mapping product lines, content types, and user scenarios to define how information should be structured, categorized, and navigated. This informed an initial sitemap and wireframes, developed in close collaboration with stakeholders and the existing website.
Through reverse engineering, we identified recurring patterns and use cases, translating them into reusable blocks that could adapt across scenarios and scale consistently over time.
We stopped designing pages
and started designing
how content works.
We built a modular design system to bring coherence to a constantly evolving product. It was structured around foundations, components, and scalable patterns, enabling teams to design and build consistently across different use cases.
The system extended beyond standard UI elements. By analyzing the client’s needs, we defined a broader set of assets and patterns that supported different content types, product lines, and scenarios.
Consistency means nothing if users can’t navigate it.
The menu architecture and core flows were refined through constant iteration. We utilized Card Sorting and usability testing to align the navigation with actual user mental models.
Through iterative testing and refinement, from low to high fidelity, we improved clarity, hierarchy, and flow. This process ensured that the system’s complexity never translated into cognitive load for the end user.
With a clear structure and identity in place, we translated content into modular blocks, creating a library of 80+ functional components organized into 16 logical categories.
These modules were implemented as a component system in Figma, enabling the team to move from design to 40 live pages in just two weeks. This significantly reduced production time and improved speed to market.
Not a website
— a way of building one
A system only works when teams work the same way
To ensure the system could scale across teams, we designed documentation tailored to different users and needs.
For clients
A practical guide focused on how to use the system in real scenarios. Covering content guidelines, usage patterns, and clear do’s and don’ts to support consistent output.
For internal teams
A deeper layer defining the rules behind the system, covering layout, spacing, and composition. To ensure consistent, scalable, and predictable implementation across teams.
We built a modular design system to bring coherence to a constantly evolving product. It was structured around foundations, components, and scalable patterns, enabling teams to design and build consistently across different use cases.
Nominated for Lápiz de Acero 2026
One example of this approach was Infillion Agent, where the system enabled the creation of new digital and brand assets.
One example of this approach was Infillion Agent, where the system enabled the creation of new digital and brand assets.
To ensure the system could scale across teams, We created documentation and guidelines defining how components should be created, used, combined, and implemented.
This project changed how I approach design. Shifting from building interfaces to designing systems that enable others to build. It required embracing uncertainty and focusing on adaptability rather than control.
It reinforced the importance of creating structures that support growth over time.
Other Projects
Infillion Design System
Infillion Design System
Project Type
Design System
Year
2025
My Role
Lead Product Designer
Client
Infillion
Nominated for Lápiz de Acero 2026
Overview
Overview
Challenge
Built a modular design system to support a complex marketing website during an active rebrand—enabling multiple teams to work in parallel while content and structure were still evolving.
Approach
We shifted the focus from isolated deliverables to a modular approach. By breaking the interface into reusable building blocks, we allowed content to dictate the form. Creating a scalable framework designed to adapt to future Infillion products.
Outcome
Delivered a scalable system in Figma, including 80+ reusable components and predefined templates—enabling the launch of ~40 website pages in just two weeks.
Challenge
Built a modular design system to support a complex marketing website during an active rebrand—enabling multiple teams to work in parallel while content and structure were still evolving.
Approach
We shifted the focus from isolated deliverables to a modular approach. By breaking the interface into reusable building blocks, we allowed content to dictate the form. Creating a scalable framework designed to adapt to future Infillion products.
Outcome
Delivered a scalable system in Figma, including 80+ reusable components and predefined templates—enabling the launch of ~40 website pages in just two weeks.
How the system took shape
How the system took shape
We began by analyzing the client’s offering, mapping product lines, content types, and user scenarios to define how information should be structured, categorized, and navigated. This informed an initial sitemap and wireframes, developed in close collaboration with stakeholders and the existing website.
Through reverse engineering, we identified recurring patterns and use cases, translating them into reusable blocks that could adapt across scenarios and scale consistently over time.
We began by analyzing the client’s offering, mapping product lines, content types, and user scenarios to define how information should be structured, categorized, and navigated. This informed an initial sitemap and wireframes, developed in close collaboration with stakeholders and the existing website.
Through reverse engineering, we identified recurring patterns and use cases, translating them into reusable blocks that could adapt across scenarios and scale consistently over time
We stopped designing pages
and started designing how content works.
We stopped designing pages
and started designing how content works.
We built a modular design system to bring coherence to a constantly evolving product. It was structured around foundations, components, and scalable patterns, enabling teams to design and build consistently across different use cases.
The system extended beyond standard UI elements. By analyzing the client’s needs, we defined a broader set of assets and patterns that supported different content types, product lines, and scenarios.
We built a modular design system to bring coherence to a constantly evolving product. It was structured around foundations, components, and scalable patterns, enabling teams to design and build consistently across different use cases.
The system extended beyond standard UI elements. By analyzing the client’s needs, we defined a broader set of assets and patterns that supported different content types, product lines, and scenarios.
Consistency means nothing if users can’t navigate it
Consistency means nothing if users can’t navigate it
The menu architecture and core flows were refined through constant iteration. We utilized Card Sorting and usability testing to align the navigation with actual user mental models.
Through iterative testing and refinement, from low to high fidelity, we improved clarity, hierarchy, and flow. This process ensured that the system’s complexity never translated into cognitive load for the end user.
From system to product
One example of this approach was Infillion Agent, where the system enabled the creation of new digital and brand assets.
From system to product
One example of this approach was Infillion Agent, where the system enabled the creation of new digital and brand assets.
With a clear structure and identity in place, we translated content into modular blocks, creating a library of 80+ functional components organized into 16 logical categories.
These modules were implemented as a component system in Figma, enabling the team to move from design to 40 live pages in just two weeks. This significantly reduced production time and improved speed to market.
Not a website
— a way of building one
Not a website
— a way of building one
A system only works when teams work the same way
A system only works when teams work the same way
To ensure the system could scale across teams, we designed documentation tailored to different users and needs.
For clients
A practical guide focused on how to use the system in real scenarios. Covering content guidelines, usage patterns, and clear do’s and don’ts to support consistent output.
For internal teams
A deeper layer defining the rules behind the system, covering layout, spacing, and composition. To ensure consistent, scalable, and predictable implementation across teams.
This project changed how I approach design. Shifting from building interfaces to designing systems that enable others to build. It required embracing uncertainty and focusing on adaptability rather than control.
It reinforced the importance of creating structures that support growth over time.