Hero image showing desktop and mobile versions of the onboarding experience
Hero image showing desktop and mobile versions of the onboarding experience

USAA Credit Card Application

PROJECT OVERVIEW

This effort seeks to streamline and modernize how members apply for credit cards at USAA.

ROLE: UX/UI DESIGN, USER VALIDATION

As lead designer on this project my responsibilities included collaboration with a third-party, stakeholder management, ideation, concept creation, hi-fidelity design, user validation and supporting our development team upon handoff.

PROBLEM STATEMENT

At USAA, the existing credit card application is built in an older design system which is not only outdated, but uses an older technology which is less efficient. As an effort to increase credit card users, our business partners called on the design team to simplify the application and update it to our current design system.

GOALS

  • Update the application to the modern design language.

  • Build off of existing application experiences to create a consistent "One USAA" for members.

  • Reduce unnecessary copy and inputs to give members less work.

  • Integrate innovations introduced by third-party effort.

THIRD-PARTY EFFORTS

This project was kickstarted as a result of a third-party collaboration that stakeholders began early in 2023. Those partners asked an outside agency to redesign the USAA application without consulting the USAA design teams until the design was essentially completed. As a result, my team had to join the effort with an existing timeline and an experience that didn't follow our design system guidelines.

Unfortunately, our key stakeholders were in love with this design and we had to try to integrate the feel of this work using design USAA components.

Screenshot of third-party designed application
Screenshot of third-party designed application
Screenshot of third-party designed application

ITERATIONS

Discussing back and forth with our business partners, we iterated multiple times in order to come up with a design that both fulfilled the innovative vision that our third-party partner produced and stayed true to the identity that USAA design strives to display.

Because of accessibility and quality restraints, we weren't able to implement the accordion functionality of the third-party's version of the application. Still we managed to reduced the content greatly by removing unnecessary help text or consolidating redundant inputs.

Screenshot of figma workspace showing application iterations
Screenshot of figma workspace showing application iterations
Screenshot of figma workspace showing application iterations

COMING TO A CONSENSUS

Ultimately, we landed on a version that fit the whole application on one page which was a remarkable improvement given that the legacy application had 6 pages. We took this back to our partners, and while it wasn't the experience they saw from the third-party, they were excited by the work.

We worked to modernize the rest of the application experience including card design and decisioning pages. Following this, we began the design review.

DESIGN REVIEW

With all member-facing experiences, every design is required to go through an extensive foundation review. During this process, the design is assessed on several aspects including the following: Content, Legal Compliance, Design Compliance, Information Architecture and Accessibility. This rigorous process ensures that the experience is ready for member use and aligns to the USAA brand.

Over the course of up to a week, I worked with our QA team to resolve any questions or defects that may have come up in their review. The review for this experience took some more time because we had several components that were slightly altered from the design system in order to provide a more future-proof feel.

Screen shot of A11y markup of card application experience
Screen shot of A11y markup of card application experience
Screen shot of A11y markup of card application experience

FINALIZE + DELIVER

Following foundation review and approval, we were able to quickly hand off the designs to our development partners by directly giving them access to the Figma file. We took advantage of "dev mode" and the "inspect" tab to make the transition easier.

While the experience was in development, we continued to have regular meetings with both the dev teams and the design QA team to make sure that any questions or concerns were quickly handled. When tackling these issues, it was important to keep all lines of communication open.

The application is launched as of February 2024 and already showing a marked improvement over the legacy version.

Screenshot of dev mode view in Figma
Screenshot of dev mode view in Figma
Screenshot of dev mode view in Figma

RESULTS

  • Significant reduction in total content of application, from 457 to 142 words.

  • Reduced the number of clicks by removing inputs and multiple pages by consolidating to one page.

  • Provided members with a modernized experience that integrated several ideas from a third-party vendor.

  • Delivered a developer-friendly experience by incorporating dev feedback throughout the design process.