American Express has always been an important partner for Boxed, and many of our best customers are American Express card holders. Working with American Express’s User Experience team in addition to Boxed’s internal development, QA, and product teams, I worked to design flows and UI for American Express Pay with Points. The final feature had to work across responsive web and the Boxed iOS App.
Role: Principal Product Designer
Time: May-June 2017
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.
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.
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.
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.
Isolated Screens for Web
Isolated Screens for iOS
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.
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.