USAA Credit Card Experience
I redesigned the credit card experience using the “Reveille” design system in order make the pages more consistent with the rest of the USAA website. I knew I also wanted to include more lifestyle imagery within the credit card shopping experience to help members and prospects connect emotionally with the benefits specific cards offer. As well as implementing existing components from the Reveille design language system, I also created several new components used both for this experience as well as contributions for the system that other designers could use as well. I minimized the risk of introducing an entirely new experience by evaluating design decisions through user testing. As a result, the application start rates increased by .3% and application complete rates increased by .1% in comparison to the control (previous experience).
Thank you… for your tremendous support and leadership with RDS (Reveille Design System) and CDO (Chief Design Office) to help us design and build this new modernized storefront for our prospects and members.
Michael Baker, Digital Technical Product Manager, USAADESIGN PROCESS
I kicked off the project by understanding how we could better differentiate between individual cards. The individual cards and product pages looked almost identical to the point that it was difficult for users to make a decision. Understanding the value propositions of each product offering and examining existing internal data related to customer market segments helped guide me in incorporating lifestyle imagery to communicate how each card could improve a member’s life.
I lead multiple user tests with the goal of discovering what members want and need to know when shopping for a credit card and evaluate how useful the information provided is as well as the quality of the participants’ experience of identifying a card that meets their needs.
Analyzing the user testing data validated that the design was effective at guiding users to select the right card to meet their needs. I also captured a significant theme from the research and made actionable recommendations to improve the experience.
One challenge I had when implementing the design language system components was a lack of patterns that could incorporate the large amounts of copy that was legally mandated for the credit card application start points. I collaborated with a designer from the design system team to create new components that could incorporate both the content and images that were required to display each card. This kicked off several components that both met the needs of the credit card experience and paved a path for the credit card space to convert to AEM (Adobe Experience Manager) using all off-the-shelf assets in the future. This also served to provide other design teams with additional options that were able to accommodate their content needs as well.
Working collaboratively with cross-functional partners was key in successfully moving the credit card experience into a modernized design system. You can see in the image to the right that incorporating lifestyle imagery, both on the credit card main page and across product details pages was key in connecting emotionally with members and prospects.
Using and creating design language system components and patterns allowed for a fast development process, as code didn’t have to be created from scratch. Including five breakpoints for all components allowed them to be easily responsive without individual customization.
