Overview
The Bundesagentur für Arbeit (Federal Employment Agency) is one of the largest public digital services in Europe - a multi-persona regulated workflow used daily by citizens, case workers, internal admins, and compliance teams. Via Capgemini, I led accessibility-first design system development during a complex, multi-team transition where every component had to ship audit-ready.
"User-friendly" in this context wasn't about a polished surface - it was about a case worker getting through a 40-step intake flow without losing context, and a screen-reader user reaching the same outcome through the same component. I owned design quality from Discovery to production sign-off, coordinating with POs, legal compliance teams, frontend engineers, and QA. I facilitated stakeholder workshops to align on component standards, presented recommendations to enterprise decision-makers, and ran knowledge transfer sessions for both design and development teams. The accessibility annotation templates and documented workflows I built were later adopted as a standard across the wider Capgemini design practice - work that outlasted the engagement and travelled across other client teams.
WCAG
2.1/2.2 AA - all components
5+
Tools unified
2
Token targets: Compose & SwiftUI
40+
Core components
Discovery & multi-persona research
The platform serves five distinct user populations with entirely different mental models, technical contexts, and regulatory exposures. No design framework could hold across all five unless Discovery surfaced what each population actually does in a given week - not what their role title suggests they do. The persona who owns the binding workflow decision was rarely the most visible one; case workers in particular shaped more component decisions than any other group, because their daily friction was where the system either earned trust or lost it.
Personas served
- Citizens - accessing employment support, benefits, job listings, and training programs
- Case workers - daily operational tool, where most product friction surfaces in practice
- Internal admins - system configuration and policy maintenance
- Compliance & legal teams - audit, regulatory oversight, sign-off authority
- Developers and POs - multi-squad delivery teams consuming the design system
Discovery methods I ran
AI-augmented practice on this engagement
Interview synthesis and policy-document review accelerated with Claude and ChatGPT - themes that previously took days to surface from raw transcripts now land in hours, leaving more time for second-round validation with stakeholders. Perplexity for cross-referencing regulatory framework updates against component decisions. Stakeholder decks and review docs drafted with Gamma and Claude. AI accelerates the synthesis loop; the judgment, the persona-to-workflow translation, and the sign-off conversations stay human.
Process
Four phases mapped onto the agile delivery cycle, structured so that no component shipped without three audit trails: a research rationale, an accessibility annotation, and a stakeholder sign-off. Each phase ended at a checkpoint where decisions were documented and presented before the next phase opened - slower upfront, faster across the lifecycle because rework after handoff is the expensive kind.
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 handoff workflow connected Figma (source of truth) through Axure prototypes, Storybook docs, Jira tickets, and Confluence specs - every team in their tool of choice, referencing the same component standards.
Design Tokens
Tokens form the foundation of the system - colour, typography, spacing, elevation - defined in Figma variables and mapped directly to code for engineering: CSS/JSON for the web layer, Jetpack Compose for Android, and SwiftUI for iOS. One source of truth across all three platforms.
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
Built accessibility-first. Every component documents keyboard interactions, ARIA attributes, focus rules, and contrast ratios. Selected components below.
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 carries an accessibility annotation layer inside Figma - contrast ratios, ARIA roles, keyboard behaviour, screen-reader expectations, focus rules. A developer building the component doesn't have to interpret design intent or hunt for the right WCAG clause; the spec is on the canvas next to the variant.
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
- Reduced accessibility-related QA cycles through pre-validated, fully documented components
- Knowledge transfer sessions embedded accessibility standards into the team's day-to-day workflow
- Audit findings and design quality standards presented directly to Capgemini and client-side stakeholders
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.