AC. / Senior Product Designer ← Back to selected work

MyTricolor Design System

PRODUCT DESIGN / AUTOMOTIVE FINANCE

Simplifying a complex payment experience through a scalable, AI-ready design system.

01 / THE PROJECT

MyTricolor is an automotive finance platform that helps customers understand their financing, manage payments and stay on top of their account.

I redesigned the experience around clarity and consistency, then built a dedicated Design System to give the product its own scalable visual and interaction language.

ROLE
Senior Product Designer
FOCUS
Product Design · Design Systems · Design Tokens · AI-assisted workflows
TOOLS
Figma · Supernova · Figma MCP · AI-assisted development
MyTricolor payment experience with amount selection and payment summary.
A clearer customer experience. A shared foundation underneath.MYTRICOLOR / PRODUCT & SYSTEM
02 / THE CHALLENGE

Making payments
shouldn't feel
complicated.

The existing experience had evolved through incremental changes over time. Visual patterns were inconsistent, parts of the interface felt dated, and an overuse of red created unnecessary visual noise in an experience where customers needed clarity and confidence.

The goal was to simplify the payment experience, establish a clearer hierarchy and create a more consistent visual language that made financing information easier to understand and actions easier to complete.

  1. 01

    Simplify
    the experience

  2. 02

    Reduce
    visual noise

  3. 03

    Create
    consistency

03 / A DEDICATED DESIGN SYSTEM

A system with
its own identity.

Rather than simply extending patterns from other products across the brand, MyTricolor required a system designed around its own customer needs: financial clarity, trust, accessibility and straightforward interactions.

I created a dedicated Design System that established its foundations, interaction patterns, semantic language and reusable components while remaining recognizable within the broader brand ecosystem.

A product decision.
A foundation for everything that follows.

04 / BUILDING THE SYSTEM

Every detail.
One shared language.

Foundations → Components → Patterns

MyTricolor Design System board: color and typography foundations, spacing, geometry, action and input states, financial status, feedback, and product patterns.
Foundations, behavior and product composition—defined together.MYTRICOLOR DESIGN SYSTEM
05 / TOKEN ARCHITECTURE

From visual decisions
to system architecture.

The system separates raw values from meaning and implementation. Each layer gives the next one a clear contract.

01 / RAW VALUES

Primitives

02 / INTENT

Semantic tokens

03 / APPLICATION

Component tokens

04 / EXPERIENCE

Product UI

color.brand.700action.primary.defaultbutton.primary.backgroundPrimary action
color.error.600status.errorinput.border.errorValidation state
space.300control.padding.inlinebutton.padding.inlineControl spacing
SAME MEANING. DIFFERENT NOTATION.

Readable in Figma.
Predictable in code.

PRIMITIVESSEMANTICCOMPONENTS
Figma variable names and their machine-readable equivalents
Figma VariablesMachine-readable paths
Color/Brand/700color.brand.700
Color/Neutral/100color.neutral.100
Action/Primary/Defaultaction.primary.default
Status/Errorstatus.error
Button/Primary/Backgroundbutton.primary.background
Input/Border/Focusinput.border.focus
06 / AI-READY ARCHITECTURE

A system designed
for people
and machines.

Explicit meaning. Structured paths.
Decisions that travel across tools.

01

Predictable naming

Tokens communicate intent instead of arbitrary implementation values.

02

Semantic aliasing

Components consume semantic decisions instead of hardcoded primitive values.

03

Machine-readable structure

Structured tokens can be exported and consumed by development tools and automated workflows.

04

Shared context

Design, engineering and AI-assisted tools can operate from the same system language.

07 / AI + DESIGN SYSTEM WORKFLOW

AI works inside
the system,
not instead of it.

The designer defines the architecture, semantics, components and rules. AI accelerates work within that system.

Audit & normalization

Identify repeated values, inconsistencies and opportunities for consolidation.

Context before implementation

Figma MCP connects design context and system information to AI-assisted development.

Review stays with people

Evaluate UX, accessibility, visual quality and consistency with the system.

  1. 01

    Product context

    Customer needs and product intent

  2. 02

    Design System

    Architecture, components and rules

  3. 03

    Structured tokens /
    Figma Variables

    A predictable system language

  4. 04

    Figma MCP

    The design-context bridge

  5. 05

    AI-assisted development

    Established decisions, applied

  6. 06

    Code

    Implementation of the shared system

  7. 07

    Review & validation

    UX · Accessibility · Visual QA · System fit

08 / DESIGN TO CODE

One language from design
to implementation.

Structured tokens create a portable contract
between design and implementation.

  1. FIGMA COMPONENTButton / Primary
  2. COMPONENT TOKENbutton.primary.background
  3. SEMANTIC TOKENaction.primary.default
  4. PRIMITIVEcolor.brand.700
  5. CODEvar(--button-primary-background)
Figma VariablesDesign TokensDTCG / JSONSupernova / token pipelineCSS / React / Tailwind
09 / THE SYSTEM IN PRODUCT

The system disappears.
The clarity stays.

SYSTEMPRODUCT

Foundations, semantic decisions and components come together in a coherent customer experience.

01 / Account overview

Recognizable context. A clear next step.

Complete MyTricolor account overview showing a financed 2024 Vela C5, next payment, financing balance, progress and recent payments.
Primary actionAccount statusFinancing progress

02 / Payment experience

One consistent language, through the detail.

Complete MyTricolor payment interface with amount due, regular or custom payment amount, extra principal payment, payment method and summary.
Input hierarchyPayment methodConsistent action
10 / A SHARED PRODUCT LANGUAGE

A Design System is more
than a component library.

It is a shared product language for designers, developers, tools and AI-assisted workflows.

DesignersEngineeringDesign SystemAI-assisted workflowsImplementation