Real-time Credit Card Transactions

Easily recognize your credit card transactions with enhanced transaction details including an interactive map to show you where you last shopped, the merchant’s phone number and transaction type.

Role

UX Design Lead

Outputs

Wireframe

User testing

Prototype

Year

2019

Project background

What's the challenge:

As more people use mobile payments and credit cards, unrecognized transactions have become a major issue for bank customers. Right now, users use telephone banking to check these transactions, which is time-consuming for them and costly on operation for the banks.

Who are the users:

Based on the prior user research, we noticed:

Canadians (especially those 18-34 years) check credit card transactions with high frequency, so the utility of ensuring the efficient accuracy of charges is clearly worthwhile.

75%

of Canadians review credit card transactions (online/APP) at lease once/month

44%

nearly half (44%) at least once a week

18-34

years old Canadians prefer seeing a map and the name of the business is most important

55+

years old Canadians prefer the simple info-only option and rely on direct calls

Our goals:

To help users oversee the transaction details and provide contextual help content on the mobile. If they still have concern on the transaction then they could reach out to us anytime.

Project goal

Features we designed:

View transactions in real-time
Get transaction details including transaction type, merchant’s phone number and address
View where you’ve made transactions on the interactive map

This also built a easily scalable page for future transaction features:

Shop with points
Make instalment payments
Dispute a transaction

Design focused on MVP but also considered:

Accessibility (screen reading...)
Error cases
First-time user onboarding
Scalable for more transaction types (fees, charges, returns...)

Project process

User testing

We planned 2 rounds of user testings to better understand users' behavior & t:

how users interact with the hub
which option of entry points easy-to-understand/discover
what information is top priority
what information helps if they failed to recognize a transaction

Design focused on MVP but also considered:

Accessibility (screen reading...)
Error cases
First-time user onboarding
Scalable for more transaction types (fees, charges, returns...)

Loading Experience

To improve the experience of waiting (we learned the data loading might take 1-3 seconds, and worst case was 10s), we designed a proactive loading experience on both platforms.

It included the progressive loading indicator to show the interface and a system loading animation to tell the status.

Explore progressive loading

Inspired by the loading design, we also noticed the chance to introduce progressive loading as we learned the data might not get loaded within the same time
It helped to manage the users waiting experience & expectations

Promote the loading component

The loading component including loading with single data source, multi data sources and flow in progress will help all projects
We got great support from tech partners & accessibility team as this also improved their the page data structure & accessibility concerns

Componentize the design

Opportunity of new design pattern

During the project, I noticed the design we introduced to display transaction details could be reusable in other features as a new component
The design considered responsive experience on phone and tablet, and followed native design guidelines in iOS and Android

Promote the slide-up component

Get business support in projects by promoting the value of design component
Get develop team insights & support to implement the the component
Share the component with design community

UID, Visual design and Content

Supported the design of online banking
Worked closely with visual designer to create the mockup
Worked closely with editorial to improve the usability of content

Design follow-up

After delivered the design, supported the implementation by designing for edge cases like loading failed or data not relevant
Validated the design with product before QA started

Next step

SCALE THE USAGE

I created the design for all transaction types which was out of the project scope. But it helped the stakeholders foresee the value of the design.

DYNAMIC CONTENT

If we had more time, I would explore dynamic content with different contexts. For example, user comes to this from a transaction notification or fraud alerts it might present different CTA and info.