I utilized several different research methods and sources to inform the design of this experience. Below you will find the most interesting and relevant insights from each. 

Source #1: The Baymard Institute  

Source Overview

The Baymard Institute conducts original large-scale research studies on all aspects of the online user experience, with a heavy focus on e-commerce. They currently have 110,000+ hours of research compiled into an actionable and user-friendly format.

I persuaded Scratch Kitchen’s CTO to invest in this research, so that we could focus our own testing on the elements of the site that are unique to our business. It was in our best interest to avoid spending our limited resources reinventing the wheel.

Insights and Learnings

• Users are more likely to complete a quiz if there is a clear overview of the process. This overview improves the experience by providing navigational anchors and giving the user a general idea of the length of the quiz.

  • Many subscription service sites, like HelloFresh, Dollar Shave Club, and Birchbox, require users to complete a quiz before purchasing their product. These quizzes are akin to the “Start Your Order” flow in both form and function. They involve a multi-step process, are a necessary barrier to purchasing the product or service, are often combined with checkout, and feature many steps comprised entirely of radio buttons.

• Users are more likely to complete the quiz when they can view products before answering questions or entering personal information.

• When the checkout process includes an optimized step to review order details, the conversion rate is 10% higher on average. An optimized order review page contains all information associated with the order, has only editable information, and is easy to skim.

  • Although this insight is specific to checkout, it is relevant to the “Start Your Order” flow for group orders, because the finality of the flow mirrors a standard checkout process. Without any further action from the administrative user, an order will be placed after the completion of this flow. 

• For delivery and pickup dates and times, a calendar-like design is easiest to use for most users.

• For location selection pages, “split view” layouts, where one side shows a list of locations and the other displays them on a map, are easiest to use and provide users with the best understanding of the physical location.

Source #2: White Label Site Analytics  

Source Overview

The original Scratch Kitchen website is a white label site that sits on top of the SaaS application, Olo. It is not specifically for catering or group orders, but I knew there was still plenty of relevant insight buried in its data. This website has a shorter version of the “Start Your Order” flow, where selections for location, order type, and wanted time are made.

Insights and Learnings

• The “Start Your Order” flow had the highest drop-off rate compared to other flows on the white label site.

• Compared to users who are prompted to enter their full address, users who initiate address searching are more likely to complete the white label site’s “Start Your Order” flow.

  • The white label site’s version of the “Start Your Order” flow allowed for users to submit their delivery address in two different ways, depending on which “Order Delivery” button they happened to click. 

The Strategic Solution

The research phase yielded the following three strategies. Subsequently, we conducted usability testing on multiple prototypes aligned with these strategies, ultimately selecting the final designs showcased in the “Work Preview” section.

Strategy #1: Ask for as little as possible by customizing the flow for each user.

Solution

I completely separated the flows for traditional catering orders and group orders. For traditional catering customers, they are not presented with the group order specific steps until checkout.

For group orders, I eliminated steps requesting previously stored information and included a review step that allows the user to scan and edit all information associated with an order. If a user is signed in before launching the group order flow, they will not be presented with the “Sign In/Sign Up” step. If they already have a payment method on file, card information will not be requested. All of the user’s personal information is stored when they sign up for an account, so that information will be available for review.

In a future iteration, we will consider implementing a reorder feature that duplicates all of the information from a previous order, so that returning customers can create new orders with the click of a button.

Strategy #2: Give users a sense of control and understanding over the process.

Solution

I included a clear step by step progress bar to guide users through the flow. This gives the user a sense of the time commitment involved, orients them to where they are in the process, and gives them the power to easily navigate back and forth among the different steps.

Making the static progress bar possible, while still tailoring each flow to the user, proved to be difficult to design. I accomplished this by pulling the “Order Type” step into a starting modal to completely separate the group order and traditional catering processes, while still launching them both from one CTA. I chose to still launch both from one “Order Catering” CTA, because I hypothesized that two CTAs would:

• Hurt the visual hierarchy of the menu page. I wanted the user to have one clear and visually prominent first step for getting their order started.

• Increase the cognitive load associated with the decision between a group order and traditional catering. By pushing that decision into a modal, it allowed me to include a concise description for each order type.

Strategy #3: Establish buy-in from the user before they enter this flow.

Solution

I knew the importance of timing and context when it comes to asking users for their effort and information. I decided to provide users with a non-location specific menu so that they could explore Scratch Kitchen’s offerings and decide if it fit their needs, before requiring them to provide any information.

The Outcome

We exceeded out goal of moving ≥ 80% of users who clicked “Order Catering” through the flow and into an active order state. Our beta users described this feature as clear and easy to use.