Role
Research, UI design, UX design
Timeline
November 2019–February 2021
Collaborated with
Product manager, engineering, design across various teams
Company
Square
The problem
The checkout experience for Square Online Store was in a sorry state at the end of 2019. Without pausing to review the entire holistic experience, we had been steadily adding on features and functionality, resulting in an overstuffed muddle, both from an experience and code perspective. An overhaul was long overdue.
The opportunity
Checkout is the most fundamental part of an online store, and if we were going to redesign something this important, we wanted to take the opportunity to rebuild it from the ground up and make it not only functional but truly remarkable.
At the same time, Ecommerce at Square was looking to the future of checkout as a platform that could be leveraged not only by other teams and products within Square, but also by third parties. We wanted to dream up a best-in-class, truly remarkable checkout experience that was in line with our longer-term vision of Square Online checkout as a flexible, scalable platform.
We didn’t want to take any part of the experience for granted, questioning even the things we thought of as fundamental.
Going back to the drawing board
We kicked off the initiative with a cross-functional design sprint, involving designers, engineers, and product managers from various teams across Ecommerce. The goal was to determine the principles that would inform our vision for the online purchase experience, as well as the requirements for a successful experience. We didn’t want to take any part of the experience for granted, questioning even the things we thought of as fundamental.
After reviewing various checkout experiences (i.e., placing a lot of online orders for boba and greeting cards), sketching out crazy ideas, discussing what was technically feasible now and what might be feasible later, we outlined the following principles:
Prioritize mobile. About 80% of transactions on Square Online come from mobile devices, so perfecting the experience on mobile would make or break the experience for the majority of buyers.
Reduce friction. Reduce steps, reduce taps, reduce typing — smooth the whole process for the buyer so purchasing could happen quickly and seamlessly.
Make it scalable and responsive. Our approach needed to be responsive to a variety of sellers’ needs, across verticals and use cases, and to grow with Square Online as we continued to expand functionality.
Use mobile interaction patterns. Things like popping up a numeric keyboard versus an alphabetic one, depending on the form input, are those minor interactions that can truly set an experience apart.
With our principles defined, we were ready to have some fun with visual explorations. The head of design for Ecommerce and the lead designer on the Site Design team and I collaborated on these explorations. I took the lead on creating a comprehensive list of the current and near future functionality we would need to support—all of the fulfillment methods, integrations with other Square products, errors, and edge cases—as well as a framework defining the goals & required functionality for each step of the checkout flow for both first time and returning buyers, and for both retail and restaurant experiences.
Cart & checkout flows across restaurant, retail, first time buyers, and returning buyers.
As the other two designers explored options for the aesthetic approach, I followed with deeper UX explorations to make sure the patterns they were proposing resulted in a cohesive experience across the required use cases.
The final visual direction was visually restrained, responsive, and modular, with different functional sections that could be hidden, rearranged, or expanded depending on the needs of the seller and order. We reduced the number of total form fields by moving to a single-line address input and a single-line credit card input. But the biggest change was moving from a step flow to a single-page view. This substantially reduced the number of taps required — especially on mobile, where buyers could navigate form elements with native controls.
The fulfillment section in its various incarnations. The section content is dynamic based on the selected fulfillment method and other seller settings.
Meanwhile, in engineering-land…
At the same time that design was having a free-for-all in Figma, engineering was structuring their approach to building a brand-new checkout platform. The backend approach would have a major impact on how they could rewrite the front end. I stayed very close to these discussions, ensuring we were keeping the user experience in mind. We especially needed to make sure that how we released our changes didn’t disrupt existing sellers and cause them any loss of sales.
We decided to start with a re-skin of the current checkout experience with no changes in functionality, to ensure that when engineering started rewriting individual pieces of the checkout, we wouldn’t create a visual Frankenstein’s monster, and the changeover in the backend would be invisible to both sellers and buyers.
Build & launch & iterate
Once engineering and design were aligned on this approach, we worked with analytics on the pieces of the checkout funnel that we needed to track to keep an eye on conversions and the new experience’s overall performance. Engineering got to work, and over the next several months, re-built checkout piece by piece.
Out of an abundance of caution, we decided to launch the re-skin and, later, the rewrite, as successive A/B tests. Even though there was no reason to suspect our changes would obstruct buyers, any loss of sales for our sellers was unacceptable, so we wanted to err on the side of extreme caution. Which, it turned out, was wise. The re-skin rolled out without any major hiccups, but the rewrite, which was initially launched to 10% of users in the US only, showed a small decrease in conversions. Since our goal was to remain at parity with the control, we have been slowly testing various hypotheses and small visual tweaks, isolating bugs, and attempting to narrow the conversion gap.
During this time, Ecommerce underwent a reorganization and hired several more designers, so the future of checkout is now in the hands of another designer.