How Shopify Pay Came to Life
We enabled millions of buyers to check out in a few seconds
When shoppers find something they love online, nothing takes the wind out of their sails like filling in a ton of fields at checkout.
On April 20th, 2017, we announced Shopify Pay at our partner and developer conference Unite. Shopify Pay offers a faster and simpler mobile-first buying experience to online buyers, which leads to higher checkout conversion and more sales. Here’s how it works:
It’s been over 20 years since the first online shopping transaction, yet the majority of purchases still require buyers to take out their credit cards and fill in long multi-step forms.
On top of our exciting partnerships with Apple, PayPal and Google, we saw the opportunity to create our own solution that’s device, operating system and country agnostic. Shopify Pay’s goal is to simplify the checkout process across all Shopify stores and make sure it’s independent of a particular piece of hardware. With Shopify Pay, we want to give our merchants the opportunity to offer their customers a one-step checkout.
That’s a pretty tough mission for a feature, so we took a methodical approach to creating it:
Define the problem
First things first, we took the time to write a project brief, something we do to kick-off most projects at Shopify. The brief is very concise, 1–2 pages usually, and the first part of the document is defining the problem. One of my biggest fears is that it’s often easy to focus on the solution and end up solving the wrong problem.
Problem: The majority of purchases still require buyers to take out their credit cards and fill in long multi-step forms. We do a poor job at offering people the option to save their preferences (address, shipping method, billing info, payment info) for subsequent purchases.
After defining the problem, the rest of the brief explains why this is an important problem to solve now, how do we plan on solving it, and lastly how are we going to measure success for our solution.
Identify our riskiest unknowns
Unknown #1: The first and largest unknown was, how do we get people to opt-in to Shopify Pay during checkout without impacting the conversion rate? Would they even want to?
Think about that for a second: we wanted to introduce a new product that requires a lot of trust at the most sensitive part of the buying journey. And to top it all off, buyers would only get the benefits of Shopify Pay on their subsequent purchase, so they wouldn’t experience instant gratification.
Unknown #2: Even if we create a smooth way for people to opt-in, we wanted to make sure that it would be seamless to use Shopify Pay on their returning purchase. Our biggest fear was that by that time they may have forgotten that they opted-in to Shopify Pay.
Unknown #3: Lastly, assuming that we figure out how solve #1 and #2, how do we get merchants to use it and how do we tell them that Shopify Pay works across all Shopify stores, but that buyers information would not be shared across stores?
At the beginning this seemed like an impossible thing to achieve…
But we love challenges at Shopify so we dived right in to start exploring and getting shit done.
We recognized that the list of unknowns should become our roadmap:
- Opt-in — we need enough people to opt-in to save their information
- Returning Purchase — we have to make sure that buyers use the feature when they come back for a subsequent purchase on the same store of opt-in as well as cross-store.
- Merchants Onboarding — we need to convince merchants on the value they’d be getting by enabling Shopify Pay.
Before starting, we defined our guiding principle throughout the project: We cannot hurt the checkout conversion rate in favor of buyers opting-in to Shopify Pay.
The Design Sprint that started it all
We kicked things off with a condensed 1-day version of the Design Sprint to come up with different prototypes for Shopify Pay.
The Challenge
Over the years we have built a well oiled and battle-hardened checkout, processing billions of dollars. The checkout flow is a core part of the buying experience and minor tweaks could have significant impact on sales, the lifeblood of our merchants.
The Team
The Sprint was conducted under the guidance of Kevin Clark — Design Lead, and attended by a team of UX designers, developers, content strategists, UX researchers, and myself as a Product Manager. In total, there were 9 participants.
Kevin had previously run multiple design sprints at Shopify and has forked his own condensed 1-day version. He kept the team on point regarding best practices and staying on schedule.
The Sprint
1. Defining the problem (1 hour) — always go back to the problem we’re trying to solve.
We started the day by asking the following questions, which are all geared to help the participants align on the problem we’re trying to solve:
- What is the problem we are trying to solve?
- What questions/unknowns do we have about the merchants and the buyers?
- What might be confusing about this product?
Everyone came up with questions and ideas on their own and then we grouped everything by similar topics.
2. Ideation (45 minutes)
Now that we have identified the key issues that the product should address, we put our pens where our mouth is.
Crazy 8s, a core sprint method, is very effective to generate eight distinct ideas in eight minutes. Everyone receives a sheet of paper folded to create eight frames. Then we set a timer for everyone to sketch a different idea in each frame and they can spend one minute per sketch.
My favorite part, is that all participants can sketch, not only designers.
After the eight minutes of sketching, each team member picks a sheet other than theirs to present and discuss with the rest of the group. The thought behind choosing someone else sketches is to make sure the sketches are clear enough for someone else to understand them.
Finally, after all the sketches have been presented, we hold a round of voting. Every participant is given three red dot circles that they must choose wisely to select the most promising ideas and to eliminate any unfeasible ideas.
The voting determines which sketches the team will further develop as prototypes in the next step.
— Lunch Break —
3. Design pairing (2 hours)
We picked three sketches based on the votes to further develop into polished mockups. We were lucky to have enough designers to form three teams to work on each sketch. The process was scrappy and geared towards testability instead of perfection.
We wanted to have something that looks good enough to test out the different hypotheses we had and get feedback from both internal stakeholders and most importantly real customers.
4. Demos aka the outcome of the full-day sprint (30 minutes)
We finished the day by demoing the 3 ideas to all participants and a few more stakeholders.
- Exploration 1: Present the opportunity for buyers to save their information right after they enter their email and feel tired of having to fill in multiple fields.
- Exploration 2: Show the opt-in at the end of the process before placing the order. After spending on average 240 seconds fumbling with forms, show buyers that they don’t have to do that again for their next purchase.
- Exploration 3: In order to avoid any chances of distracting buyers from completing their checkout, show the opt-in to save their information right after they place their order.
From idea to reality
Jul. 20, 2016 — Kicked-off project with 1-day design sprint.
Dec. 16, 2016 — We put our first MVP in the wild with a couple of merchants. Below is the email we used to recruit merchants to the public beta.
Jan. 20, 2017 — we added more merchants to the beta after continued positive results in conversion lift and speed increase for checkout completion time.
Mar. 10, 2017 — we decided to make the feature opt-out because of the high confidence in performance. Returning buyers who use Shopify Pay have a higher conversion and faster checkout. Shopify Pay doesn’t negatively impact checkout conversion rate for buyers who don’t use it.
Apr. 20, 2017 — We announced Shopify Pay at Unite and we were thrilled to get some awesome press coverage.
Jun. 6, 2017 — We launched Shopify Pay to everyone
The future of checkout is no checkout
I’m very proud of the work our team did, and I hope it contributes to pushing the shopping experience in its own way. But really our CEO, Tobi, said it best during our last Q2 2017 earnings call:
“Think about Shopify Pay as a new construction site where we just put the scaffolding and there’s still a lot of work to be done. Shopify Pay is one ingredient of the mix, we are working with hardware manufacturers and browsers to build great buying experiences and in 10 years our ambition is not to have a checkout.”
Curious about Shopify Pay? Read more:
Reiterate shares insights into the craft of product, so the rest of us can learn and get inspired. Follow reiterate for more pieces like Richard’s.
