Design System and
Governance at Scale

One system. Two brands. Fifteen squads. Fifteen squads maintained different versions of the same button. I built a system for two brands that reduced development time by 50%.

Company Midway Financeira + Riachuelo · Grupo Riachuelo
My Role UX Manager. System architecture, governance, adoption across both brands, and interface with Tech, Product, and the Director of Financial Products.
Operating Scale 11 designers across 15 products · 11 channels · financial and retail ecosystem operating across Midway App, Riachuelo App, E-commerce and POS, Web, WhatsApp, and Backoffice
Period 2023 to 2025
Outcome Seven figures of annualized efficiency · +30% capacity · −50% code time · CSAT 4.7
11
designers · 15 squads
+30%
delivery capacity
−50%
code time · first journeys
7fig
annualized efficiency impact
Design SystemShared Brand InfrastructureComponent to CodeGovernance15 SquadsAI Integration2 Brands Design SystemShared Brand InfrastructureComponent to CodeGovernance15 SquadsAI Integration2 Brands
Midway — Design System
Executive Summary

A fragmented design operation
directly impacts the bottom line.

Eleven designers, 15 squads, an ecosystem of App, POS, Web, WhatsApp, and Backoffice. Neither brand had unified design infrastructure, and inconsistency compounded every sprint as rework and lost time to market. The design system was a structural response to an organizational risk, measured in headcount equivalent and code time.

Key Indicators

+30%
Delivery capacity
−50%
Code time
100%
Success · card journeys
7fig
Annualized efficiency
02 Organizational Problem

The problem was not
aesthetic.
It was systemic.

Component fragmentation is a symptom of organizational failure: design and engineering operating as parallel systems. At Midway and Riachuelo it cost at every layer of delivery.

Duplicated components
Each squad maintained its own library. The same button existed in different versions, each separately maintained, diverging over time.
Design and Tech misalignment
Design and engineering worked from different sources of truth. Developers rebuilt what was already designed. Structural rework, not accidental.
No governance mechanism
Nothing governed what entered the system, who owned it, or how standards applied. Quality varied with the person and the sprint pressure.
Isolation between brands
Midway and Riachuelo operated as separate environments despite sharing infrastructure, engineering, and leadership. Investment in one brand was invisible to the other.
Discovery to delivery friction
Without shared standards, the delivery pipeline stretched unnecessarily. Design time went to rebuilding instead of creating. Engineering time went to aligning instead of shipping. The bottleneck was infrastructure, not capacity.
03 Economic Risk

Fragmentation has
a price tag.

The case for a design system is economic, not aesthetic. Fragmented infrastructure compounds invisible cost every sprint: rework, misalignment, delay, and headcount to offset the inefficiency.

These costs don't plateau: they grow with squad count and channel surface. The design system was not an investment in quality, it was risk mitigation.

Risk Register
Time to Market

Long cycles from component rebuilding and realignment every sprint. Each avoidable delay shrinks the competitive window.

Headcount Pressure

Organizations without shared infrastructure offset inefficiency with headcount. Growth required expanding the team in proportion.

Code Redundancy

Redundant code across channels raised maintenance, regression risk, and technical surface without proportional value.

Experience Inconsistency

Inconsistent interfaces across channels raised contact rate. Users encountering different patterns within the same product generated avoidable support volume and eroded confidence.

04 Strategic Decision

UX stopped responding
to isolated demands
and started organizing the system.

Instead of managing a backlog of component requests, I structured an internal RFP: the design system became an organizational initiative with executive sponsorship.

Internal RFP

Business case built before the first component

Capacity gain and risk reduction before the first component. I directed it as a financial efficiency decision, not a craft initiative, and secured the Director of Financial Products' sponsorship.

Shared Brand Foundation

Midway and Riachuelo operating from a single design infrastructure

I structured the system to serve fintech and retail from one foundation. Tokens allowed brand differentiation at the surface with the structural layer unified. One system, two expressions.

Formal Governance

DS Committee, RACI, and mandatory adoption threshold

I established the weekly Design System committee with design, engineering, and product represented. I created the formal RACI documentation. I set mandatory adoption metrics per squad on the public roadmap. Governance became institutional.

05 Architecture Built

Four layers.
One integrated system.

