Citigroup
A unified design token system and WCAG-compliant dashboard suite for 10M+ banking customers — built across 6 legacy frontend stacks and 3 Citi sub-brands.
Six stacks, four palettes, zero shared tokens.
Citigroup's retail banking platform had grown through acquisition — a patchwork of 6 different frontend stacks, 4 color palette families, and no shared design token system. Compliance teams flagged accessibility gaps across 14 dashboard screens that handled onboarding for new account holders.
The mandate: unify the dashboard design language under a single token system, achieve WCAG 2.1 AA compliance across all onboarding flows, and prototype an AI-assisted document transparency layer for the blockchain pilot.
Citi Risk Management Dashboard
Representative recreation. All sensitive data replaced with synthetic values. NDA compliant.
↑ Synthesized recreation — all metrics, transaction IDs, and account fragments are illustrative.
A 4-tier token taxonomy at enterprise scale.
- —Token Taxonomy: 4-tier system — brand, semantic, component, and density — supports both compact (desktop teller) and comfortable (mobile consumer) display densities from one token set.
- —Governance: Token audit trail baked into CI — any token change generates a visual diff report reviewed by both design and compliance.
- —Multi-Brand Support: Token system extended to 3 sub-brands (Citi Private Bank, Citi Business, Citi Retail) with brand-specific overrides at the brand-token tier.
22 chart components. Zero color-only encoding.
Designed a suite of 22 chart components for financial data (portfolio performance, transaction history, balance trends, loan amortization) with WCAG-compliant color palettes that distinguish 7 data series without relying solely on hue.
Each chart component was built with a pattern + color dual-encoding system, screen reader data tables as hidden accessible siblings, and keyboard navigation for individual data points.
Tracing every transaction to its origin.
Designed and prototyped a blockchain transaction audit UI for Citi's internal transparency pilot — allowing compliance officers to trace a transaction's full ledger history in a timeline visualization. Integrated with Azure AI Search for document intelligence queries against transaction records.
From audit chaos to unified system.
Discovery Audit
Audited 6 frontend stacks across Citi's retail platform. Documented 47 design inconsistencies, 14 WCAG violations, and 4 conflicting color systems across acquisition-era codebases.
Token Architecture
Designed the 4-tier taxonomy in Figma. Established naming conventions, density scales, and multi-brand override patterns for Citi Private Bank, Citi Business, and Citi Retail.
Component Engineering
Built 22 chart components + 60+ UI components in React/TypeScript. Pattern+color dual-encoding on every visualization for color-blind accessibility. Screen reader data tables as hidden siblings.
AI Integration & QA
Integrated OpenAI + Azure AI for automated accessibility regression detection. 94% of violations caught pre-QA. Pipeline runs on every PR — zero regressions reached production in final 6 months.
Measurable impact at enterprise scale.
22 min → 4.5 min account opening. Measured via Contentsquare session analytics.
14 screens audited to WCAG 2.1 AA. Zero violations at final compliance audit.
OpenAI + Azure AI QA pipeline. Every accessibility regression caught pre-review.
Token system adopted across 3 Citi sub-brands. Brand consistency now automated in CI pipeline.
What Citi taught me about designing at scale.
Systems over screens
At 10M+ users, individual screen decisions matter less than the architecture underneath. One token change ripples through 300+ components — the same principle that governs Meta's design system.
AI as a design multiplier
Integrating OpenAI into the QA pipeline wasn't experimental — it caught real production regressions at 94% accuracy. AI augments design quality at a scale no human QA team can match alone.
Accessibility is architectural
The 14 WCAG violations weren't individual mistakes — they were systemic failures from disconnected stacks. The fix was architectural, not cosmetic. Meta's billions of users demand exactly this level of systems thinking.
NDA Protected Work
This case study presents representative recreations and synthetic data only. All actual Citi customer data, proprietary system architecture, and internal tooling details have been omitted per confidentiality agreement. The design decisions, outcomes, and process described are accurate to the work performed.
See the full process deck.
Detailed component specs, token documentation, and accessibility audit reports available for Meta design leadership review.