Overview
The Bundesagentur für Arbeit (Federal Employment Agency) is one of the largest public digital services in Europe, used by millions of citizens to access employment support, benefits, job listings, and training programs. Via Capgemini, I was engaged as the design lead responsible for accessibility-first design system development during a complex, multi-team design transition.
The engagement required extensive cross-functional collaboration - working with POs, legal compliance teams, frontend engineers, and QA - while owning design quality from initial Discovery through to production sign-off. I facilitated stakeholder workshops to align on component standards, presented recommendations to enterprise decision-makers, and transferred knowledge to both design and development teams through documented workflows, annotation libraries, and hands-on sessions.
WCAG
2.1 AA - all components
5+
Tools unified
M+
Citizens served
40+
Core components
Process
The design system was built through a structured four-phase approach aligned with an agile delivery cycle. Each phase included stakeholder checkpoints - design decisions were documented, presented, and signed off before moving to the next phase, ensuring enterprise clients remained informed and in control throughout.
01
Audit
Component inventory across all active surfaces. Accessibility gaps catalogued and prioritised with stakeholder input in a structured Discovery session.
02
Define
Token system and component spec templates established. Presented design standards framework to client stakeholders for alignment before build began.
03
Build
Figma library + Axure widget sets built in parallel. Knowledge transfer sessions run with engineering team to embed standards into the build pipeline.
04
Validate
Automated a11y tests + manual screen reader testing (NVDA, VoiceOver). QA sign-off checklist.
The multi-tool handoff workflow connected Figma as the source of truth through to Axure prototypes, Storybook component documentation, Jira tickets, and Confluence specs - ensuring every team could work in their tool of choice while referencing the same component standards.
Design Tokens
The token system formed the foundation of the design system - a single source of truth for colour, typography, spacing, and elevation. All tokens were defined in Figma variables and exported to CSS/JSON for engineering consumption.
Color Tokens
tokens/colors.json
brand.primary
#003882
brand.primary-light
#00589A
brand.accent
#00A3C4
brand.cta
#E05B00
semantic.success
#2E7D32
semantic.warning
#E65100
semantic.error
#C62828
surface.default
#F4F7FB
Spacing Scale
Typography Scale
Component Library
The component library was built with a strict accessibility-first approach. Every component includes documented keyboard interactions, ARIA attributes, focus management rules, and contrast ratios. Below are selected components from the system.
Buttons
BfaButton
Variants
Sizes
States
Form Fields
BfaInput
Geben Sie Ihren Vornamen ein.
Fokus-Zustand - 3px blauer Ring
⚠ Bitte geben Sie eine gültige PLZ ein (5 Ziffern).
✓ Gültige Eingabe
Status Badges
Alerts & Notifications
Hinweis
Ihre Sitzung läuft in 5 Minuten ab. Bitte speichern Sie Ihre Eingaben.
Erfolgreich gespeichert
Ihre Bewerbung wurde erfolgreich eingereicht. Sie erhalten eine Bestätigung per E-Mail.
Achtung
Das Stellenangebot läuft morgen ab. Bewerben Sie sich jetzt, um keine Frist zu verpassen.
Fehler beim Speichern
Ihre Daten konnten nicht gespeichert werden. Bitte versuchen Sie es erneut.
Navigation Component
Accessibility Framework
Every component in the design system was built with a comprehensive accessibility annotation layer - instructions embedded directly in Figma that told developers exactly how to implement each element correctly without needing to interpret design intent.
Annotation System
Component: Primary Button - Accessibility Spec
Colour contrast: White (#FFFFFF) on brand blue (#003882) = 10.2:1 - exceeds WCAG AA minimum of 4.5:1 for normal text and 3:1 for large text.
Role: Native <button> element. When disabled, use disabled attribute + aria-disabled="true". Never use <div> or <a> for interactive buttons.
Keyboard: Focusable via Tab. Activated by Enter and Space. Focus indicator must be 3px blue ring - never remove outline.
Screen reader: Button text must be descriptive. Use aria-label for icon-only buttons. Loading state: aria-busy="true" + visually hidden "Lädt...".
Testing Protocol
- Automated testing with axe-core integrated into Storybook - zero violations required before merge
- Manual keyboard navigation testing - full tab order coverage on every component variant
- Screen reader testing with NVDA (Windows) and VoiceOver (macOS/iOS) per release cycle
- Colour contrast validation for all text/background combinations using Figma plugins and browser tools
- High-contrast mode testing (Windows HCM) for all interactive components
- Touch target minimum enforcement - 44×44px per WCAG 2.5.5
Outcomes
- Delivered a WCAG 2.1 AA-compliant component library adopted across multiple product teams at enterprise scale
- Significantly reduced accessibility-related QA cycles through pre-validated, fully documented components
- Led cross-functional alignment across 5 tools (Figma → Axure → Storybook → Confluence → VS Code) - bridging design, engineering, and QA teams
- Ran structured knowledge transfer sessions that embedded accessibility standards into the team's day-to-day workflow
- Presented design quality standards and audit findings directly to Capgemini and client-side stakeholders
- Accessibility documentation and annotation templates I created were adopted as standards across the wider Capgemini design practice
Due to privacy and confidentiality policies, original design assets, screens, and client materials cannot be shared publicly. All visual elements shown in this case study are faithful recreations, not the original production designs.