Felipe Coletti
01 / Riachuelo + Midway / Design SystemFintech + retail · Design leadership

Two brands. One design system.

Riachuelo and Midway design system artwork with the Riachuelo logo

A shared foundation built to scale financial products and retail without flattening either identity.

Explore ↓

00 / Context

Shared infrastructure. Separate product systems.

Riachuelo and Midway shared engineering and leadership, but their libraries and sources of truth had evolved separately.

Investments made for one brand rarely benefited the other. Duplicate components, inconsistent handoffs and repeated development work slowed delivery across financial products, retail and e-commerce.

I defined the system architecture, brand principles and governance model, then directed delivery across internal Design and Engineering teams and partner Try.

01 / Operating model

Make the system fundable before making it scalable.

UX operated without a dedicated budget. I created Midway’s first UX cost center for tools, headcount and the design system, while leading 11 designers across 15 squads.

When wallets and lending expanded the roadmap without additional headcount, I mapped team capacity, compared internal and partner delivery at present value and ran an RFP with five suppliers. Try was selected for its financial-sector experience and embedded delivery model.

Designer capacity mapped across the Midway product roadmap
Capacity made the delivery constraint visible before the sourcing decision.

Case-reported operational results

One foundation. More capacity.

+30%

design delivery capacity.

-50%

frontend implementation time.

R$1M

freed from the UX cost center and reallocated.

02 / System architecture

From duplicate libraries to a shared system view.

A workshop with the UX team exposed duplicated components and dependencies across Midway and Riachuelo.

We inventoried 98 essential components and classified each as shared, visually adapted or tokenized.

Workshop wall mapping business, UX, development and accessibility needs
The workshop connected business evolution, UX gaps and integration decisions.
01

Identity

Disconnected typography, icons and color across both brands.

02

Interface

Different experiences for actions that should feel related.

03

Components

Inconsistent standards, documentation and handoff.

04

Universal design

Missing standards for accessibility, motion and feedback.

03 / Brand model

Share structure. Preserve expression.

A common system did not mean making a bank and a retailer look identical.

Research separated the problem into two workstreams: how connected brands create continuity, and how visual systems stay flexible without losing structural consistency.

  1. One component foundation across Midway, Riachuelo and E-commerce.
  2. Brand distinction through tokens, assets and controlled variation.
  3. Motion as product feedback for action, confirmation and attention.

Direction evidence

Positioning became a system decision.

A 16-brand matrix clarified the open territory. I selected a direction combining the expressiveness of the Innovative route with the clarity of the Alternative route.

Midway positioning matrix
Midway positioning
Riachuelo positioning matrix
Riachuelo positioning
Design system visual direction principles
Shared visual direction

Motion language

Feedback you can feel.

Motion became an affordance: signaling actions, confirming responses and guiding attention across a diverse audience.

04 / System anatomy

From system rules to production libraries.

The architecture scaled across components, icons, logos and illustrations for Midway, Riachuelo and E-commerce.

The initial inventory defined 98 essential components for the sourcing scope. The production library ultimately delivered 135 components.

  • 135components
  • 521icons
  • 11illustrations
Component and icon foundations across Midway and Riachuelo
Illustration and reusable visual-pattern library

05 / Governance

A living product needs decision rights.

Adoption depended on governance, not only a finished Figma library.

I implemented a hybrid centralized and federated model. A core designer protected submissions, technical quality and component integration while squad designers contributed through shared standards. Usage guidance, versioning, changelogs and implementation constraints lived with the governed library.

  1. Roadmap ownership and RACI.
  2. Contribution standards and adoption tracking.
  3. Mandatory versioning and controlled snowflakes.
  4. Formal deprecation of the legacy library.
Hybrid centralized and federated design system governance model
A core team protected quality while squads progressively contributed.

06 / Design to code

Connect the system to delivery.

I introduced the group’s first design-to-code workflow, connecting governed components to frontend delivery while preserving the system’s acceptance criteria.

Validation

Test the system in a real journey.

Cards Home became the first full journey built on the new system at one of Midway and Riachuelo’s highest-traffic entry points.

6/7

tasks reached 100% success.

0

tasks ended in complete failure.

7s

to access an invoice.

4.9/5

overall CSAT.

Payment completion took 3 seconds, and heatmaps showed where attention concentrated across invoice access and payment.

Participant count was not documented in the retained case source, so no sample size is claimed here.

Cards Home screens with user-test attention heatmaps
Cards Home usability evidence across invoice and payment tasks.

Final expressions

A system that could change context without losing itself.

Light expression of the Riachuelo and Midway design system
Dark expression of the Riachuelo and Midway design system

Leadership beyond the system

The design system supported broader outcomes.

  • +59%credit-card upsell conversion · +33% card spend
  • −50%cancellation contacts · −14% service cost via AHT
  • #2Best Onboarding · idwall 2024

Broader portfolio outcomes shown as leadership context, not attributed to the design system.

Next case

BV: Onboarding View ↘