Dave Sherrod
UX/UI Design Leader

Cards Management

Improving the credit/debit card management experience within the First Tech Federal Credit Union mobile application.

Project Profile

Sprint Conclusion: Feb 2020

My Role: Research and Product Design Direction

Contributing: 1 Information Architect, 2 Front-end Designers, 1 Researcher

Platform: Mobile iOS, Android

The Challenge

An approximate average of 40,000 members/users relied on the First Tech Federal Credit Union mobile app to manage and control their debit and credit cards. Salesforce Call Center data informed us that card management-related inquiries and troubleshooting requests made up the third highest volume of call types, behind password reset and balance inquiry. Travel notification-themed calls alone (part of the card-management functionality) totaled 6813 from the prior month's monthly call volume, costing First Tech about $75,000.  The challenge was to improve the card-management widget experience within the app so as to better facilitate member's self-service task completion rates, reduce member stress, and mitigate the need for members to call in for assistance.

Our Focus

We set out to simplify and improve the card management ui and overall experience for the following items:

  • Dashboard

  • Access Point Navigation

  • Set Travel Notification

  • Lock/Unlock Card

  • Activate (New) Card

  • Balance Transfers

Discovery & Understanding

"...We're gonna' have to earn it."

Clint Eastwood from The Good, The Bad, and The Ugly (1966)

Gaining a Baseline Understanding

I wanted to orient my team by gaining a baseline understanding of the card management ui in it's existing form. We set out to identify and understand pain points and ui obstacles that prevented or hindered members from completing related tasks. Having a firm grasp of usability issues pertaining to our existing card management user interface would provide us specific points of reference and a baseline from which to improve.

Usability Testing Goals

  • Identify usability issues within the existing card management ui

  • Possibly ascertain member UI understanding based on click paths

  • Establish a baseline for future redesign comparison

Mobile Card Management

Testing Approach

Time was short, so we opted for quantitative, unmoderated usability testing via UserZoom. We presented participants with click-through prototypes and guiding test scripts and assessed task completion success rates related to the tasks/featured we wanted to examine.

Features Tested

We measured completion success rates for:

  • card lock/unlock

  • activate new card

  • replace card

  • access rewards

  • create/delete travel notifications

  • make balance transfer

Our Participants

Participants were 50 credit and/or debit card holding First Tech members. 42 of 50 had managed their cards in the First Tech app before. We gathered our some of our participants via "a participate in our study" link (app and firsttech.com) while others were provided by our Experience Center partners.

Success vs. Non-Success RatesWithin UserZoom we presented participants click-through mobile prototypes and accompanying demo scripts instructing (without leading) members to navigate to and attempt to complete each card management task. Analyzing results, non-successes and associated ui obstacles ranged from severe to concerning.

Success vs. Non-Success Rates

Within UserZoom we presented participants click-through mobile prototypes and accompanying demo scripts instructing (without leading) members to navigate to and attempt to complete each card management task. Analyzing results, non-successes and associated ui obstacles ranged from severe to concerning.

Usability Testing Findings

Over 40% of participant users were unable to complete tasks, "Navigate to and Make Balance Transfer" and "Navigate to and Delete Travel Notification".

Over 25% of participant users were unable to complete tasks, "Find Manage Cards", "Navigate to and Set Travel Notification", and "Navigate to and Replace Card".

A concerning percentage of participant users were unable to complete tasks, "Navigate to and Activate New Credit Cards", "Navigate to and Lock Credit Card", and "Navigate to and Unlock Credit Card".

Pain-Points

From our usability testing and contact center complaints we found commonality related to task completion success rates.

  • Lack of understanding regarding the distinction of balance transfers versus ACH transfers.

  • Misaligned or ill-placed ui elements in forms caused a low success rate in forms related tasks.

  • Difficulty reviewing and deleting upcoming travel notifications.

  • Too much scrolling to access and utilize some functionality.

  • Confusion between Manage Cards widget and Account Details page

  • Uncertainty pertaining to navigation to and within Card Rewards.

First Tech Personas: retirees, families, and tech-savvy, work force-aged.

