Centene Corp.
Fondue Design System
ROLE:
Design System Specialist
CONTRIBUTIONS:
Visual direction, Process direction, Component design, Documentation
DURATION:
12 months
PLATFORMS:
iOS, Responsive mobile / Responsive desktop
OVERVIEW:
Fondue is a unified design system that brings multiple brands together under one cohesive voice.
By collaborating closely with the Accessibility Team from the outset, we ensured accessibility was baked right into its foundation.
As the design system matured, Figma analytics validated its impact, showing a 30% reduction in component detachments and a 20% increase in component utilization among Centene’s 40 project designers—highlighting Fondue’s effectiveness and value to the company.
Context
Centene Corporation is a leading healthcare provider, delivering care through government-sponsored programs like Medicaid and Medicare to over 28 million members across the U.S.
Centene had existing design systems for their enterprise software but needed a fresh UI for their public-facing health insurance sites and apps. That’s when Fondue — a temporary name inspired by the fondue emoji — was born.
🫕
More Context
As Fondue was coming together, leadership decided they needed a universal design system that could work across both backend enterprise tools and public-facing sites. This system also had to support multiple brands and color palettes. Could one design system do it all?
Fondue to the Rescue
After a series of experiments, the team and I demonstrated that a single design system was both viable and beneficial. I also made the case for its internal marketing potential, convincing leadership to stick with the name Fondue!
The Journey
Like any team, we faced the usual challenges: prioritization (what’s most important and in what order?), processes and ceremonies (which framework works for both designers and developers? Do we need daily standups?), and long-term vision (where’s this train headed?). Thankfully, with my years of experience (yes, I’m no spring chicken), I was able to contribute significantly. For example, we adopted the Shape Up framework, and established a contribution model that encouraged product designers outside the design systems team to actively contribute to Fondue.
…but
I won’t dive into all the trials, tribulations, and victories here. Instead, I want to focus on the key features that make Fondue a standout design system:
Standout Stuff
Theming – Allowing any design or prototype using Fondue to switch between different brand color palettes with a single click.
PORs (Patterns of Record) – POR layouts use real components and spacing but with placeholder content. These layouts serve as a way to communicate established design patterns and give project designers a reliable starting point.
Robust Components – Ensuring every design component was rigorously tested through visual regression testing to maintain fidelity.
1. Theming
Theming in Figma has been a game-changer that I helped bring to Centene’s digital product lineup through our design system, Fondue. By leveraging Figma variables, we enabled seamless switching between brand color palettes and styles with a single click.
Advantages:
Consistency: Maintains a unified look across Centene’s various brands.
Efficiency: Speeds up design updates, eliminating manual tweaks for each brand.
Scalability: Simplifies managing multiple themes within one system, making it easier for teams to collaborate and iterate.
One app, multiple brands.
2. Patterns of Record (PORs)
By creating a collection of Patterns of Record (PORs) — pre-designed, real-world components and layouts — my team and I equipped Centene’s project designers with a set of ready-to-use resources. These PORs, often referred to as “sticker sheets,” allowed designers to work faster, eliminating the need to build components from scratch or second-guess layout standards. This efficiency minimized rework and gave designers quick access to consistent, reusable elements.
Beyond individual projects, these sticker sheets sparked broader discussions about design patterns across the organization. For example, how should the stepper component integrate with a sidebar layout? By developing these sheets, we addressed key design questions early, helping establish consistent, scalable patterns for long-term use.
3. Robust components
Through visual regression testing, we ensure the flexibility, durability, and longevity of every component.
This testing involves creating test instances for each variant (like the card component shown here). All text is replaced with “test test test” in extreme amounts to push the component’s capacity. Layouts are stretched or shrunk to test flexibility, and a bitmap overlay in “Difference” mode highlights any breaking changes.
By adopting this methodical approach, the Fondue team improved Figma component quality, reducing component detachments by 40%. Designers stayed linked to original components, ensuring seamless updates, early issue detection, and consistency across the system.
A bitmap overlay in “Difference” mode highlights any breaking changes.
ROLE:
Design System Specialist
CONTRIBUTIONS:
Visual direction, Process direction, Component design, Documentation
DURATION:
12 months
PLATFORMS:
iOS, Responsive mobile / responsive desktop
OVERVIEW:
Fondue is a unified design system that brings multiple brands together under one cohesive voice.
By collaborating closely with the Accessibility Team from the outset, we ensured accessibility was baked right into its foundation.
As the design system matured, Figma analytics validated its impact, showing a 30% reduction in component detachments and a 20% increase in component utilization among Centene’s 40 project designers—highlighting Fondue’s effectiveness and value to the company.