Layer 01
Design Foundation
Figma · Tokens
Token Architecture
Primitive, semantic, and component tokens: different brand at the surface, shared structure across Midway and Riachuelo. A change at the primitive level propagates to both brands.
Figma Library
Versioned library with documentation, usage rules, and mandatory variants. One source of truth with governed access ended the 15-squad fragmentation.
Documentation Standard
Every component with usage rules, antipatterns, accessibility, and brand variants. I treated documentation as a product deliverable, not optional annotation.
Shared Brand Expression
Tokens differentiate color, typography, spacing, and radius with identical structural components. Accessibility and regulatory clarity governed both brands at the baseline.
Layer 02
Code Integration
React · Storybook · AI
Component to Code via AI
I integrated Locofy AI into the DS Commit flow to generate React and React Native straight from Figma. It compressed the design-to-code cycle and eliminated an entire category of rework.
Storybook Integration
Live reference in Storybook: engineers check specs without depending on a designer.
Code Repository Connection
System connected to the monorepo. Every update passed through DS Commit before entering the code library, which ended ad hoc squad components.
Impact on Delivery
The first DS-native journeys cut 50% of implementation time, measured in engineering hours against equivalent deliverables from the prior period.
Layer 03
Governance
Committee · RACI · Roadmap
DS Committee
I created the weekly committee with design, engineering, and product at the table: fixed agenda, documented decisions, a standing ritual rather than ad hoc escalation.
DS Commit Protocol
Every addition to the system required documentation, cross-functional review, and committee approval. It ended unilateral component creation by squads, the main driver of pre-DS fragmentation.
Public Roadmap
Roadmap visible to every squad. It cut duplicate requests and let squads plan delivery against system availability.
Adoption Metrics
I tracked adoption per squad and reported it in executive governance. Non-compliance required justification, which flipped the default from building locally to using the system.
Layer 04
Adoption Curve
Saving · Scale · CSAT
Compounding Return
DS economics compound, they don't scale linearly: each squad onboarded multiplies the return. At full adoption across 15 squads, the system generates capacity equivalent to several headcount without budget expansion.
Phased Adoption
I sequenced adoption by criticality and engineering readiness, highest-traffic journeys first. Early evidence sustained executive sponsorship.
Quality Signal
CSAT above 4.7 on priority journeys and 100% task success in moderated testing. That evidence opened adoption beyond the initial squads.
Efficiency Trajectory
At full adoption across 15 squads and two brands, annualized efficiency reaches seven figures, counting headcount equivalent, rework, and maintenance cost eliminated.
06 Measurable Impact

Infrastructure with
measurable return.

+30%
Delivery capacity
Design time that moved from rebuilding back to product.
−50%
Code implementation time
Engineering time on DS-native components against equivalent pre-DS complexity.
>4.7
CSAT · priority journeys
Priority financial journeys, measured in post-implementation usability.
100%
Task success · card journeys
Priority card journeys in moderated testing.
Multiple
Headcount equivalent capacity
Capacity equivalent to several headcount, without expanding budget.
7fig
Annualized efficiency
At full adoption across both brands.
15
Squads on adoption roadmap
All on a structured adoption curve.
2
Brands · 1 system
Fintech and retail on the same infrastructure, with brand independence via tokens.

All metrics are masked and based on internal measurement models; figures reflect early adoption or projected full adoption scenarios.

08 Cultural Shift

From urgency culture
to a predictable system.

Before DS
After DS
Organizational Effect
Urgency justified bypassing the standard
Urgency weighed against system cost; exceptions require justification
Standard as default. Exception as exception.
Each squad solved the same problem alone
Shared problem solved once, consumed by all
Multiplied return on design investment
Alignment negotiated sprint by sprint
Alignment set at the system; squads consume, they don't negotiate
Predictable handoff. Reduced rework.
Quality varied with squad culture
Quality floor set by the system
Consistent experience across all channels
Fragmented execution, unpredictable schedule
Governed system enables delivery and capacity forecasting
Predictability as organizational capability
DS seen as a tooling cost
DS measured as headcount equivalent and operating cost
Design as a balance sheet asset
Supporting Evidence

Architecture,
governance and adoption.

Materials available on request, abstracted here to protect confidential data.

Visual 01
4-Layer Architecture Diagram
Four-layer Design System architecture diagram showing token hierarchy, component library, organism patterns, and governance model
Visual 02
Adoption Curve e Economia
Squad adoção curve over time plotted against annualized efficiency saving projection across 15 squads and two brands
Visual 03
Governance & RACI Snapshot
RACI matrix and Comitê de DS governance structure with contribution flow and ownership model across design, engineering, and product
Next Project
My · FIAT · Digital Vehicle Platform
→
 Back to top