Fiserv

DNA UX

Enterprise design system · WCAG AA by default · 381 institutions

How do you align design, engineering, and product across a platform serving 84M accounts? I led DNA UX from fragmented workflows to a unified, accessible system—cutting inconsistencies, accelerating cycles, and scaling standards across the enterprise.
Faster cycles 25%+ Fewer inconsistencies −80% AA by default Adoption 14+ products

Role & Scope

  • Role: Lead UX Designer (system owner)
  • Timeline: Multi‑release initiative
  • Partners: Design, Front‑end (Angular), Accessibility, Product
  • Surface area: 14+ products; 381 institutions; 84M accounts

The Problem

DNA UX powers over 6,000 branches and 84 million accounts, but fragmented workflows led to inconsistent user experiences, misaligned designs, and prolonged rollout times. Legacy processes restricted flexibility, impeding collaboration and scaling efforts across design, development, and business teams. These issues directly impacted time-to-market and platform consistency.

Strategic Approach

  • Scalability Codified a unified design language; created reusable, token‑driven components to ship updates consistently across 14+ products.
  • Accessibility Set WCAG 2.2 AA/Section 508 as baseline; embedded contrast, focus, and keyboard checks into components and docs.
  • Collaboration Synchronized Figma libraries with Angular components; instituted versioning, changelogs, and a deprecation policy to reduce rework.
  • Efficiency Streamlined handoffs via Figma‑to‑code mapping; reduced design friction and accelerated delivery.

The Process

Audit & Benchmarking

Ran a comprehensive audit of core flows; mapped variance by product and benchmarked against leading financial UX systems to define target standards.

Standardization & Accessibility

Co‑built a system of tokens and components with documented patterns; established AA contrast, focus order, and keyboard interaction rules.

Component Library Development

Published a Figma library mapped one‑to‑one with Angular components for code‑ready implementation and rapid prototyping.

Testing & Iteration

Ran iterative usability tests and a11y reviews (axe/contrast + keyboard‑only); refined components based on frontline feedback.

Adoption & Rollout

Delivered training, Storybook docs, and usage guidelines; drove adoption and consistency across 14+ products.

Outcomes and Impact

  • 25% Faster Design Cycles Streamlined workflows and component libraries reduced design-to-development times, accelerating feature rollouts.
  • 80% Reduction in Design Issues Standardized components minimized inconsistencies across the platform, reducing rework and support requests.
  • Higher User Satisfaction Usability testing validated workflow improvements, leading to faster adoption and fewer usability complaints from frontline employees. "Best-in-class" metric increased 146%.
  • Increased Scalability DNA UX became a blueprint for future products, extending the design system’s impact beyond the initial 14-product scope.
How we measured:
  • Cycle time: median design‑to‑merge across reference apps pre/post system rollout.
  • Inconsistency: quarterly UI audits vs. DNA UX specifications.
  • Accessibility: automated axe/contrast checks + manual keyboard reviews on core flows.
  • Adoption: component/library usage + training attendance.

Success Snapshot

Institutions

0

Supporting

$0B

Accounts

0M
Pre‑redesign DNA UX screen with fragmented layout Example of a screen before the reimagining
Reimagined accessible screen using standardized components Reenvisioned, accessible screens
Configurable layouts and components supporting varied workflows Extensive customization to support different workflows
AA‑compliant dark mode with correct contrast and focus states 100% accessible dark mode

Reflection

Transforming DNA UX emphasized the value of aligning cross-functional teams through consistent, scalable design. This project reinforced my approach to designing systems that are as intuitive for developers as they are for end-users, creating a lasting impact across enterprise ecosystems.

What I’d Do Differently

I would have introduced developer tooling earlier to bridge the gap between design and engineering, further accelerating implementation and reducing design handoff friction.