Start Your Order
The “Start Your Order” flow is the process where the system collects all of the information needed to start a user’s order and open a new cart.
-
Lead UX Designer for research, UX, and UI.
-
Scratch Kitchen is a clean-label food delivery platform that exclusively features natural and organic restaurants made in-house and from scratch.
Customers are empowered to choose from a huge selection of sustainable and highly customizable food, all purchased in a single checkout.
-
Scratch Kitchen’s catering business had potential but suffered from a poor user experience that drove customers to third-party platforms like ezCater. We designed a custom catering and group ordering platform that made large orders simple to place and manage, helping Scratch Kitchen reclaim revenue, strengthen its brand experience, and scale its catering business.
Overview
The “Start Your Order” flow is the process where the system collects all of the information needed to start a user’s order and open a new cart.
This information is needed to ensure that:
The user builds a cart from the correct menu.
The order can be fulfilled based on the user’s requirements (location, time, etc.).
The correct cart type is created according to the order type.
There are two order types that this process must account for:
Group order: the administrative user creates and pays for the order, but each group member adds their meal to the administrative user’s cart.
Traditional catering order: the administrative users builds the entire cart and pays for the order.
Starting a group order is inherently more complex and time consuming than starting an order on a typical restaurant e-commerce site. This is because more information is initially required from the user.
Goal
Research
Solution
Outcome
Prior to identifying the most important metrics, I analyzed data from the original Scratch Kitchen website, a white label site focused on typical delivery orders, and combed through the Baymard Institute's restaurant e-commerce usability data.
This helped me to better understand how this feature would play into the product’s conversion rate. In particular, it stuck out to me that the white label site’s most comparable feature to the “Start Your Order” flow accounted for its single highest drop off point. With this information, I knew that the most impactful metric associated with this feature was the drop off rate among users who reached the flow.
So, I set a target to move ≥ 80% of users who clicked “Order Catering” through the flow and into an active order state. This would be a substantial improvement compared to the white label site.
I also identified other “sub-metrics” that could influence the drop off rate, like error rates and the average completion time (ACT) for the flow. Identifying these metrics helped me focus the team on an overarching goal, which allowed us to quickly settle debates, confidently make decisions, and manage scope creep.
What Information Do We Need to Collect?
Before diving into the research, I defined exactly what information this flow needed to collect from the user for each order type. I knew that my research would be more effective if I had a clear understanding of what I was designing.
I utilized two 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 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 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 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..
-
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.
-
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.
-
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.
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.