top of page

CRAFT CAPITAL ONE CANADA
MOBILE BILL PAYMENT EXPERIENCE

Untitled-1.png

My Role

Product Design Lead

Platform

IOS & Android

Responsibilities

  • Design Strategy

  • Design Process Facilitation

  • Usability testing

  • UX, Visual and Interaction design

Team

  • Product Owners,

  • Developers,

  • Researchers,

  • Legal & compliance

THE PROBLEM

Capital One’s payment process delivers below CX (customers experience) expectations

Screen Shot 2021-07-07 at 11.24.41 PM copy.png

  • 3rd highest complaint calls-driver

  • Disjointed user experience: customers need to make payments in other banking apps and set Capital One as a payee to make the payment 

​

​

THE DESIGN PROCESS

Screen Shot 2021-07-09 at 2.42.29 PM.png
Screen Shot 2021-07-07 at 11.42.59 PM copy.png

IDENTIFY THE DESIGN PROBLEM 

Abstract problem

Concrete problem

The ask from the payment team is high-level and undefined, need to transform it to a more understandable, actionable design problem statement.

My approach

Collaborated with the payment team and research team to conduct different research actives to learn user needs. 

Research activities​

- Empathy interview with 16 customers

- Call centre agents interview

- Competitive analysis

- Other internet research (CEMP, etc)

Screen Shot 2021-07-08 at 12.25.04 AM.png

Identify user needs

- Build journey maps from learnings

- List user needs by each stage of the journey

- Frame the problem from the key user needs

Screen Shot 2021-07-08 at 12.17.02 AM.png

THE PROBLEM STATEMENT

How might we enable our customers to pay off their balance with an effortless, real-time & transparent experience through our digital platform (mobile app & web).

Screen Shot 2021-07-09 at 2.52.34 PM.png
Screen Shot 2021-07-08 at 8.28.53 PM copy.png

ALIGN WITH THE SCOPE

Payments is a complicated area in itself, with lots of legal requirements, technical constraints, payment service regulation and other dependencies. 

 

To tackle this complex experience properly and get alignment with multiple stakeholders about the project scope would take a bit of time. However, the timeline for the first launch is 6 months.

My approach

Screen Shot 2021-07-08 at 11.04.04 PM.png

Get everyone in the same room to align on the understanding and design direction
by facilitating a 3-days design workshop

Key activities

  • HMW activities & Affinity maps 

  • Goals and hurdles

  • Competitor analysis

  • Ideations & Prioritization

  • Concept mockup

  • Heuristics evaluation

The scope

Screen Shot 2021-07-08 at 11.09_edited.jpg

The team aligned on focusing on the key moments of the flow and move forward to discuss the solution for the following opportunities:
 

  •  How might we ensure customers are confident their payment has been received?

  •  How might we be as transparent as possible with customers as they're paying?

  •  How might we ensure customers are confident their payment has been posted?

Screen Shot 2021-07-08 at 8.28.59 PM copy.png

ITERATIVE DESIGN

INITIAL MAIN USER FLOW MOCKUP

Screen Shot 2021-07-09 at 2.29.45 PM copy.png

HEURISTICS EVALUATION

Bring legal, payment, tech, product teams in a room, lead a discussion on the concept mockup, collect feedback and thoughts from the team.   

Screen Shot 2021-07-08 at 11.32.48 PM.png

Guide teams provide comments/feedback by following considerations.

 

  • Does this flow reflect the overall payment process?

  • Does this flow meet all legal/compliance requirements?

  • Does this flow allow users to perform actions by mistake and easy to navigate back?

  • Does this flow include any unnecessary steps? 

  • Does this flow miss any function?

LEARNINGS

Screen Shot 2021-07-08 at 11.37.06 PM copy.png

Is there a better way to display balance payment options?

Is there a way to enable customers to schedule a payment, and allow them to cancel it when they need

Screen Shot 2021-07-08 at 11.37.32 PM copy.png
Screen Shot 2021-07-08 at 11.37.45 PM copy.png

A legal message about first-time payment will have 3 days delay requires to display throughout  the flow

Prototype VI

USABILITY TESTING

man-interacting-with-iphone-11-mockup.jpeg
Screen Shot 2021-07-09 at 3.29.24 PM.png

  • Validate hypothesis

  • Uncover potential content & minor design issues 

  • Proactively identify any potential pain points 

  • Assess if users can effectively, efficiently and satisfactorily complete the tasks 

Research goals​

LEARNINGS AND DESIGN REFINEMENT

Learning 1

It took a while for customers to figure out where to add a new account 

Screen Shot 2021-07-09 at 9.29.00 PM.png

Tooltip hins to the entry point

Screen Shot 2021-07-09 at 3.49.04 PM copy.png
Screen Shot 2021-07-09 at 3.49.23 PM copy.png

Refinement:
 

First-time update interstitial 

Learning 2

Learning 2

It took a while for customers to figure out where to add a new account 

Customers did not aware they could schedule the payment

Screen Shot 2021-07-09 at 9.29.39 PM.png
Screen Shot 2021-07-09 at 3.57.32 PM copy.png

Refinement:

Adjust visual hierarchy

Learning 3

Customers don’t understand the legal message concept.

Screen Shot 2021-07-09 at 9.29.58 PM.png

Refinement:

Screen Shot 2021-07-09 at 11.00.25 PM.png

Display message on related actions

Screen Shot 2021-07-09 at 11.00.31 PM.png
Screen Shot 2021-07-09 at 11.00.39 PM.png

VISUAL DELIVERY

Typography, spacing, colour consistency

Screen Shot 2021-07-09 at 11.04.55 PM.png
Screen Shot 2021-07-09 at 11.04.55 PM.png

DETAIL INTERACTION DOCUMENTATION

Screen Shot 2021-07-09 at 11.11.05 PM.png

SUCCESS MEASUREMENT

Partner with product owners and research team to define the learning metrics 

How did we define success

60%+ enrolled for the OTP feature


The result

42% enrolled for the OTP feature 
Out of those customers who didn’t enroll (58%), 82% of dropped out after trying to set up their account through the feature

60%+ enrolled for the OTP feature


70% Out of those 42% enrolled user, use this feature to make another payment

NEXT STEPS

  • Further Monitoring:
    Discovering any issues
    Quantitative (Usability testing, surveys, call data, analytics) & Qualitative research (Interviews, call listening)
     

  • Design refinement
     

  • Partner with the product owner to prioritize refinement release strategy
     

  • A/B Testing on subsequent releases

Project Overview

Transforming Complexity to Simplicity

  • Evolved from managing 8 distinct user flows and over 60 interface windows.

  • Reduced the need for 100+ clicks for single project data management.

  • Cut down 300+ hours of enterprise data operations.

The Solutions

An enterprise-grade, streamlined, all-in-one cloud service.

My Role & The Team

My Role:
Lead Product Designer

A Global Collaboration Team:
Principal product designer (Boston)
Revit Product Lead (Boston) 
Feature Product Lead (Boston)
Tech Lead (Boston)
Principal Engineer (Shanghai)
Sr and Intermedia Engineers (Shanghai)
Visual Designer (Shanghai)
 

bottom of page