SBF Group
White Label Multi-Brand Design System
How can I prove the value of a product that was already worn out, whose benefits weren't recognized,
and which was hardly used while a complex ecosystem was being formed?
TL;DR
I was asked to revive a Design System that had already failed twice and was on the verge of being cut for a third time. Within six months — acting as both product and design lead through 2022 and 2023, I proved its value: 26 of 32 planned web components delivered and documented, adoption in 13 of 27 squads, development time cut by 60%, and prototyping time cut by 85%. Together with the team, we scaled Design System Motriz into the single source of truth for SBF Group's digital portfolio — supporting all 7 brands in the group's digital ecosystem, including the Nike Brazil app launch. The system was later recognized by Supernova as a global benchmark for multi-brand design systems.
Context
SBF Group started in 1981 as a brick-and-mortar sports retailer. In 2020 the company rebranded from Centauro to SBF Group to build a full sports ecosystem in Brazil. In under two years, SBF acquired Nike's operations and retail channels in Brazil, NWB (Brazil's largest sports content platform), FitDance (one of the world's largest dance platforms), and other companies while building a tech organization with a product mindset almost from scratch. The first CTO was hired together with nearly 150 new tech hires across software development, product, design, and data. Products that had previously been siloed inside Centauro's e-commerce team now had to work as part of one connected ecosystem.
I had been at SBF Group since 2021, working across 4 products in the Ventures business unit. In June 2022, I was invited to build the company's first centralized Research, Content, DesignOps, and Design System teams — growing the design org from 25 to 45 people. My main goal was to raise the bar across these specialties and increase efficiency and effectiveness company-wide. I led the Design System team through until the end of 2023, transforming it from a stalled MVP into the company's core digital infrastructure.
Problem
Among everything under my remit, the Design System was the hardest problem. A legacy system already existed, but:
- It was used and developed for only 1 of 7 brands (Centauro), and only on web browser.
- Documentation was outdated and incomplete — 9 of 32 components documented.
- The team had already been created and dissolved twice, because leadership had never been shown a clear business case for it.
- Adoption was low across every technical specialty.
On top of the legacy problems, the "new" context added fresh constraints: the codebase was moving to React and Flutter, the team was small against a large expectation, the new CTO had a cost-reduction plan for the following year, and there was no PM or Group PM owning the product.
The core question I had to answer: how do you prove the value of a product that was already worn out, whose benefits weren't recognized, and that was barely used — while the ecosystem around it kept growing more complex?
My Role
I was appointed to lead the initiative and had to decide, from scratch, who needed to be on the team and what the backlog, roadmap, and strategy should be. There was no Group Product Manager for this product, so I took on a dual role, acting as both product and design lead alongside one software engineer as my closest peer. The squad I inherited had one designer, two web developers, and one mobile developer, with no backlog, PM, strategy, or vision in place.
As the team grew, I brought on a Product Designer who became the system's technical architect — she owned the craft decisions (the token-driven, brand-agnostic component architecture; the Figma library restructuring; the design-to-code alignment with engineering) that made a true white-label system possible. My role stayed on the leadership layer: setting the roadmap and priorities, challenging, validating, and sponsoring the technical direction she proposed, aligning it with the CTO and brand stakeholders, and clearing the organizational blockers that let that execution happen at scale.
Grupo SBF Design Team, where I managed a team of 45 designers.
Challenge
how can i prove the value of a product that was already worn out, whose benefits weren't recognized, and which was hardly used while a complex ecosystem was being formed?
Our Process
I had less than a year to make the Design System work — otherwise the team risked being dissolved for a third time. My goal was to show, within six months, the real value of a design system in measurable productivity and quality terms, so I executed a structured discovery and strategy alignment:
1. Deep History
Gathered Storybook docs, interviewed former leaders using 5 Whys, and aligned expectations directly with the new CTO and tech leadership.
2. Theory & Benchmark
Studied Atomic Design and maturity models, exchanging insights with Miro's Design Manager to map concrete operational pathways.
3. Secure Execution
Brought on a dedicated Product Designer to act as the primary architect, aligning structural design decisions cleanly with developers.
Main Findings
The research surfaced recurring problems across three main dimensions:
1. Communication and visibility:
- Outside the squad, virtually no one knew what had shipped in the Design System over the previous year.
- The squad members were the system's only real advocates — 70% of developers were unhappy with it.
- Product and engineering stakeholders had seen a single presentation about the product and never got their questions answered.
- The org wasn't ready for a decentralized model, even though that was the CTO's ultimate ambition.
- Prioritization and governance
- There were no usage metrics for the Design System anywhere in the company.
- Documentation existed for only one brand (Centauro), and even that had become mostly obsolete after 2021 — while the Brazilian Nike app needed to launch in 10 months with zero components ready.
- Only web components existed, while company strategy was investing more in responsive web and native apps — exactly where there was nothing to offer.
- Culture and endorsement
- Leadership outside of Design had no awareness of the Design System or why it mattered.
- 70% of developers were unhappy with it, and 45% of designers were unhappy with the documentation.
- Some designers resisted adoption even when they understood its value, believing it would limit their creativity.
The Solution
Based on these findings, I set four guiding principles for the new Design System: user-centric (built around real customer needs), mobile-first (prioritized for portable views), scalable (a true white-label system serving every brand), and accessible (WCAG A/AA compliant).
Motriz Design System
Whitelabel Master Library
Child Librarys:
Centauro
Nike
Grupo SBF
NWB
Spoint
Fit Dance
Studio 7.8
We built and executed a six-part action plan:
- OKRs
Structured objectives to expand systems partnership, drive satisfaction, and monitor adoption
2. Way of Work
Centralized ownership for web components, federated contribution for mobile
3. Communication
Ceremonies and instant Slack release/bug updates.
- Governance
Strict creation and documentation rules for web and mobile.
- Content Add-ons
Integrated copy guidelines as the central source of brand voice.
- Roadmap
First robust multi-brand roadmap spanning all SBF digital properties.
View full
Motriz documentation
View documentation
Scaling Beyond The First Year
With the case for the Design System proven, I kept directing its evolution from an MVP into the group's core digital infrastructure until the end of 2023. Motriz became the foundation for some of the company's highest-visibility launches: the Nike Brazil app, where our white-label core had to absorb Nike's strict global brand guidelines without losing scalability; the Spoint rebrand, where the token-driven architecture let the team ship a full app redesign and a new landing page in days instead of weeks; and Painel SBF, the internal platform used to manage pricing, campaigns, and logistics across the group.
My part in this phase was strategic and organizational: prioritizing what got built, aligning the roadmap with brand and engineering stakeholders (including Nike's global team), and building the governance and rituals (critiques, office hours, recurring roadmap updates) that let a lean team support a fast-growing portfolio without losing quality or consistency.
Powering consumer products, flagship apps, and core tools.
Motriz was validated as the master source of truth, empowering squads to ship unified, accessible, and high-fidelity experiences across diverse product lines with zero manual overhead.
Nike Brazil App Launch
The Nike app launch was the ultimate stress test for our design system architecture. We had to evolve our white-label core to absorb Nike’s strict global guidelines without compromising the scalability of our underlying platform. By refactoring our foundational tokens and creating highly flexible component variants, we translated international brand standards into a native, high-performance product experience that secured full global approval.
Nike app launch with our Design System
Centauro Omnichannel Core
Motriz was integrated across Centauro’s core web and mobile touchpoints. Reusable components drove high-conversion user flows, power-building modular Product Detail Pages (PDP), smooth multi-brand checkouts, and optimized search navigation filters.
Centauro's live e-commerce platform
Spoint Rebrand Speedrun
When legacy app Crava rebranded to Spoint, it served as the ultimate test of our tokenized speed. I co-created the new brand style guide and immediately mapped it into the token engine. In close partnership with the Content team, we updated the language frameworks across all channels, launching a complete, high-fidelity ecosystem in record time.
Complete App Redesign & New Features (1 week): Redesigned the entire product experience, introducing new features with baked-in accessibility and consistency.
Marketing & Transactional Emails (2 days): Design a proposal for the communication visual lifecycle in deep collaboration with the Content team.
Web & Mobile Landing Page (3.5 hours): This is where the Design System truly shined. Leveraging our pre-built whitelabel layout rules and core component structures, I designed both responsive versions in record time.
Spoint rebrand
Painel SBF Internal Platforms
We deployed Motriz into Painel SBF, the centralized web command center used internally to manage prices, active campaigns, e-commerce promotions, and logistics. The system standardized complex data tables, making internal tools easier to maintain and faster to build.
SBF internal platform
Results
Within the first six months (proving the system's value):
26 / 32
Components delivered & documented
13 / 27
Squads successfully adopted
- 60%
Development time reduction
- 85%
Prototyping
time cut
- 100% squad adoption, across 14 live applications and 7 brands — from Centauro's omnichannel retail experience to the Nike Brazil app.
- A federated mobile contribution model increased delivery velocity by allowing product squads to create and evolve Flutter components independently, while the core team maintained centralized standards and governance.
- Motriz was later recognized by Supernova as a global benchmark for multi-brand design system consistency.
Featured by Supernova
Team
Marina Domingues – UX Design Manager
Julia Rezende – Product ManagerLuiza Prade – Product Designer
Diógenes Pereira – Software Engineer ManagerEmilio Aiolfi – Staff Software Engineer Mateus Santos – Product Designer
Mateus Vellar – Staff Software Engineer Desktop
Thiago Menezes – Software Engineer Desktop
Lucas Falcão – Staff Engineer Mobile
Next cases
SBF Group
Nike’s tone and voice guideline
Read project
Riachuelo
Retail Self-Checkout MVP
Read project
SBF Group
DesignOps Strategy
Read project
Itaú
Green Products Strategy
Read project
Itaú
Green Products Strategy
Read project
SBF Group
White Label Multi-Brand Design System
How can I prove the value of a product that was already worn out, whose benefits weren't recognized,
and which was hardly used while a complex ecosystem was being formed?
TL;DR
I was asked to revive a Design System that had already failed twice and was on the verge of being cut for a third time. Within six months — acting as both product and design lead through 2022 and 2023, I proved its value: 26 of 32 planned web components delivered and documented, adoption in 13 of 27 squads, development time cut by 60%, and prototyping time cut by 85%. Together with the team, we scaled Design System Motriz into the single source of truth for SBF Group's digital portfolio — supporting all 7 brands in the group's digital ecosystem, including the Nike Brazil app launch. The system was later recognized by Supernova as a global benchmark for multi-brand design systems.
Context
SBF Group started in 1981 as a brick-and-mortar sports retailer. In 2020 the company rebranded from Centauro to SBF Group to build a full sports ecosystem in Brazil. In under two years, SBF acquired Nike's operations and retail channels in Brazil, NWB (Brazil's largest sports content platform), FitDance (one of the world's largest dance platforms), and other companies while building a tech organization with a product mindset almost from scratch. The first CTO was hired together with nearly 150 new tech hires across software development, product, design, and data. Products that had previously been siloed inside Centauro's e-commerce team now had to work as part of one connected ecosystem.
I had been at SBF Group since 2021, working across 4 products in the Ventures business unit. In June 2022, I was invited to build the company's first centralized Research, Content, DesignOps, and Design System teams — growing the design org from 25 to 45 people. My main goal was to raise the bar across these specialties and increase efficiency and effectiveness company-wide. I led the Design System team through until the end of 2023, transforming it from a stalled MVP into the company's core digital infrastructure.
Problem
Among everything under my remit, the Design System was the hardest problem. A legacy system already existed, but:
- It was used and developed for only 1 of 7 brands (Centauro), and only on web browser.
- Documentation was outdated and incomplete — 9 of 32 components documented.
- The team had already been created and dissolved twice, because leadership had never been shown a clear business case for it.
- Adoption was low across every technical specialty.
On top of the legacy problems, the "new" context added fresh constraints: the codebase was moving to React and Flutter, the team was small against a large expectation, the new CTO had a cost-reduction plan for the following year, and there was no PM or Group PM owning the product.
The core question I had to answer: how do you prove the value of a product that was already worn out, whose benefits weren't recognized, and that was barely used — while the ecosystem around it kept growing more complex?
My Role
I was appointed to lead the initiative and had to decide, from scratch, who needed to be on the team and what the backlog, roadmap, and strategy should be. There was no Group Product Manager for this product, so I took on a dual role, acting as both product and design lead alongside one software engineer as my closest peer. The squad I inherited had one designer, two web developers, and one mobile developer, with no backlog, PM, strategy, or vision in place.
As the team grew, I brought on a Product Designer who became the system's technical architect — she owned the craft decisions (the token-driven, brand-agnostic component architecture; the Figma library restructuring; the design-to-code alignment with engineering) that made a true white-label system possible. My role stayed on the leadership layer: setting the roadmap and priorities, challenging, validating, and sponsoring the technical direction she proposed, aligning it with the CTO and brand stakeholders, and clearing the organizational blockers that let that execution happen at scale.
Grupo SBF Design Team, where I managed a team of 45 designers.
Challenge
How can I prove the value of a product that was already worn out, whose benefits weren't recognized, and which was hardly used while a complex ecosystem was being formed?
Our Process
I had less than a year to make the Design System work — otherwise the team risked being dissolved for a third time. My goal was to show, within six months, the real value of a design system in measurable productivity and quality terms, so I executed a structured discovery and strategy alignment:
1. Deep History
Gathered Storybook docs, interviewed former leaders using 5 Whys, and aligned expectations directly with the new CTO and tech leadership.
2. Theory & Benchmark
Studied Atomic Design and maturity models, exchanging insights with Miro's Design Manager to map concrete operational pathways.
3. Secure Execution
Brought on a dedicated Product Designer to act as the primary architect, aligning structural design decisions cleanly with developers.
Main Findings
The research surfaced recurring problems across three main dimensions:
1. Communication and visibility:
- Outside the squad, virtually no one knew what had shipped in the Design System over the previous year.
- The squad members were the system's only real advocates — 70% of developers were unhappy with it.
- Product and engineering stakeholders had seen a single presentation about the product and never got their questions answered.
- The org wasn't ready for a decentralized model, even though that was the CTO's ultimate ambition.
- Prioritization and governance
- There were no usage metrics for the Design System anywhere in the company.
- Documentation existed for only one brand (Centauro), and even that had become mostly obsolete after 2021 — while the Brazilian Nike app needed to launch in 10 months with zero components ready.
- Only web components existed, while company strategy was investing more in responsive web and native apps — exactly where there was nothing to offer.
- Culture and endorsement
- Leadership outside of Design had no awareness of the Design System or why it mattered.
- 70% of developers were unhappy with it, and 45% of designers were unhappy with the documentation.
- Some designers resisted adoption even when they understood its value, believing it would limit their creativity.
The Solution
Based on these findings, I set four guiding principles for the new Design System: user-centric (built around real customer needs), mobile-first (prioritized for portable views), scalable (a true white-label system serving every brand), and accessible (WCAG A/AA compliant).
Motriz Design System
Whitelabel Master Library
Child Librarys:
Centauro
Nike
Grupo SBF
NWB
Spoint
Fit Dance
Studio 7.8
We built and executed a six-part action plan:
- OKRs
Structured objectives to expand systems partnership, drive satisfaction, and monitor adoption
2. Way of Work
Centralized ownership for web components, federated contribution for mobile
3. Communication
Ceremonies and instant Slack release/bug updates.
- Governance
Strict creation and documentation rules for web and mobile.
- Content Add-ons
Integrated copy guidelines as the central source of brand voice.
- Roadmap
First robust multi-brand roadmap spanning all SBF digital properties.
View full Motriz documentation
View documentation
Scaling Beyond The First Year
With the case for the Design System proven, I kept directing its evolution from an MVP into the group's core digital infrastructure until the end of 2023. Motriz became the foundation for some of the company's highest-visibility launches: the Nike Brazil app, where our white-label core had to absorb Nike's strict global brand guidelines without losing scalability; the Spoint rebrand, where the token-driven architecture let the team ship a full app redesign and a new landing page in days instead of weeks; and Painel SBF, the internal platform used to manage pricing, campaigns, and logistics across the group.
My part in this phase was strategic and organizational: prioritizing what got built, aligning the roadmap with brand and engineering stakeholders (including Nike's global team), and building the governance and rituals (critiques, office hours, recurring roadmap updates) that let a lean team support a fast-growing portfolio without losing quality or consistency.
Powering consumer products, flagship apps, and core tools.
Motriz was validated as the master source of truth, empowering squads to ship unified, accessible, and high-fidelity experiences across diverse product lines with zero manual overhead.
Nike Brazil App Launch
The Nike app launch was the ultimate stress test for our design system architecture. We had to evolve our white-label core to absorb Nike’s strict global guidelines without compromising the scalability of our underlying platform. By refactoring our foundational tokens and creating highly flexible component variants, we translated international brand standards into a native, high-performance product experience that secured full global approval.
Nike app launch with our Design System
Centauro Omnichannel Core
Motriz was integrated across Centauro’s core web and mobile touchpoints. Reusable components drove high-conversion user flows, power-building modular Product Detail Pages (PDP), smooth multi-brand checkouts, and optimized search navigation filters.
Centauro's live e-commerce platform
Spoint Rebrand Speedrun
When legacy app Crava rebranded to Spoint, it served as the ultimate test of our tokenized speed. I co-created the new brand style guide and immediately mapped it into the token engine. In close partnership with the Content team, we updated the language frameworks across all channels, launching a complete, high-fidelity ecosystem in record time.
Complete App Redesign & New Features (1 week): Redesigned the entire product experience, introducing new features with baked-in accessibility and consistency.
Marketing & Transactional Emails (2 days): Design a proposal for the communication visual lifecycle in deep collaboration with the Content team.
Web & Mobile Landing Page (3.5 hours): This is where the Design System truly shined. Leveraging our pre-built whitelabel layout rules and core component structures, I designed both responsive versions in record time.
Spoint rebrand
Painel SBF Internal Platforms
We deployed Motriz into Painel SBF, the centralized web command center used internally to manage prices, active campaigns, e-commerce promotions, and logistics. The system standardized complex data tables, making internal tools easier to maintain and faster to build.
SBF internal platform
Results
Within the first six months (proving the system's value):
26 / 32
Components delivered & documented
13 / 27
Squads successfully adopted
- 60%
Development time reduction
- 85%
Prototyping
time cut
- 100% squad adoption, across 14 live applications and 7 brands — from Centauro's omnichannel retail experience to the Nike Brazil app.
- A federated mobile contribution model increased delivery velocity by allowing product squads to create and evolve Flutter components independently, while the core team maintained centralized standards and governance.
- Motriz was later recognized by Supernova as a global benchmark for multi-brand design system consistency.
Featured by Supernova as a global benchmark
Team
Marina Domingues – UX Design Manager
Luiza Prade – Product DesignerJulia Rezende – Product Manager
Diógenes Pereira – Software Engineer ManagerEmilio Aiolfi – Staff Software Engineer Mateus Santos – Product Designer
Mateus Vellar – Staff Software Engineer Desktop
Thiago Menezes – Software Engineer Desktop
Lucas Falcão – Staff Engineer Mobile
Next cases
SBF Group
Nike’s tone and voice guideline
Read project
Riachuelo
Retail Self-Checkout MVP
Read project
SBF Group
DesignOps Strategy
Read project
Itaú
Green Products Strategy
Read project