USAA Credit Card Onboarding
PROJECT OVERVIEW
The Credit Card Onboarding experience looks to bring card services to the member as soon as they are approved for their new credit card.
ROLE: UX/UI DESIGN, USER VALIDATION
As lead designer on this project my responsibilities included ideation, concept creation, hi-fidelity design, user validation and supporting our development team upon handoff.
PROBLEM STATEMENT
At USAA, credit card users aren't introduced to available services unless they seek out those services themselves. In order to provide members with access to more features, the onboarding experience surfaces common card actions as soon as the member completes their card application.
This not only provides members with a more complete credit card experience, but also creates more card spend, resulting in greater profit.
GOALS
Give members immediate access to a wide range of existing services.
Build off of existing experiences to create a consistent "One USAA" for members.
Surface services like adding authorized users, adding card to a digital wallet, starting a balance transfer and more in order to increase user spend.
Design and handoff an experience on a tight timeline.
PREVIOUS EFFORTS
When starting this project, we had an existing experience to use as reference. Our sister team, the deposits and checking team, had built a similar experience for their members. Unfortunately, this was built as a one-off experience and not consistent with any existing services.
This original design was also built in our legacy design system. We could have copied the design and code, but building for a future consistency was a greater priority for our business and dev partners. It was an easy decision to build the onboarding experience in our newer design language as this would be more flexible to develop and manage.
EXPLORATIONS
After determining business needs and requirements, we started exploring design options alongside our dev team. Within the updated design system, there weren't a lot of options that passed reviews.
The two versions on the right were built using a drilldown menu and an accordion, respectively. While these were attractive due to their interactivity, they were rejected by our design guidance team because they were not accessible nor being used according to our standards.
SKETCH + TEST
Ultimately, we landed with a version that utilized customizable card components. While these were not as interactive as the above options, they checked a couple boxes in terms of visual interest and quick development time. Another benefit of this flow was the ability to present different states: Available, Coming Soon, and Completed. This provides a sense of completion for the member.
After agreeing with this minimum viable experience (MVE) design, we put the experience through an unmoderated click test for user validation. The onboarding flow was received well by the 14 participants and we had several takeaways:
Keep everything in the same place
While these services currently exist in both the current app and website, members have no way to see them all in one place. All 14 participants felt this experience provides a clean and simple location for them.
The list was comprehensive
14/14 participants weren't expecting any additional tasks to be present on the list.
Participants enjoyed the experience
14/14 participants rated the experience 8 or higher (on a scale of 1-10).
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. After coming to a consensus, we were able to move on towards the next step of the design process.
FINALIZE + DELIVER
After seeing the result from user validation, our business partners were even more confident with the designed solution. We began the process of handoff to our development team, utilizing Invision's inspect tool.
With the experience still in development, we've had weekly syncs to address any UI questions and to provide dev support where needed. One issue that came up is that not all tasks will be available for members on the first day. We collaborated and designed a second card type that shows a countdown for when the task becomes available.
We've had to pivot several times as a result of back-end issues and it's been a fully collaborative process with the dev team to do so. While the MVE product isn't perfect, we're planning further iterations to get it there.
RESULTS
Significant increase in spend by surfacing mobile wallet and authorized user from card approval.
Provided members with a full list of available services for their credit card in a single location.
Delivered a developer-friendly experience by incorporating dev feedback throughout the design process.