Design Systems

USAA • Lead Designer • 2016–2024

  • Led original design effort that secured funding for technology modernization.
  • Created target-state designs that served as drivers for component-level execution.
  • Led qualitative research for design system.
  • Led design work for templates.
  • Wrote guidance for user experience and interaction design techniques.
  • Provided training and support to design teams.
  • USAA Reveille Design System supports React, AEM, iOS, and Android.
  • Design tooling delivered via Figma libraries.
  • Responsive design and WCAG accessibility built-in.
  • Custom information architecture management solution built in React using design system components.
  • Powering a growing number of internal- and member-facing apps, including relaunched iOS and Android apps.
Design system components being extrapolated from target-state desktop and mobile designs.

USAA was at risk of losing its competitive edge. Our web technology frameworks—used to power member service for banking, insurance, and investing—were outdated and difficult to manage.

To help secure funding for modernization, IT leadership asked for a design vision of the road ahead.

They called it a moonshot and I volunteered to lead the design effort.

Rocket launching from earth’s surface and toward the moon.

I initially focused on wireframing and collaborating with a small team of front-end engineers to prototype a new approach to member service on the web. We needed enough design specificity to keep the team moving forward, while maintaining a tight loop for discussion and on-the-fly adjustments.

To ensure progress in a limited timeframe, I leveraged existing research while also reimagining strategic design explorations that blended personalized experiences with app-like web interactions.

Our design goals included responsive and touch-friendly interfaces, accessibility built-in from the beginning, an integrated sales-service lifecycle, chat-style interfaces, and fast and convenient member service.

Two columns: Under the label “legacy,” we see a variety of fixed-width web applications, each connected to its own, siloed data sources and frameworks. Under the label “target-state,” we see a single-page web application running in both desktop and mobile sizes, with a shared, cloud-based set of data services.

Within a matter of weeks, we delivered functional prototypes. These were demoed to USAA leadership, and program funding was secured.

With that, our moonshot had gotten off the ground—a sweeping new range of technologies were green-lit for implementation.

This effort established the groundwork for major improvements across USAA digital services, including future design systems, a complete overhaul of the digital information architecture, and a new portal for member service.

Scaling to a Design System

With platform modernization underway, we had an opportunity to reimagine digital service to USAA members—with the goals of improving both member satisfaction and business performance.

The scope of the challenge included:

  1. Four primary product lines, including banking, insurance, investing, and retirement.
  2. More than fifty unique products, each with its own suite of acquisition- and service-related features and applications.
  3. Two websites and two mobile apps, with very little design or navigational consistency between them.

With so many moving parts, we needed a design system to help accelerate the pace of change.

We also needed a way to help guide and inspire transformational change—across business, design, and engineering teams.

A row of screen designs (desktop and mobile sizes). Lines with arrows point away to smaller, component-level designs, representing a process of extrapolation.

Connecting Product Strategy to Design System Execution

While the team scaled up and the USAA design system was being built, it was my job to develop and refine a product design strategy, and to help bring that strategy to life. This included:

  1. Outlining the core strategy that would establish direction for the design system team. Our goals included moving to responsive and touch-friendly interfaces, integrating strong support for accessibility, and delivering an integrated sales-service lifecycle.
  2. Writing high-level user experience guidance, articulating how patterns of design and interaction were changing.
  3. Collaborating on the design and development of end-to-end demo apps, providing a strong feedback loop between system, strategy, and engineering.
  4. Conducting qualitative and quantitative research, providing research-backed rationale for change.
  5. Creating wireframes and conversion guides, helping teams understand how to map out their migrations.
  6. Designing templates and components, and partnering with front-end engineering to build them.
  7. Delivering design system training to hundreds of designers and developers.
Two design prototypes. One prototype is labeled “classic form” and the other is labeled “chat-style interface.” There is a “vs.” label between them.

Building a Research Foundation for Product Strategy

With this multi-year, large-scale strategic investment underway, it was important to establish a strong foundation in research. I contributed to a variety of test efforts, including usability, first-click studies, and quantitative A/B testing.

In one example of those research efforts, I helped lead an experimental qualitative-quantitative (qualquant) test.

The new design system offered chat-style interactivity. Our team formed a hypothesis that chat-based user interfaces would perform better than classic, form-style flows. To test our hypothesis, I worked to:

  1. Design end-to-end transactional applications, using both form- and chat-based components.
  2. Coordinate with front-end engineering as they coded prototypes.
  3. Conduct large recruitments (around 100 per prototype) for unmoderated usability studies.
  4. Analyze the video recordings of participants’ screens, logging success rates and time spent completing tasks.
  5. Build a statistical analysis of the results, including margin of error.
  6. Distill results into findings and recommendations for future studies.

The Future is Now

Today, the USAA design system is accelerating our modernization journey—helping teams build better solutions in less time.

Thanks to the system’s alignment with a target-state product strategy and information architecture, it’s also delivering significant business results.