Shopify - Upsell

Special project 🚨Code Red Y’all!
4 months

System design
I was the lead designer with another designer and with 2 front end dev, 3 back end devs and 1 pm.

Project overview

Shopify has one of the most efficient Checkout experience. A lot of transactions occur per minute. It is one aspect of the whole Shopify experience that is not 100% customizable. Shopify has an app store which contains apps built by partners. Some of those apps could intervene at different level of the store and 🚨 some were interacting with the checkout flow and it became a problem. We didn’t want to simply block partners from building new experience but we just wanted to make sure that the Checkout flow would remain the great crafted flow we had.

Exploring the problem

First we wanted to give the opportunity to third party developers to use new parts of the Checkout process by giving them access to a new controlled step to allow post purchased Upsell/Cross sell.
This was requested by them for building apps available in Shopify’s app store.  

Also we wanted to make sure that our merchants would feel that this new experience was crafted and tailored by Shopify in the background and even if this Upsell could be available in different apps the feeling of being part of Shopify’s Checkout needed to be persistent.

But first, what is Upselling/Cross-selling?

Project scope

The big picture was pretty clear from the beginning. What we needed to solve was how to make sure that different apps used by different shops with different look and feel selling different type of products would fit into the same experience.

Shopify has multiple shop templates with different styles and even if Checkout has a default style out of the box, it can be customized by merchants.

Something we all had in mind was; How’s the end buyer will feel by having an extra step to our solid and renowned Checkout experience. Having a weird feeling like; “What’s this popup?“ or a shady redirect was absolutely out of the question.

Another part we needed to solve was the tone of the offer and what are we encouraging.

This thing (like anything else at Shopify) needs to be able to scale. Needs to work for Upsell but Cross sell also.

Also, we needed to create new components to the Polaris Design System and determine which ones would be available to our partners only.

Problem statement

So we came up with something like this:  At the moment, to be able to obtain what they’re looking for in terms of offer and revenue, partners are building apps that override the Shopify’s checkout process.
This can’t be good for Shopify, merchants and buyers as we needed to control the full checkout experience.

We need to a new checkout flow experience to allow partners build apps that generate more profits for merchants while maintaining the high level of trust that Shopify’s Checkout offers for everyone.

Design process

Stakeholder interviews

We conducted stakeholder interviews with three of our partners. We spoke with individuals from marketing, finance/infrastructure, design, and engineering/development. After, my team and I highlighted what were to become our insights for this project.

Partners need

A new state in the Checkout flow.
Structure and Guidelines.
Some flexibility.
Available components in Polaris.

Merchants needs

Great UX built by partners
Keeping the look and feel of their brand. 

Keeping Shopify’s integrity at checkout (not looking phishy).

Buyers needs

Confidence.
Exciting offer part of the same flow (same beat.)
Being able to accept or refuse easily without any dirty tricks.

User flows

Adding the Post purchase offer while the credit card is vaulted.

Adding the Post purchase offer while the credit card is vaulted.

Ideate

With these user flows in mind, we started visualizing past the MVP through wireframing as much as we could. Each team member sketched several ideas for different pages of the eventual prototype. This is just a few preliminary sketches*

that we did.

We explored different rythms, layout and call to action. We wanted to make sure that no ’phishy’ feeling was felt. It had to be comparable with a real life interaction. If a store vendor is proposing you something, it has to fit with what you’re actually buying or having a steep discount on it.

Another thing we wanted to try is how are you accepting the product because the transaction is already started (and almost done) paying for something else could happen pretty quickly. With this in mind we explored different copy and button mechanism to voluntaray add friction to the payment method. It was pretty cool to do the opposite of what we normally aim for and the results were quite interesting as we will see further down.

* Not the actual picture... can find it... ¯\_(ツ)_/¯ This one comes from Unsplash

Design iterations 💪

We needed to create and establish some required components to have the best UX possible.

When you design a post-purchase upsell, a great customer-facing user experience (UX) and merchant experience are important to the success of our merchants. The post-purchase upsell page should represent the merchant well and protect their brand’s trust.

User experience

To provide a great post-purchase experience and to help the merchant gain trust from customers, implement the following UX principles in your post-purchase checkout extension:

Be transparent about all the costs involved in a purchase.
Present clear options to accept or refuse upsell offers without pressuring customers.
Display a maximum of two consecutive upsell offers.
Present relevant products by tailoring upsell offers to the shopping behaviors and preferences of customers.
Provide default copy that addresses customers directly using a voice that's appropriate for any store, regardless of brand personality.