Role & Scope
- Role: Lead UX Designer (system owner)
- Timeline: 18 months
- Partners: Design, Front‑end (Angular), Accessibility
- Surface area: 50+ products across web and mobile
The Problem
Fiserv’s existing design system lacked scalability, accessibility, and efficiency, risking user experience fragmentation across its flagship products. APEX wasn’t just an update—it was a comprehensive overhaul. As the Lead UX Designer on the initiative, I identified critical gaps and set a strategy to unify design standards, streamline workflows, and embed accessibility from the ground up.
Constraints
- Multiple legacy codebases and brand variants to reconcile.
- Regulatory accessibility requirements (WCAG 2.2 AA, Section 508).
- Distributed teams with competing roadmaps; limited migration windows.
Strategic Approach
- Scalability Benchmarked against IBM’s Carbon to ensure enterprise-grade adaptability, while tailoring APEX to Fiserv’s unique workflows.
- Accessibility Set WCAG 2.2 AA and Section 508 as baseline; built automated checks (contrast, focus, keyboard traps) into components and documentation to minimize legal risk and rework.
- Alignment & Adoption Synchronized Figma assets with Angular components and instituted versioned releases, a changelog, and a deprecation policy—creating seamless handoffs and reducing rework.
Process & Execution
Audit & Benchmark
Conducted a comprehensive audit of existing components, aligning APEX with industry best practices and refining components to meet evolving user needs.
Design System Implementation
Built a robust Figma library underpinned by design tokens (color, spacing, typography), with one‑to‑one mapping to Angular components for code‑ready implementation across teams.
Developer Integration
Published Storybook docs and an internal NPM package; added PR templates and usage guidelines so devs could adopt consistently with minimal friction.
Testing & Iteration
Established bi‑weekly audits for accessibility and spec adherence; added automated axe/contrast checks and keyboard‑only reviews to accelerate refinement cycles.
Impact & Results
- 15% Faster Development Reduced design-to-development cycle times by integrating reusable components and establishing a standardized design system.
- 80% Reduction in Design Inconsistencies Bi-weekly audits and ongoing developer training maintained alignment across 56 teams.
- 30% Increase in Accessibility Compliance WCAG AA standards became the default, not the exception.
- 20% Increase in System Adoption Within 18 months, APEX became the go-to design framework, positioning Fiserv as a leader in accessible, scalable design.
- Cycle time: median design‑to‑merge across 8 reference apps pre/post APEX.
- Inconsistency: quarterly UI audits across top 10 products vs. APEX specs.
- Accessibility: automated axe/contrast checks on core flows + manual keyboard reviews.
- Adoption: NPM package downloads + Figma library usage and release notes.
Success Snapshot
Products
0
Designers
0
Components
0
Styles
0
Variables
0
Weekly Inserts
0k
Reflection
APEX reinforced my belief in the power of scalable, data-driven design systems to transform enterprise UX. The experience honed my ability to bridge strategic vision with tactical execution, aligning cross-functional teams to achieve measurable business outcomes.
What I’d Do Differently
Earlier integration of training resources and documentation would have accelerated adoption, enabling teams to leverage APEX’s full potential sooner. Moving forward, I’d incorporate ongoing education as a core component of any system rollout.