The checkout interaction on Food52.com is arguably the most important interaction on the site. With the online shop accounting for more than two thirds of the company’s overall revenue and the fastest growing area of the business, having a seamless checkout is an essential part of this growth. Prior to this redesign, the checkout experience was very difficult to use and users faced many obstacles on their path to purchase, not least of which was a very poor mobile experience. Role: Art & UX Direction / Design / Product Management.
Product & Design Goals
This project had one singular product goal and KPI: to increase conversion rate. To achieve this, we also identified some more specific design and UX goals:
— Significantly improve UX and streamline the funnel: We wanted the checkout experience overall to feel seamless and easy, getting users to the final goal of placing orders as quickly as possible.
— Enhance visual design with better readability and information hierarchy: One of the biggest challenges for this particular checkout experience is the sheer amount of information that needs to be presented to users throughout. The Food52 business model which dropships from hundreds of different vendors, each with custom shipping options, requires laser sharp information design and clear visual hierarchies to help users parse information easily.
— Focus on a great mobile experience: With overall shopping trends showing more and more users shopping from their phones, we want to make sure we are optimizing the mobile experience to increase traffic and conversion from this untapped source.
From Research to User Flows & Wireframes to User-Testing Prototypes
We began this project with a comprehensive competitive audit of checkout flows and interactions. It was important in this sweep to cover not only direct competitors coming from lifestyle and home brands, but also the most standard e-commerce brands.
One thing I identified at the outset was the desire to tailor the flow for each user segment to create as little friction as possible. First-time shoppers would enter a guest flow with a step-by-step path for entering information, but returning shoppers could bypass these steps and be taken directly to a Review screen with shipping and payment information pre-populated. This allowed for a much more efficient funnel from Add to Cart to Place Order for our most valuable, highest converting shoppers. I used a user flow map to help visualize the different paths based on user type.
With so many interactions and steps, user-testing was also a critical part of this project. We created high-fidelity clickable prototypes and a series of tasks for users to complete. We wanted questions to be unbiased and open to get the best sense of successful interactions vs. failures.
Final Designs
The final designs and UX patterns offer a streamlined shopping experience aimed at optimizing conversion rate. With focused and clear steps for new shoppers, and a hyper-efficient funnel for returning shoppers, the new checkout is incredibly easy to use on both mobile and desktop views. In every area, we attempted to reduce friction to help guide users easily through the process and get to a Place Order state as quickly as possible. Similarly, we identified opportunities to include “quick” payment methods such as PayPal and ApplePay much earlier in the funnel by pulling these levers up to the Cart level and allowing for immediate checkout. The checkout experience is "smart" in every way; it can understand what type of user you are and shuttle you through a different flow depending on your segment, or serve up different payment options more quickly depending on the device you are on.
Launch & Results
With such a critical interaction on the site, this project had an elaborate QA process with end-to-end testing of every possible flow and interaction. This began with the immediate project team and then expanded to include the larger product, design, and engineering teams to ensure we were covering every scenario on every device and browser. It was essential that any launch-blocking bugs were immediately discovered and resolved. We also faced a hard deadline—with a launch in early Q4, it was important that we launch before the highest peak of shopping season, so a tightly managed QA process and launch plan were essential. With some absence in the product space, I stepped in to play an essential product role in this project leading up to launch. This included creating a live, evolving list of priorities and MVP feature sets that was updated daily leading up to launch, as well as developing a comprehensive launch plan to be executed by the engineers.
Once launched we conducted an A/B test with the old checkout flow to ensure success. When comparing results, the new checkout resulted in increased conversion rate by 3% and increased AOV by $5.