top of page

Manage Cards on Your Phone

This project was to provide multiple self-services for mobile bank users. It helped end-users to easily lock the card when they temporarily forget where it is, replace the old one when it expires soon, or report lost or stolen for security concerns.

 

The design successfully met the business goals to reduce call-centre support costs, and satisfied user needs by seeing the data of fast-growing usage and fewer security reports after release.

Role

UX Design Lead

​Design Manager

Outputs

Wireframe

User testing

Prototype

Year

2018 - 2020

🤯 Discover

Problem statements

  • 😤 The mobile credit card users increased rapidly and seek a digital card control when there's issue with their physical cards

  • 💰 The cost of telephone banking increased during the years to support customer inquiries and services

User research findings

  • 40% mobile banking users preferred to activate new card on mobile

  • 35% mobile banking users requested to report lost/stolen cards on mobile 

  • 74% of cardholders would choose a card with best security & fraud protection over rewards

Screen Shot 2021-10-25 at 9.39.07 AM.png
Screen Shot 2021-10-25 at 9.39.17 AM.png
Screen Shot 2021-10-25 at 9.39.40 AM.png

Competitive & Data analysis

  • First of big 5 Canadian banks are going to enable credit card controls

  • Fintechs deliver card control features

  • CIBC has 3.3 million active accounts and 17.3% lost card per year

Persona & Journey map

  • Based on user research, we created user personas for our North Star users to guide design

  • Created user journey map to visualize the scenarios of user interactions with the bank when lost the card

  • Highlighted pinpoints & WOW moments on all touchpoints

📋 Define success metrics & project roadmap

We created initial prototypes to present our ideas to leaders and partners, ensuring everyone agreed on our goals. After reaching consensus, we prioritized features based on research, user needs, and business benefits.

 

We defined the roadmap of the project and design:

  • Lock the missing card and Unlock it whenever user finds it (2018)

  • Activate new card on the go (2018)

  • Request a replacement for the damaged card (2019)

  • Report a lost/stolen card and request replacement (2019)

  • Digital payment (Apple Pay/Google wallet) (2019)

  • Real-time transaction enhancements (2019)

  • Digital replacement card in Apple Pay or Google Pay (2020)

image2018-4-17 10_15_31.png
3.jpg
DISC 06 - MMC - Manage my Card 2- Final - May 11 2017.jpg
MMC MVP - Freeze Card_v1.5.7.jpg
Frame 7.png
 🎨 Design & Delivery

Collaborative & Agile design

  • Delivered designs every sprint & gathered feedback for iteration

  • Conducted user testings & shared results with team to get alignment

Usability testings

  • 5 rounds of in-person/remote usability testings to support the design decisions (position & flow)

  • 3 remote rapid testings to support content decision

  • 3 usability testing to validate concepts of card hub  features in the roadmap

Design challenges

  • Improved business rules (for example, 15 day-auto deactivate a locked card) with user research findings & support from leaders

  • Created design pattern & components for other projects following mobile design guidelines (slide-in / animation)

  • Worked with Apple design team to create digital payment experience

  • Introduced notification to improve communication with users

  • Adjusted design & content to meet legal & privacy requirements

Replace Your Damaged Credit Card
Replace Your Lost or Stolen CIBC Credit Card with Online or Mobile Banking
Lock and Unlock Your CIBC Credit Card If You Misplace It
 🤩 Beyond design

Cross-functional teams collaboration

To ensure the success of this project, I built a seamless collaboration process between Product stakeholders, Design teams & Technology squads.

  • Organized weekly design-tech reviews with business stakeholders and developers to sync up research findings, design outcomes, tech constraints or accessibility suggestions

  • Worked with marketing and public site teams to promote digital card controls & user engagement

  • Connected with frontline, customer services & support teams to create user guides, train the advisors and collect direct feedback from users

  • Aligned requirements from fraud security and legal teams

Team management

Besides leading the project design, I was also responsible for arranging resources, ensuring design quality and defining scopes of future enhancements.

  • Supported designers through regular 1on1 and team meeting to build open communication & recognize achievements

  • Organized bi-weekly design critique to share & align the solutions with other on-going projects.

  • Invited internal/external experts to share insights of credit card products, service design & accessibility with designers.

  • Led innovation exploration of digital payments, chatbot and to inspire creativity in the project

  • Facilitated design team roadshow & showcases to executive team to increase team visibility & ensure alignment with company long-term vision.

Continuous learning & improvements

Card Management Hub

Proposal of a central place of all cards & related services. Through user testing, we noticed multi-card users preferred to manage cards in one place.

AI integrated

A concept from mobile team Hackathon to access card controls via voice & suggest contextual & personalized features by analyzing transaction pattern & detecting locations.

Design measurement

We kept tracking App Store reviews, telephone banking cases and customer services analytics to figure out the opportunities of design enhancements.

MMC - Cards Hub_v3.0.jpg
bottom of page