Credit Card Storefront
A case study of the redesign of USAA’s credit card shopping experience.
USAA Credit Card Storefront
All aspects of user interviews, design research, synthesis, and user testing were done in close collaboration with our entire design team. My primary roles for this project were design thinking facilitation, sketching/concepting specific flows, prototyping, UI Design, UX Design, and primary point of contact through the development phase.
Problem + Business Need
The initial ask from the business on this project was to "Improve, humanize and soften the credit card decline and counter offer moment." If we delivered exactly what the business wanted, we would have done no more that redesign the page declining someone for a new credit card. By approaching this space more holistically, and understanding the human needs around the end to end card selection and application experience, we could create a system that could prevent credit card declines from happening at all. When this was communicated clearly to the business, they bought in. And our project to redesign the card shopping experience at USAA was born.
First we examined previously conducted research regarding USAA members and their banking behaviors. However, with no credit card-specific research available to us and we knew it was necessary to plan our research around first understanding USAA members as humans and to develop archetypes to capture our understanding of common behaviors and mindsets.
This was accomplished through interviewing several members and member-facing USAA employees, as well as Y-cording (sitting directly next to our service representatives and listening in to member calls), which gave us to the opportunity to listen to real-time MSR (member-service-representative) calls within the credit card department.
Our goal in this research enterprise was to create a deeply empathetic understanding of members, not through studying numerical outcomes, but by listening to our members tell real stories. It would be through documenting examples of real human, financial need that we could create recommendations for the business that weren’t guesses.
Design Thinking Project Workshop
With our strong understanding of the member in place, the next step was to share that empathy with our partners in order to come up with a direction and strategy that solves actual human problems. I facilitated a separate group of stakeholders through this workshop, focused on a persona I wrote to contextualize one of our research-identified archetypes.
Design Thinking Workshops in the early stages projects allow design to help the business solidify a specific direction and strategy for a new initiative that is focused on solving. Workshops have two goals:
The first is to socialize any research and help our business partners develop empathy for our users.
The second is to use that empathy to study the experience we’re trying to improve, and to use the problems we find there to generate new ideas as solutions.
With our research thus far, and their individual subject matter expertise, my participants were able to create a journey map of how our persona would actually experience shopping for, owning, and managing a card with USAA.
What else do we need to understand?
With a firmer understanding our business’ perspective and intentions, it was time for primary research. We wanted to understand our members’ perspectives and perceptions of cards, what misconceptions they had, and how well they understand our portfolio.
The Design Thinking workshop allowed us to form solid assumptions and also uncovered gaps in our research. We were about to identify those gaps early on and formulated new questions we could ask our members. Specifically we uncovered we needed to even better understand the behaviors, perceptions, and strategies of our members as they shop for a credit card.
We also did a competitive analysis to understand and critique the competition, but also to understand what our members are seeing and hearing from other issuers. What other inputs are forming their understanding of this market.
Synthesis + Insight Gathering
After 9 interviews with current and prospective USAA members and printing hundreds of raw quotes and observations we began clustering and making inferences. This was the foundation process for developing core insights about our members and learning how to design for them. The insights then allowed us to create a number value statements, or north star goals for the project that describe what we must go to build and how to measure success.
Next we shared our understanding of our member’s needs and we aligned around the different ways in which we wanted to meet those needs.
But how will we stay on target? What is going to keep us as designer and the business on the same page? Value statements. What are value statements? Value Statements act as the north star for the project– succinctly describing what we must go build and how we can measure success. We chose two of these value statements as our final project focus:
Value Statement 1: A prospective card holder needs to only have cards recommended/marketed to them that they can be approved for so that they are never declined.
Value Statement 2: A user exploring our credit cards needs a way to predict the impact that each of our cards will have when used in a realistic spending scenario so that they can determine which card will be most beneficial to them.
Ideation + Concept Exploration
At this point in the design process it made sense to diverge and use our value statements to sketch concepts for a new shopping flow. During this process we are assessing our work against the value statements constantly. Are we achieving what we agreed upon at the start of this project? Are we maintaining a focus on what we all agreed were the crucial problems for our members?
Concept: product recommendation tool
An area where I saw the most opportunity was the “Product Recommendation Tool.” The tool as-is was ineffective if used incorrectly. It resulted in a recommendation that was either for a card the user could be approved for due to credit score or a card that was not at all one the member would be interested in.
Immediately I saw some gaps in the As-Is flow:
Someone using this tool could move forward without entering a credit score, doing this meant amount of cards they could be approved for feel to only one.
There was no helpful information that would help someone who doesn’t know their credit score make an informed choice on what credit range they fell in.
The sliders for entering monthly spending were incredibly sensitive and there was no indication as to why they question was being asked.
Barley moving the slider the spending was in the thousands
The final recommendation screen wasn’t personalized as to why this card was recommended specifically for this member.
While doing our competitor analysis I saw one massive gap in USAA’s shopping experience— the ability to compare cards to one another. All of our competitors had that functionality, I saw the ability to do so as table-stakes. I took on the effort concepting out the ability to compare cards.
Concept Evaluation + User Testing
Next we recruited and tested low-fidelity concepts with members and prospective members to see which concept resonated the most and why.
We captured our observations and through the process of synthesis, made sense of our findings, and then updates the concepts to test again. These process would lead to a gradual refinement of our design.
In an iterative fashion, we evaluated the success of our prototypes through testing, making sense of the essential feedback from users, and use what we learned to make improvements— each cycle bringing forth a higher fidelity prototype.
In this process it became apart that one of the biggest issues was member’s could not differentiate the cards. The importance of the information and typography hierarchy on the specific cards containers became essential to the success of the project— if the member can’t differentiate the cards how would the be able to choose a card that’s right for them?
We added a “Value Prop” to give context to the benefits of the card. We tested variations of the other sections to better understand how much information was the "right: amount.
We took advantage of USAA’s usability lab to conduct usability tests with members, and asked participants to complete a series of tasks while verbalizing their thoughts. This type of testing is an essential part of the design process and provides us a way to dive deeper ensure that, as the concepts solidify and the fidelity increases, our designs are still meeting user needs. There is nothing quite like watching a member’s reaction as they interact with the prototype. Again, we collected this member feedback and continued to make refinements to the design.
Development + Pilot
At the end of usability testing we felt confident that we had delivered on our value statements and had achieved and MVP that would not only deliver member value but business value as well. Unfortunately we did not move directly into the development phase. The technology stack at USAA proved development would be difficult.
USAA is in a slow transition of moving everything to a more componentized way of development. Moving experiences from Wickett to React is a long and arduous process. The MVP that our team built, though it was a complete end to end experience we believed in, realistically could not be achieved. We were a bit naive to think that such a transformative effort could be accomplished to soon into the transformation of the technology stack.
After months of waiting, the stars aligned and we were paired with a development team and a tech lead who saw our vision and wanted to try and build a paired down version of our experience. The goal of the work was to:
Release the first Storefront experience using the new technology stack (And API + react driven experience)
Use a API driven content management system
Make the Storefront as lightweight as possible (the current storefront had slow load times)
Create a responsive design (there were two code bases, one for mobile and one for desktop)
My Creative Director let me take the reins in working with development to get whatever we could built and hopefully released. Initially I worked closely with the tech lead to create a roadmap for the work. We were able to create a prioritized roadmap of what work should happen when. I then worked closely with the development team in development of the prioritized work. I joined their sprint ceremonies and was in constant communication, and this enabled us to have open and honest conversation which is invaluable in the development phase.
Very soon into working with the team I realized just how tough development would be— but we all were ready for the challenge and excited to be solving problems as the arose. The team didn’t have a dedicated front-end-developer, so I iterated on the best way to work together. We went from redlining each page individually to using a sketch plug-in that would export the basic HTML and CSS for the developers.
The opportunity to work so closely with this development team was an experience I learned so much from. I was able to help inform best practices for our larger design team going forward for ways of working with development.
In the end we were able to accomplish all of the we set out to do. We release the first Storefront experience using the new technology stack (And API + react driven experience) at USAA, it was API driven using reusable react components, it was more lightweight and performant then the as-is Storefront and we delivered a fully responsive design to our members.
As it goes, business priorities change, development teams move on to more prioritized work and design needs change, so our work to complete our end to end experience came to a close. But it was still a huge win for design and the business.