Infillion Design System
Project overview
Infillion is an omnichannel digital advertising platform.
As part of its rebranding, the goal was to translate a new visual identity into a scalable digital experience.
Multiple teams were producing content in parallel, requiring a system that could support continuous updates and evolving needs.
Infillion is an omnichannel digital advertising platform.
As part of its rebranding, the goal was to translate a new visual identity into a scalable digital experience.
Multiple teams were producing content in parallel, requiring a system that could support continuous updates and evolving needs.
The Shift
A static, page-based approach was not viable under these conditions.
“building a plane while it was already flying.”
— Client
A static, page-based approach was not viable under these conditions.
“building a plane while it was already flying.”
— Client
How the system took shape
project type
2025
my role
Lead Product Designer
year
2024
client
Infillion
01 Starting with a traditional approach
The process initially followed a traditional approach, defining a preliminary sitemap and creating wireframes to structure the website.
However, this approach quickly became limiting, as content was constantly changing and multiple teams were working in parallel.
The process initially followed a traditional approach, defining a preliminary sitemap and creating wireframes to structure the website.
However, this approach quickly became limiting, as content was constantly changing and multiple teams were working in parallel.
02 Rethinking the structure
It became clear that defining fixed pages was not viable.
Instead of continuing with a page-based approach, the focus shifted towards understanding how content could adapt to different scenarios
Fixed pages could not hold in a constantly evolving context.
The focus shifted from designing pages to understanding how content could adapt across different scenarios.
03 Defining the system logic
Fixed pages could not hold in a constantly evolving context.
The focus shifted from designing pages to understanding how content could adapt across different scenarios.
We focused on identifying what should remain consistent and what needed to be flexible, establishing a system that could support change without losing coherence.
We stopped designing pages
and started designing
how content works.
03 Reverse engineering the system
Instead of continuing with a page-based approach, the focus shifted towards understanding how the existing experience was structured.
The website and early wireframes were broken down into smaller units through a reverse engineering process, identifying recurring patterns and content structures across different pages.
This allowed moving away from fixed layouts and towards a more flexible system logic.
The existing website and wireframes were broken down through reverse engineering, identifying recurring patterns across different types of content.
04 From pages to blocks
These patterns were translated into modular building blocks that could adapt to different scenarios.
Instead of designing complete pages, the system was designed as a set of reusable components that could be combined to create multiple layouts.
This approach made it easier to manage constant changes without redesigning from scratch.
These patterns were translated into reusable blocks that could adapt across multiple scenarios.
05 Defining a scalable system
Blocks were organized and categorized based on their function and usage, creating a clear structure that balanced flexibility with consistency.
This allowed different teams to work in parallel while maintaining coherence across the experience.
The result was a lofi system that could scale over time and adapt to evolving content needs.
Blocks were organized and categorized based on their function and usage.
Designing the system meant defining how the product looks, feels, and behaves.
06 Building the design system
To support a scalable and consistent experience, a design system was developed as the foundation of the product.
The system was structured using an atomic approach, defining foundations, atoms, molecules, and components that could scale across different contexts.
A design system was developed to bring coherence to a constantly evolving product.
It was structured using an atomic approach, defining foundations, components, and scalable patterns.
07 Extending the system
The design system established a clear visual language that allowed the product to evolve while maintaining coherence, connecting brand expression with functional UI.
The system extended beyond standard components.
By understanding the client’s needs, we defined the types of assets required across the product.
This led to the creation of digital brand elements that expanded the existing visual identity while supporting new use cases.
This led to the creation of digital brand elements that expanded the existing visual identity while supporting new use cases.
The design system established a clear visual language that allowed the product to evolve while maintaining coherence, connecting brand expression with functional UI.
From system to product
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.
Navigation was validated through iterative usability testing across the design process. Card sorting helped define how content was grouped and labeled, shaping the initial navigation model.
Think-aloud sessions and performance tasks were used to evaluate navigation and key flows, while multiple menu iterations, from low to high fidelity, refined clarity and hierarchy until reaching the final solution.
Consistency means nothing if users can’t navigate it.
Not a website
— a way of building one
10 From system to blocks
With the design system in place, the previously defined content structures were translated into modular building blocks.
These blocks combined structure and visual identity, enabling a flexible way to assemble pages.
With the design system in place, content structures were translated into modular building blocks.
These blocks combined structure and visual identity, enabling a flexible way to assemble pages.
11 Components and templates
These patterns were translated into modular building blocks that could adapt to different scenarios.
Instead of designing complete pages, the system was designed as a set of reusable components that could be combined to create multiple layouts.
These units were implemented as a modular library in Figma, allowing teams to assemble pages by combining and adapting blocks based on content needs rather than fixed layouts.
This led to the creation of digital brand elements that expanded the existing visual identity while supporting new use cases.
Components were structured to be interchangeable within categories, enabling quick iteration while maintaining consistency across pages.
The system allowed different teams to work in parallel, assembling and adapting pages while maintaining consistency across the experience.
Documentation & Guidelines
To ensure the system could scale across teams, We created documentation and guidelines defining how components should be created, used, combined, and implemented.
Navigation and structure were validated through usability testing, iterating from low-fidelity blocks to high-fidelity components to ensure clarity and usability across key flows.
To ensure the system could scale across teams, I created documentation and guidelines defining how components should be used, combined, and implemented.
This included specific spacing rules, usage patterns, and modular logic to maintain consistency across different contexts.
Impact
40 pages
in two weeks
The system enabled the client to design, assemble, and launch a website with nearly 40 pages in just two weeks, while multiple teams worked in parallel.
The system enabled the client to design, assemble, and launch a website with nearly 40 pages in just two weeks.
What I learned
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.
This project changed how I think about design, moving beyond static solutions and focusing on systems that evolve.
This project changed how I approach design
Other Projects
Infillion Design System
Infillion Design System
project type
Scalable system for modular web experiences
Scalable system for modular web experiences
year
2025
2025
my role
Lead Product Designer
Lead Product Designer
client
Infillion
Infillion
Project overview
Infillion is an omnichannel digital advertising platform.
As part of its rebranding, the goal was to translate a new visual identity into a scalable digital experience.
Multiple teams were producing content in parallel, requiring a system that could support continuous updates.
The Shift
A static, page-based approach was not viable under these conditions.
“building a plane while it was already flying.”
— Client
The Shift
A static, page-based approach was not viable under these conditions.
“building a plane while it was already flying.”
— Client
Project overview
Infillion is an omnichannel digital advertising platform.
As part of its rebranding, the goal was to translate a new visual identity into a scalable digital experience.
Multiple teams were producing content in parallel, requiring a system that could support continuous updates.
How the system took shape
01 Starting with a traditional approach
The process began with a traditional approach: defining an initial sitemap and creating early wireframes.
However, this quickly became limiting, as content was constantly changing and multiple teams were working in parallel.
02 Rethinking the structure
Fixed pages could not hold in a constantly evolving context.
The focus shifted from designing pages to understanding how content could adapt across different scenarios.
03 Defining the system logic
We focused on identifying what should remain consistent and what needed to be flexible, establishing a system that could support change without losing coherence.
01 Starting with a traditional approach
The process began with a traditional approach: defining an initial sitemap and creating early wireframes.
However, this quickly became limiting, as content was constantly changing and multiple teams were working in parallel.
03 Defining the system logic
We focused on identifying what should remain consistent and what needed to be flexible, establishing a system that could support change without losing coherence.
02 Rethinking the structure
Fixed pages could not hold in a constantly evolving context.
The focus shifted from designing pages to understanding how content could adapt across different scenarios.
We stopped designing pages
and started designing
how content works.
03 Reverse engineering the system
The existing website and wireframes were broken down through reverse engineering, identifying recurring patterns across different types of content.
04 From pages to blocks
These patterns were translated into reusable blocks that could adapt across multiple scenarios.
05 Defining a scalable system
Blocks were organized and categorized based on their function and usage.
Designing the system meant defining how the product looks, feels, and behaves.
06 Building the design system
A design system was developed to bring coherence to a constantly evolving product.
It was structured using an atomic approach, defining foundations, components, and scalable patterns.
07 Extending the system
The system extended beyond standard components.
By understanding the client’s needs, we defined the types of assets required across the product.
This led to the creation of digital brand elements that expanded the existing visual identity while supporting new use cases.
06 Building the design system
A design system was developed to bring coherence to a constantly evolving product.
It was structured using an atomic approach, defining foundations, components, and scalable patterns.
07 Extending the system
The system extended beyond standard components.
By understanding the client’s needs, we defined the types of assets required across the product.
This led to the creation of digital brand elements that expanded the existing visual identity while supporting new use cases.
From system to product
One example of this approach was Infillion Agent, where the system enabled the creation of new digital and brand assets.
Consistency means nothing if users can’t navigate it.
Navigation was validated through iterative usability testing across the design process. Card sorting helped define how content was grouped and labeled, shaping the initial navigation model.
Think-aloud sessions and performance tasks were used to evaluate navigation and key flows, while multiple menu iterations, from low to high fidelity, refined clarity and hierarchy until reaching the final solution.
Not a website
— a way of building one
10 From system to blocks
With the design system in place, content structures were translated into modular building blocks.
These blocks combined structure and visual identity, enabling a flexible way to assemble pages.
11 Components and templates
These units were implemented as a modular library in Figma, allowing teams to assemble pages by combining and adapting blocks based on content needs rather than fixed layouts.
Components were structured to be interchangeable within categories, enabling quick iteration while maintaining consistency across pages.
Documentation & Guidelines
To ensure the system could scale across teams, We created documentation and guidelines defining how components should be created, used, combined, and implemented.
40 pages
in two weeks
The system enabled the client to design, assemble, and launch a website with nearly 40 pages in just two weeks.
What I learned
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.