top of page

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.


UX Design Lead



User testing




iPhone X Mockup.png

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.


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


nearly half (44%) at least once a week


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


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...)

Frame 6.png

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

Group 46.png

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

T2020 MVP_mobile_v1.5_edited.jpg

Next step


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.


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
bottom of page