Stefany Andrade - UX/UI designer

Clutch · Fintech · Design Systems

Scaling digital

banking across

150+ credit

unions

Scaling digital

banking across

150+ credit

unions

I evolved a fragmented component library into a governed and accessible Design System supporting more than 30 white-label banking applications.

Role

Senior Product Designer

Timeline

January 2026 — Present

150+

Credit Unions

supported

30+

Applications using

the Design System

137

Components fully

documented for this DS

2.2 WCAG

AA target

accessibility

01 / Context

The challenge

A growing platform without a production-ready system

Each credit union needs the platform to feel like its own. Brand expression must remain flexible, while interaction patterns, accessibility and technical behavior stay consistent across the ecosystem.

When I joined, Clutch was migrating between two systems without dedicated ownership. Documentation was incomplete, accessibility had not been built into the foundation, and designers and engineers could not rely on the same final state.

Before

No reliable agreement between design and engineering

Figma

Changed after handoff

Button

Radius 12 · Height 48

Storybook

In development

Button

Radius 6 · Height 44

Mismatch

Figma

Changed after handoff

Continue

Radius 12 · Height 48

Storybook

In development

Continue

Radius 6 · Height 44

Mismatch

Figma

Changed after handoff

Continue

Radius 12 · Height 48

Storybook

In development

Continue

Radius 6 · Height 44

Mismatch

Establishing the baseline

Auditing the

system before

expanding it

Auditing the

system before

expanding it

I combined a Claude–Figma MCP health assessment with manual

component and accessibility reviews. The audit exposed structural

problems across naming, tokens, metadata, coverage and parity

not just visual inconsistencies.

I combined a Claude–Figma MCP health assessment with manual

component and accessibility reviews. The audit exposed structural

problems across naming, tokens, metadata, coverage and parity

not just visual inconsistencies.

↳

No established token architecture

No established

token architecture

↳

Missing documentation and accessibility states

Missing documentation

and accessibility states

↳

Unnecessary variants and inconsistent naming

Unnecessary variants

and inconsistent naming

↳

No contribution, versioning or deprecation process

No contribution, versioning

or deprecation process

03 / Align

Creating a source of truth

Exploration stays flexible

Production stays reliable

I separated work in progress from approved design decisions and

established a controlled path from product need to implementation.

Flexible workspace

Exploration

Ideas · Requests · Product needs

Review

→

Design truth

Production Figma

Reviewed · Documented · Versioned

Parity

↔

Implementation truth

Storybook

Built · Tested · Released

“If it isn’t in both, it isn’t part of the Design System.”

Creating a source of truth

Exploration stays flexible

Production stays reliable

I separated work in progress from approved design decisions and

established a controlled path from product need to implementation.

Flexible workspace

Exploration

Ideas · Requests · Product needs

Review

→

Design truth

Production Figma

Reviewed · Documented · Versioned

Parity

↔

Implementation truth

Storybook

Built · Tested · Released

Rebuilding the foundation

From raw

values

to shared

product

decisions

From raw

values

to shared

product

decisions

I reviewed and migrated the original components individually,

removed unnecessary variants, standardized naming and

introduced a three-tier token architecture.

I reviewed and migrated the

original components individually,

removed unnecessary variants, standardized naming and

introduced a three-tier

token architecture.

↓

02 · Semantic

color.action.primary

Meaning

↓

03 · Component

button.primary.bg.default

Behavior

01 · Primitive

blue.600

#2E63D4

Accessibility as a foundation

Fixing the

pattern, not

every screen

Fixing the

pattern, not

every screen

Input borders did not meet contrast requirements, affecting forms throughout the platform.

Updating the shared component corrected

the issue at its source.

Input borders did not meet contrast requirements, affecting forms throughout the platform.

Updating the shared component corrected the issue at its source.

WCAG 2.2 · AA target

Before · insufficient contrast

Email address

name@email.com

Border disappears against the surface

After · accessible states

Email address

name@email.com

Persistent label · clear focus · defined error behavior

Establishing governance

A component is a product decision not just something added to a library

Every proposal must solve a reusable problem, avoid duplicating existing patterns

and prove it can scale across products before it enters Production.

Proposal & scope

Validate the problem, use cases and

whether it belongs in the shared system.

Approved to explore

Design exploration

Define states, variants, configuration

boundaries and accessibility behavior.

Approved for production

Production promotion

Apply tokens, documentation, naming

and component-level versioning.

Ready for engineering

Implementation

Build in Storybook and validate visual,

behavioral and accessibility parity.

Release approved

White-label without fragmentation

Flexible where

institutions need

identity. Fixed

where users need

consistency

Flexible where

institutions need

identity. Fixed

where users need

consistency

Configurable

Brand colors, logo, content and approved swappable areas.

System controlled

Structure, spacing, interaction, accessibility and component states.

North

Available balance

$12,480.00

View account

The impact

A stronger foundation for

design, engineering and

the platform

A stronger foundation for

design, engineering and

the platform

137

reviewed and documented

components

5.6 → 8.9

internal system-health

assessment

7–8

product teams using the

foundation

~50

engineers supported by

clearer specifications

The Production file is fully operational. Complete Storybook parity remains an active implementation effort,

paced around engineering capacity and safe partner rollout.

The Production file is fully operational. Complete Storybook parity remains an active implementation effort, paced around engineering capacity and safe partner rollout.

My role

Leading the system,

enabling the teams

Leading the system,

enabling the teams

I own

Design direction, Production Figma, governance, tokens,

accessibility standards, documentation and component reviews.

Design direction, Production Figma, governance, tokens, accessibility standards, documentation and component reviews.

I partner on

Product needs, engineering feasibility, Storybook implementation,

rollout strategy and compliance requirements.

Product needs, engineering feasibility, Storybook implementation, rollout strategy and compliance requirements.

The result it is an operating model for scaling

a complex banking platform with greater

consistency, accessibility and confidence

The result it is an operating model for scaling

a complex banking platform with greater

consistency, accessibility and confidence

The result it is an operating model for scaling

a complex banking platform with greater

consistency, accessibility and confidence

Next case study

Modernizing 15+ legacy

construction tools.

Modernizing 15+ legacy

construction tools.

03 / Let's connect

Available for select leadership opportunities

Have a complex problem?

Let's make it clear

Have a complex problem?

Let's make it clear

Have a

complex

problem?

Let's

make

it clear

Stefany Andrade · Lead Product Designer

Brazil · Working globally

03 / Align

“If it isn’t in both, it isn’t part of the Design System.”

Creating a source of truth

Exploration

stays flexible

Production

stays reliable

I separated work in progress from approved design decisions and established a controlled path from product need to implementation.

Flexible workspace

Exploration

Ideas · Requests · Product needs

Review

→

Design truth

Production Figma

Reviewed · Documented · Versioned

Parity

↔

Implementation truth

Storybook

Built · Tested · Released