AI/ML Design Systems Enterprise UX Capita PLC

AI-Powered Design System Dashboard

Designed an internal AI-enhanced design system platform that uses machine learning to suggest components, check accessibility, and maintain design consistency across 8 product teams.

Timeline
2022 – 2023
My Role
Lead UX/UI Designer
Teams Served
8 Product Teams
Designers
15+ Users

The Challenge

Capita PLC, a FTSE 250 company with 45,000+ employees, was struggling with design inconsistency across its digital products. With 8 different product teams working in silos, each team had developed their own component libraries, color palettes, and interaction patterns.

The result? A fragmented user experience, wasted design effort (teams rebuilding the same components), accessibility compliance gaps, and significant technical debt as developers maintained multiple codebases for similar UI elements.

Key Problem Statement: How might we create a unified design system that not only ensures consistency but actively helps designers make better decisions faster using AI-powered assistance?

The Numbers That Drove Action

User Research

I conducted interviews and shadowing sessions with 15 designers, 8 developers, and 5 product managers across different Capita teams to understand their workflows, pain points, and aspirations.

👩‍🎨
Sarah Mitchell
Senior Product Designer

5 years at Capita

Works on customer portal

Pain Points
  • Spends hours searching for assets
  • Unsure if components are accessible
  • No single source of truth
👨‍💻
James Chen
Frontend Developer

3 years at Capita

Works on B2B platform

Pain Points
  • Designs don't match coded components
  • Inconsistent naming conventions
  • Specs missing key details
👩‍💼
Rachel Thompson
Junior Designer

6 months at Capita

Recently onboarded

Pain Points
  • Overwhelming documentation
  • Unsure which patterns to use
  • Afraid of making mistakes

I know we have a component for this somewhere, but I've spent 45 minutes looking for it. At this point, it's faster to just build it from scratch.

Sarah Mitchell, Senior Product Designer

Key Insights

❌ Current State Problems

Fragmented & Manual

  • Components scattered across 8 Figma files
  • No search functionality
  • Manual accessibility checking
  • Tribal knowledge for best practices
  • Outdated documentation
  • No usage analytics

✓ Desired Future State

Unified & Intelligent

  • Single source of truth
  • AI-powered component search
  • Automated accessibility validation
  • Contextual suggestions
  • Living documentation
  • Real-time usage insights

AI Feature Concepts

Working with the data science team, I identified four key AI capabilities that could transform how designers work with the design system:

🔍 Smart Component Search AI

Natural language search that understands intent. Type "button for submitting forms" and get the right component with all variants, not just keyword matches.

♿ Accessibility Copilot AI

Real-time WCAG compliance checking with automatic suggestions for fixes. Scans color contrast, touch targets, focus states, and ARIA labels.

🎨 Design Consistency Checker AI

Analyzes designs against the system and flags deviations. "This button uses #0066CC but your primary blue is #0052CC" with one-click fixes.

💡 Contextual Recommendations AI

Based on what you're designing, suggests relevant components and patterns. "Designing a form? Here are the most-used form patterns by your team."

Component Library

I designed and documented 240+ components across 12 categories, each with variants, states, and accessibility specifications.

🔘
Buttons
24 variants
📝
Form Inputs
36 variants
🗂️
Cards
18 variants
📊
Data Tables
12 variants
🧭
Navigation
20 variants
💬
Modals
15 variants
🔔
Alerts
16 variants
📈
Charts
22 variants

AI Assistant Workflow

The AI assistant guides designers through component selection and customization, reducing decision fatigue and ensuring best practices.

1

Designer describes need in natural language

"I need a confirmation dialog for deleting user accounts with a warning about permanent data loss"

2

AI analyzes intent and context

Identifies: destructive action, needs warning, requires confirmation, high-stakes decision

3

AI suggests relevant components

Returns: Destructive Modal variant with red accent, warning icon, two-button layout, recommended copy patterns

4

One-click insert with accessibility baked in

Component includes: focus trap, ARIA labels, escape key handling, color contrast compliant

Tools & Technologies

Design & Prototyping

Figma Figma Make Zeroheight

AI & Machine Learning

Microsoft copilot Azure Cognitive Services Claude Natural Language Processing

Accessibility

WAVE Stark Color Contrast Analyzer

Collaboration

Confluence JIRA Miro

Measurable Impact

90%
Design Consistency Score
-40%
Component Creation Time
0
Accessibility Violations
2 wks
Designer Onboarding (from 6)
240+
Components Documented
8
Teams Now Unified

The AI assistant has completely changed how I work. Instead of spending time searching and second-guessing, I describe what I need and get the right component instantly. It's like having a senior designer looking over my shoulder.

Rachel Thompson, Junior Designer, Capita

For the first time, what I see in Figma matches exactly what I can build in code. The design-to-dev handoff that used to take days now takes hours.

James Chen, Frontend Developer, Capita

Awards & Recognition

🏆 This project contributed to winning the Center of Excellence Award 2023 at Capita, recognizing exceptional contribution to design operations and innovation.

What I Learned

Next Case Study

Axelos UK Government Platform

View Project