amex-cover image.png
 

The Goal

Allow Boxed customers to pay for part or all of their order using points from eligible American Express cards. The feature required designing multiple new steps in the checkout process, since the Pay with Points program isn’t a payment option on its own, but rather something that can be earned and applied by using an eligible American Express card. My designs had to be easy for customers to use, follow American Express’s documentation, and fit our current checkout flow on Boxed. The end designs also had to be implemented for all our segmented users on both responsive web and Boxed’s iOS app. 

 

The Solution

I worked with our partnerships team, the dev team, product, and QA at Boxed to implement this feature. I also worked closely with American Express’s User Experience and QA teams to make sure the feature was implemented seamlessly into Boxed’s product while following American Express’s requirements. In the end, we created an experience that allowed Boxed customers to take advantage of their Amex card’s benefits, and hopefully entice them to shop more frequently.

 

 

Requirements

One of the challenges of working on this project was synthesizing Amex’s requirements and applying them to our site. Thankfully they provided extensive examples with their docs.

 

Research and Inspiration

To help model my designs, I looked at other companies who had implemented Amex Pay with Points (PwP) on their sites.

 

User Flows

Part of this project was discussing our changes with American Express’s internal User Experience team and going through their user acceptance testing (UAT). These flows were sent as part of that process to illustrate how a customer was intended to use this feature on Boxed’s site.

Desktop web flows

Mobile App (iOS) Flows

 

Isolated Screens for Web

Entering payment

Selecting eligible card

Applying Points

Confirmation of points

 

Isolated Screens for iOS

Select payment, Apply Points, Points Applied, Review Order

 

Supporting UI

This feature had to touch other parts of the site beyond checkout. We had to reflect the points applied on each order in the Order Detail/History pages. We also had to design for inline errors.

 

Landing page

I also designed a custom landing page to educate users about the experience. It followed Boxed’s style guide at the time, and was approved by Amex. This page was an important step in the flow as Boxed and American Express’s marketing materials would point to this page.

 

 

Other Projects