Bynder Design System Update

A full design system overhaul that modernised the product, achieved WCAG AAA compliance, and increased adoption.

Overview

After Bynder completed an acquisition and launched a bold new brand identity, the product looked nothing like the marketing. I was part of the team that closed that gap, rebuilding the design system from tokens up, achieving WCAG AAA compliance, shipping 37 new components, and documenting 16 new patterns and 16 new layouts.

Rather than a big-bang replacement, we took an incremental approach that maintained stability while delivering visible wins early. Adoption increased 42% in six months.

Solution

Incremental rollout over big-bang replacement

Prioritised the most widely used components first, building trust and momentum before tackling the full system. Each phase delivered visible improvements before the next began.

Accessibility baked in from the start

Rather than treating brand refresh and WCAG compliance as separate efforts, we aligned them into a single workstream, fixing grayscale, elevation, and colour tokens in one pass.

Patterns and layouts, not just components

Went beyond isolated components to document the flows and layouts that tie them together, closing the gap that was causing cross-team inconsistency.

Outcomes

42%Increase in design system adoption

WCAG AAACompliance achieved

37New components shipped

16New patterns documented

16New layouts documented

6 monthsFull system delivered

The Problem

Bynder had just completed an acquisition and launched a new brand identity. The gap it created was immediate and visible: the product customers used every day looked nothing like the brand they were seeing in campaigns. Marketing was promising something modern, cohesive, and bold. The product was delivering something static, inaccessible, and inconsistent.

Rather than run two parallel efforts, one for brand, one for compliance, we recognised the opportunity to align them. A single, coordinated update to the core design system could modernise the product on both fronts at once.

A custom dashboard built with engineering tracked component usage and accessibility levels across product pages. The audit revealed four compounding problems: the system did not meet WCAG AAA compliance, grayscale contrast and elevation were the biggest blockers. Documentation was scattered across Figma, Storybook, and Google Docs. Accessibility was not built into daily workflows. And Figma libraries were not using the variables system, creating unnecessary handoff overhead. Teams were avoiding the design system because components were too outdated and inflexible for new features.

Custom component usage and accessibility tracking dashboard

Grayscale, elevation, and colour token changes showing WCAG AAA compliance improvements

Key Product Decisions

Incremental rollout, not a big-bang replacementA big-bang approach would have disrupted eight engineering teams simultaneously and eroded the trust we were trying to rebuild. Instead, we sequenced the rollout by impact: grayscale and elevation first, then colour tokens, then typography, then components, then patterns and layouts. Each phase delivered visible improvements before the next began.

Fix the most used components before anything elseWe did not start with the most broken components. We started with the most used, buttons, inputs, list items, dividers, control items. Fixing these first meant the majority of the product improved immediately, and engineering teams saw the benefit early. This rebuilt confidence in the design system as a tool worth adopting.

Five design principles before any visual decisionsBefore touching a single component, the design team ran workshops to establish five principles: trustworthy, effortless, approachable, holistic, and adaptable. The underlying framing, Bynder as a blank canvas for other brands to showcase their identity, kept every visual decision anchored to a purpose rather than a preference.

Patterns and layouts alongside componentsThe audit revealed the system was strong at the component level but weak at the pattern level. Filtering, sorting, and search interactions were undocumented. We added 16 new patterns and 16 new layouts, starting with the most frequently used screens, to give teams a stronger foundation to build on.

AI components as a first-class concernAs the brand refresh was underway, AI initiatives inside Bynder accelerated. We created a dedicated set of AI design principles, human-directed autonomy, transparency, safety and recovery, accountability, and adaptable contextual intelligence, and extended components to support them. Asset detail views gained smart editing. Text fields gained AI-powered content generation support. Adaptive toolbars, inline suggestions, and contextual assist were introduced to keep AI interactions consistent with the rest of the system.

Single source of truth for documentationDocumentation was migrated from Figma, Storybook, and Google Docs into Confluence, accessible to the entire company, not just designers. This reduced dependency on designers for smaller requests, improved onboarding speed for new team members, and made accessibility guidance part of the daily workflow rather than a separate checklist.

What Almost Killed It

The biggest risk was not technical, it was trust. Teams had been avoiding the design system for years because of outdated, inconsistent components. Announcing a new system would not fix that. The only thing that would rebuild confidence was shipping visible improvements quickly, to the components people used most, without breaking what already existed.

The incremental strategy was not just a rollout preference, it was the primary tool for re-earning adoption.

What I Learned

"Big change works when it is rolled out incrementally"A system-wide overhaul announced as a single release would have created resistance. The same changes, sequenced by impact and delivered as a series of small visible wins, created momentum. Each improvement made the next one easier to adopt.

"Documentation is one of the most powerful levers for scaling design"It is not glamorous work. But migrating to a single source of truth reduced designer dependency, accelerated onboarding, and made the design system something the whole company could use, not just the design team. The 42% adoption increase did not come from better components alone.

"When product and brand are aligned, design gains credibility"The disconnect between Bynder's marketing and its product was eroding trust on both sides, with customers and internally. Closing that gap made the design system easier to advocate for, easier to adopt, and easier to build on. Alignment is not just a visual outcome, it is an organisational one.