Manage Cards

Managing credit or debit cards through mobile app

WHEN: 2019 - 2020
ROLE: Design Manager/Lead Designer
TEAM: Two Designers & One Researcher
PLATFORM: iOS

Challenge

In a month, 30,000 to 40,000 users control their credit card online using the "Manage Cards" widget. There are thousands of calls received in the contact center regarding the problems associated with the widget. 6813 monthly calls received in the contact center related to travel notification alone.

Solution

We redesigned the dashboard, access points to find mange card functions, travel notification, lock, unlock, activation, and balance transfer. We simplified the interface and made it more intuitive as well as user friendly.

Process To Derive The Solution

Following sections list all the steps I followed to derive the design

Goals

We identified the goals before starting the project are as follows:

Improve design, user flow and process flow.

Members can comprehensively self-serve their travel alerts, dispute transactions, etc.

Reduce number of phone calls to the contact center in bank’s branch

Review User Testing Results On Previous Design

Quantitative Usability Study

Conducted via UserZoom on 12.18.18

50 Total Participants

84% used card management online

Features Tested

Lock/unlock, Activate, Replace card, Access rewards, New/Delete Travel notification, Balance transfer

Usability Test Results

Users failed to complete balance transfer and travel notification tasks.

Persona

UX team took the help of the marketing and business unit to know the behavior of the users of the "Manage Cards" widget in the mobile app. We also interviewed 60 participants from different banks. They use "Manage Cards" widget and online banking at least once a week. On analyzing the data, we derived 3 groups of target users for this functionality.

Research, Findings & Insights

Competitive Analysis

The competitive analysis offers a way to interpret usability standing in reference to the competition. Our team performed a competitive analysis of 7 banks and the recommended features list.

Resulting Recommendations from Competitive Analysis

When a card is not yet activated, grey out all options except activate card and report card as lost/stolen/did not receive and relocate these options to the top (ie. Bank of America Activate)
Provide multiple access points to main card management features (ie. through the associated card’s lock/unlock and activate in addition to the Cards Management Widget menu
Allow easier card activation based on CVC + last 4 digits or by card scanning (versus Amex needing to type in entire card number)
Reduce the volume of cards management displayed details to better help members discern/recognize regular account pages versus card management (ie. don't include transactions on the Cards Management dashboard)
Create a dashboard page for Travel notifications- when no notifications set, guide members, to create one or else show current notifications (ref: Chase/Wells Fargo Travel Notification)
Allow members to edit and delete existing travel notifications from the dashboard (ref: Chase Travel Notification Dashboard)
When locking/reporting a card, show the card's dependencies that may be affected by the action (EG member has it connected to Samsung Pay, has a recurring payment to Spotify on it) (ref: Wells Fargo Control Tower)
Have rewards experience be its own whole experience similar to Chase's- has its own rewards dashboard, history, breakdown, benefits, and offers (ref: Chase Rewards)
Allow members to make their custom PIN on activation (ref: Capital One Activate)

Users Pain-Points

Derived from User Testing and Contact Center Complaints

Lack of understanding of balance transfer function vs ACH transfers and UI flow
Misaligned UI elements in forms caused a low success rate in form related tasks
Upcoming travel notifications were hard to recognize and delete
Too much scrolling to access and utilize functions
Confusion between Manage Cards widget and Account Details page

Derived from Journey Mapping Session

Navigate to rewards is difficult as it was hidden

Design Process

User Flows

A user flow is a series of steps that a user performs to complete a task. Below is one of the user flow we created. User flow is very important as we can see in several ways the user can perform the same task.

Travel Notification (Happy Path)

We started creating the low-fidelity wireframes. They are useful because we can iterate quickly, learn, and evolve. We showed them to a couple of users and iterated the design.

Wireframes

We started creating the low-fidelity wireframes. They are useful because we can iterate quickly, learn, and evolve. We showed them to a couple of users and iterated the design.

Visual Design

Later we created high fidelity wireframes and tested those with real users.

Developer's Handoff

We created a PDF of each feature showing the user flow with the actual UI. It helps the developer to visualize the entire flow in context of the UI.

Travel Notification Flow

User Testing & Validation

We created interactive prototypes using Invision. We tested the design with 161 participants.

Testing Details

Conducted between Oct 22 – Nov 5, 2019
We had a total of 162 participants through the 3 usability tests we ran and obtained 15 audio and 94 screen recordings
In our tests we reviewed lock/unlock, activate card, replace card, access rewards, create new and delete existing travel notifications, and balance transfer
We conducted 3 tests remotely through our testing platform UserZoom and had participants perform a series of tasks and answer questions related to each feature we tested

Participants Demographics

Test Results

The proposed design earned an NPS of +74 and the existing design earned an NPS of +54.
Both are actually very good NPS ratings, but the proposed design performed better with a 20 point gain. This is not surprising since the existing designs are the net result of intentional improvements from the prior designs.

Interactive Prototype

Prototype was being created in order to perform user testing.

Solutions To The Major User Painpoints

Less Scrolling

We designed the Dashboard using a card design pattern. Users can swipe to see the cards. It is a very common design pattern now used by popular apps, so users didn't face any findability issues.

Will Reduce Call Volume to Contact Center

Upcoming travel notifications were hard to recognize and delete. Users can't edit the notification as well. So they called the branch to change or delete the notifications.

Rewards: More Visible

We took our rewards from a separate tab and placed it on the "Manage Cards" dashboard. Users were able to find it easily with this new change.

Final Design

As the user testing results came out successful, designers started creating the final visual design. Then we exported those designs in Zeplin for the developers to work on the implementation.

Micro-Interaction

I created two versions of the dashboard with animation to perform the A/B testing.

Learning & Future Opportunities

The project had many challenges. Most of the challenges we found are the gaps in the API. When we proposed a solution, we sat with the engineering team to find the feasibility. Some of the proposed features could not be built because the API end points are not available.

New Opportunities: Next Phase

This is currently under production. We already identified some of the features, we will introduce in the next phase after the API 's endpoints are available.

When locking/reporting a card, Show the card's dependencies that may be affected by the action
Have rich rewards redemption experience
Allow members to make their Custom PIN on activation