American Express

Designing a consistent, secure, and streamlined checkout experience called Click to Pay.

Role: Product Designer

Release Date: October 2019

Learn more

 

 

preview-image-lockup

OVERVIEW

The Challenge

As it stands, customers are faced with a number of options at checkout when it comes to payment methods. The customer may become overwhelmed and the checkout experience may then become disjointed. There also stands the potential issue of security because of so many varied and unvetted payment options.

The Solution

Recently, American Express, Mastercard, and Visa launched a checkout solution based on a set of standards called SRC (Secure Remote Commerce). The solution, ‘Click to Pay’, functions like a digital wallet and is a more secure, streamlined option for shopping online. It is integrated into the 

I was brought on as a product designer and worked closely with product managers, developers, and a designer on a partnering team to bring our flavor of Click to Pay to launch in October 2019.

Process

noun_Idea_1558290
noun_design_3406105
noun_test_2974484
noun_launching_2421603
Discovery & Research
Design & Iterate
Build & Test
Refine & Launch

THE USERS

Cardmembers

Cardmembers are considered the primary user for this experience. Any cardmember with a participating issuer can use Click to Pay to store their card, billing, and shipping information. The goal was to provide an option to store this information in a secure way so that customers could check out down the road could checkout without a hitch.

Banks and Issuers

The banks and issuers acts as a sort of liason between the cardmembers and Click to Pay initiative. They provide educational information on the feature and ability to enroll.

Merchants

In place of their own checkout process, merchants can opt for Click to Pay, ensuring a streamlined and secure experience for all American Express, Visa, and Mastercard cardholders. This takes some burden off of the merchant and provides a familiar and thus inviting checkout experience for their customers. 

DISCOVERY & RESEARCH

Clarifying business goals, assessing the competitive space, and building project specific knowledge.

Getting up to speed

As a newcomer to Amex and the realm of finance, I needed to prime myself on the processes and decisions that powered this new checkout experience. In order to do this I read over previous design briefs, watched webinars on relevant, and scheduled coffee chats with various stakeholders and teammembers. 

Competitive analysis

In order to assess what worked well and what didn't work well for a digital wallet model, I compared PayPal, GooglePay, and ApplePay. I contrasted how they onboarded users, how they stored sensitive information, and the steps it took to complete a purchase. 

DESIGN & ITERATION

Iterating on existing designs, designing new features, and fine-tuning. 

When I joined the team there was already a foundational design. I was asked to finetune the visual design and suggest iterations and new features using Sketch. 

I worked closely with the developer in this phase and shared wireframes via Invision so that we could discuss and make necessary iterations. 

BUILD & TEST

Validating the user experience and making necessary changes based on feedback

QA Testing

As a part of the development process, the developer on the team led QA testing. As changes were being made, the PM and I were able to use the testing environment to monitor the development, suggest improvements, and run through the experience to understand edge cases and problematic user flows. 

Guerilla Usability Testing

Without the time or budget for testing, I decided to take matters into my own hands in order to validate the user experience. I sat down with 5 people around the office (not involved in the project) and led them through the following tasks to gauge usability. These tasks helped me to not only identify potential issues in the tasks being accomplished, but also revealed areas for opportunity in adjacent tasks.

Task 1: Onboarding

Task 2: Add a new shipping address

Task 3: Edit shipping information

Task 4: Switch the card being used

Task 5: Remove card from Click to Pay

REFINE & LAUNCH

Finalizing designs for the initial launch

 Onboarding

After the customer enters their card information on the Click to Pay portal, American Express cardholders are asked to enter their billing and/or shipping information. They are also asked to create an ID for streamlined login in the future. The one time password sent to identify the customer adds an extra layer of security. 

 

billing-and-contact-NETWORK-unselected
DCF-OTP-empty-iOS-alt Copy 3

After the customer has created a profile, they are confirmed and welcomed with educational information regarding Click to Pay.

DCF-Network-SRC-enroll-success

Storing Card, Shipping, & Billing Information 

Customers are able to store multiple shipping addresses and edit these at any time. They can also remember a device for a more streamlined experience on trusted devices. 

DCF-Review-and-Confirm-3-continue Copy 2
Shipping-and-contact-edit Copy 2

Editing Information 

From here the customer can update their card (in case of a new expiration date for example), switch cards (if multiple are registered), or remove the card from the Click to Pay system. 

Manage-Card-Options Copy

* To see this feature in action, use your American Express card on Cinemark, Crate & Barrel, Expedia, Fresh Direct, Jo-Ann Fabric and Craft Stores, Joseph A. Bank, the marketplace division of Rakuten U.S., Saks Fifth Avenue Shop.com, Movember, or anywhere you see the Click to Pay logo.

Otherwise, feel free to reach out with any questions or for further information on this project. *