First Tech Personas: retirees, families, and tech-savvy, work force-aged.

Personas

To complement our usability testing findings we relied on personas to further guide our design decisions.

We derived our personas by the following means:

• I brought the team for a visit to our Call Center in Sacramento, CA where we listened in on live, card management-related member calls. This helped attendees gain an appreciation and empathetic understanding of the pain-points associated with some of the ui issues we sought to improve.

• We ran unmoderated user testing in UserZoom to get a baseline understanding of some of the common ui obstacles members stumbled upon within our existing card management ui. We sought to find relationships between member demographics and the nature and frequency of the types of obstacles members encountered. This helped find significance in recurrence and enhance the effectiveness our personas.

• We partnered with our Marketing and Experience Center Org to review and see if/where we could leverage existing First Tech personas. These had been derived from interviews with 60 members from First Tech Experience Centers during which they were asked about their general banking habits and preferred means of interaction (branches, phone, chat, and/or app). A subset of this data pertained to our current focus, cards and card management. This interdepartmental sharing of data gave helped us derive more card-centric personas.

Some of the competing mobile apps we included in our competitive analysis.We assessed best ui and flow design approaches among them, noting possible enhancement recommendation to the First Tech app.

Some of the competing mobile apps we included in our competitive analysis.

We assessed best ui and flow design approaches among them, noting possible enhancement recommendation to the First Tech app.

Competitive Analysis

We wanted now wanted to glean design approach guidance from an industry standards standpoint. While conducting user testing sessions and fine tuning our First Tech card-holding member personas, we also reviewed some competing apps with card management functionality.

Considering the apps we would review, we felt Credit Union apps were not the best models to derive best-of design/ux approach. Because of this, and the fact that most First Tech customers with outside financial institutions did not bank with other Credit Unions, we opted to analyze some of the more ux-evolved Banking apps. Between my team and I, we luckily had a number of working, debit/credit card-linked accounts that were accessible within some of these banking apps.

We reviewed mobile banking apps from Chase, Wells Fargo, Ally, and a few others analyzing card management features, ease of navigation to/within each feature, and the usability of these features.

Competitive Analysis Results & Recommendation

