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

2018

iPhone X Mockup.png

Project Background:

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

18-34

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

44%

nearly half (44%) at least once a week

55+

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

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

Frame 6.png

User testing

We run 2 rounds of user testings to understand:

  • 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

Group 46.png

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

T2020 MVP_mobile_v1.5_edited.jpg

Next

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.

T2020 MVP1B_v1.1.jpg