Through our analysis we gained a lot of card management insight including:

  • Prior to new card activation, grey out all visually competing options except "Activate Card" and "Report Card as Lost or Stolen". As prioritized functionality, these options should be relocated to high visibility areas (ref. Bank of America Activate among others located these items at the top)

  • Provide multiple access points to main card management features (ie. through the Card Management Menu, as well as via the associated card’s "Activate Cards" and "Lock/Unlock Card" functionality.

  • Allow easier card activation based on CVC + last 4 digits or by card scanning (ie Amex required typing the entire card number)

  • Reduce volume of and visually simplify cards management details to help members discern regular card management details from general account pages (ie. don't muddle functionality such as card transactions within the card management dashboard)

  • Elevate Travel Notification functionality by create a dedicated dashboard. Include no notifications state (guiding members to create one) and a notifications set state which allows easy modification or deletion (ref: Chase and Wells Fargo Travel Notification)

  • On "Locking/Reporting a Card", show card dependencies that may be affected by the action (Samsung Pay does this well for instance, connecting recurring payment to Spotify) (ref: Wells Fargo Control Tower)

  • Elevate the "Card Rewards" experience via dedicated dashboard including reward debits/credits, benefits, and offers (ref: Chase Rewards)

  • On "New Card Activation", allow members to customize their PIN (ref: Capital One Activate)

Design Planning & Execution

"...and now, we express ourselves."

Dancing meme of an ironically non-expressive woman (circa 1981)

Expressing Our Understanding

From our own usability testing and shared interdepartmental data and member sentiment, we had measured card management-related task completion rates and identified member pain-points. Through our competitive analysis, we also gained an overview of the good, bad, and ugly industry standard approaches of how to banking/card management is facilitated in many apps.

Now it was time to express this collective understanding during the product design stage.

We would now map out user flows for all card management functionality, then produce wire frames that could be turned into prototypes for future rounds of usability testing.

Mapping Our User Flows

We created user flow maps to represent improved member navigational paths through each card-management functionality set in the First Tech app. These served as useful models for my team to help us maintain a macro-view of our product, while making it easier for us to identify strategic ROI junctures and pages within each flow (I had made the decision to save time by only wire-framing key screens rather than every page, page state, etc. More on this later :) .

Our flow charts also helped us socialize and communicate our design intentions with our internal partners, better equipping us to point out and explain differences between our new, improved flows and existing ui flows. Our Product, Engineering, and even Executive partners relied on these significantly as reference and opportunity to suggest crucial modification suggestions per each of their unique agendas.

Sample user flows like this one for Travel Notification (The Happy Path), helped my team envision end-to-end user paths, while helping us communicate and collaborate with our internal partner.

Sample user flows like this one for Travel Notification (The Happy Path), helped my team envision end-to-end user paths, while helping us communicate and collaborate with our internal partner.

Wireframes

Referencing our card-management user flow diagrams we used Sketch to create mostly low-fidelity wireframes. We opted for lower-fidelity wires because of their lesser impact our overall production time. Also, the inevitable modification requests (coming both from my team and/or our internal partners) were able to be applied much faster.

High Fidelity Step-Ups

After low fidelity wire-framing and working through revisions, we began transforming many of our wires into high fidelity comps. We tackled high-ROI pages first, meaning those pages that had new pattern setting precedent, new or unique detail, or those that required elevated attention per internal partner request. Our full-color comps helped internal partners better envision requirement fulfillment (e.g. Legal compliance, ADA compliance (up to WCAG 2.0), and branding) and helped us facilitate ui variation in our A/B testing and prototyping.

In addition to making x/ui improvements and attempted remedy of specific pain points, we also updated these screens to align with recent changes made to our design system. This included changes to our font hierarchy, color palette, and to a lesser extent, pattern updates.

The access to and nature of card details was an important consideration warranting exploration.

A/B Testing Interaction Design

Amongst the feedback we received from members during our initial usability testing rounds was that we needed to improve the way we facilitated credit/debit card details after card selection. Not only did card details type and volume have an impact on the cognition and mental processing of that content, but the the way those details were and accessed and displayed also had an effect. This warranted exploration.

During our full-color comping, we created interaction vignettes in Figma. We A/B tested some of these internally and with some of our members to gauge preference.

One such exploration of card detail access, "Interaction A" featured in this video capture, was rated the more favorable.

The approach featured in "Interaction B" was rated less favorable. The slide down/up reveal behavior and trigger was not always discernible by members amongst the card details themselves (I believed this was a significant realization from a general mobile UI pattern standpoint as well). The element hierarchy was a little off in this approach as well. A not-so-important large credit/debit card image was taking valuable screen real estate away from very important card details.

Solutions to the Major User Painpoints

Through initial rounds of user testing, Call Center-gathered member feedback, and analytics, my team was able to identify and prioritize pain points. This provided my team guidance regarding what to modify and improve. 

The following are before and after screen shots illustrating our design solutions for pain point remedy.

Mobile Card Management

Pain point #1

"Too much scrolling"

Solution: reduce and/or relocate unnecessary content while providing better hierarchy per sequential task.

We reduced and sequentially moved non-necessary content to after card selection while also revising our card-selection pattern itself. Our solution allowed users a swiping action, carousel-style, to see all the cards they hold. This was a relatively common approach used by popular apps in similar contexts. This solution improved findability while providing better hierarchy and emphasis per sequential step.

Mobile Card Management

Pain point #2

"How do I...?"

Solution: Improve ui self-evidence to enhance member understanding while reducing Contact Center call volume.

Upcoming travel notifications were difficult to manage, edit, create, and delete. As a result, our Call Center had been receiving many calls seeking app-related "how do I?" instruction, or direct help from call center relationship managers to manage their travel notifications.

We simplified our ui to make each of these actions more easily findable and self-evident in the app. We made checking notification status and other task execution steps more recognizable and easier and felt fairly confident this would result in improved member understanding while alleviating unnecessary related call volume.

Mobile Card Management

Pain point #3

"I can't find my card rewards?"

Solution: Improve visability and contextual viability of member card rewards.

Rewards had been "buried" in a top navigation tab that many members didn't notice. We discarded that tab and relocated Rewards access to our "Manage Cards" dashboard. We also included a meaningful icon (a little trophy) next to the Rewards access link and revised the associated link language to be more informational (e.g. "you have X reward points"), and more proactive ("Redeem Now").

Better placement of the Rewards CTA also helped members associate "Rewards" with the card they already selected (as opposed to thinking on rewards click, they would be dropped into a general Rewards area that may or may not be associated with their selected card).

Design Validation

"It's all on the wheel, it all comes around."

Barry Bostwick from the (not so) classic film, Megaforce (1982)

The Fruits of Our Labor

We responded to our collective task and ui-based member feedback, expressing "pain point remedy" through informed low to high fidelity artifacts.

Now it was time to test our new solutions in the wild. Given our heavy lifting throughout our discovery and design stages, we felt relatively confident we would show improvement during subsequent validation efforts. I didn't anticipate many surprises during our final phase of user testing, but we wanted to see if there was room for improvement. We also wanted to use the opportunity to analyze some yet-to-be-addressed neighboring card management functionality.

Mobile Card Management

Validating Our Design

We created/assembled interactive prototypes in InVision and tested the design member participants.

Testing Details

  • ​Conducted between Oct 22 – Nov 5, 2019

  • We had a total of 162 participants through the 3 usability tests and ran and obtained 15 audio and 94 screen recordings in UserZoom.

  • We tested lock/unlock, activate card, replace card, access rewards, create new, edit, and delete existing travel notifications, and balance transference.

  • Within our 3 tests remote tests, we had participants perform a series of tasks and answer questions related to each of the features we tested.

User Testing Member Participant Demographics

User Testing Member Participant Demographics

User Testing Participants

  • Our 162 user testing participants were arranged through UserZoom and selected to roughly aligned with our demographic-representing personas.

  • We targeted mostly members who had used or attempted to use card management features in the First Tech app.

  • Participant age ranged from 18 to 55 with the largest age bracket being 18-34.

  • Our male/female distribution was weighted more heavily to female participants as females in general showed more enthusiasm for participation.

Further Measurement & Validation

Our executives were comfortable relying in part on the Net Promoter Scoring system to measure and illustrate success and encouraged my team to apply the same measurement to our improvement proposals and output.

Our proposed design resulted in earned a NPS of +74, while our existing design earned an NPS of +54.

Both are relatively good NPS ratings, though our the proposed design performed better with a 20 point gain. This was not surprising given the existing designs are the net result of intentional improvements from the prior designs.

Travel Notification screen flow overview provided along with strategic links to design system documentation helped our devs code with specific reference.

Travel Notification screen flow overview provided along with strategic links to design system documentation helped our devs code with specific reference.

Final Designs & Dev Hand-Off

To complement the ui documentation provided by our First Tech component/pattern design system, we created flow overview charts for each card management component. We assembled our end-to-end screen flows in Sketch and exported PDFs to share with our Dev partners along with links to Zeplin (where our design system was hosted).

The flow which included accessing, editing, creating new, and deleting existing Travel Notifications is one such example.

What We Learned

The project had many challenges, a large number of which pertained to unforeseen API gaps. Despite continual communication with our Engineering partners, we learned late in our process that some of our proposed solutions in some cases couldn't not be built in the way we had envisioned. In other cases the API end points were not available at all. We overcame through more collaborative detailed feasibility meetings, however the discoveries resulted in lost time.

On the positive, our efforts did result in quantitive and qualitative improvement from the existing card management related ui. We were also better prepared in terms of timeline for our next phase of improvements while our Engineering team and executive sponsors worked to make API endpoint avaiilable.

Next, we set off to next tackle:

  • Show the card dependencies that are affected by the action of locking and/or reporting a card missing or stolen.

  • Enhance the Rewards redemption experience.

  • Allow members to make their Custom PIN on activation.