Bento Ordering — empowering restaurants to have complete ownership of their customer relationships by providing a restaurant-branded online ordering experience.

Background

Problem:

• Restaurants require an online ordering system that offers a branded presence similar to their existing BentoBox website while providing full control over their customer relationships.

Constraints:

• Incorporating all of the existing BentoBox design variants into the online ordering experience was deemed technically challenging due to an infinite number of potential color combinations based on the current list of 7,000 BentoBox customers.

Hearing from the users

After surveying BentoBox customers about their experiences with third-party online ordering services, we discovered that their primary frustrations were:

• No control over the guest experience

• Loss of guests by redirecting them to a third-party website

• Lack of access to valuable customer data such as email addresses

Upon further analysis, we discovered that the consistent issue across their websites was the "Order Now" call-to-action, which directed guests away to third-party services and resulted in lost opportunities to build and maintain customer relationships.

Competitive Research

To gain a better understanding of the online ordering process and how competitors handled orders for single and multiple-location restaurants, I compiled a list of the most common third-party online ordering services used by BentoBox customers:

• Brandibble

• ChowNow

• Caviar

• Square

I then conducted both pickup and delivery orders through each of these services:

• Entering my contact information

• Choosing/customizing a menu item

• Checkout

• Post-checkout notifications

• Picking up my order at the restaurant

• Receiving marketing postcards and promo emails

Findings

The findings showed similar deliverables across all the competitors. I narrowed down the main goal deliverables to be included in the user flow explorations.

• Setting Guest Intentions -
  A guest is correctly funneled into the right based on the desired location, desired fulfillment time, and what time of day the guest is viewing the website.

• Viewing Menus and Products -
  A guest is viewing the correct menu and its sections for the desired fulfillment date they selected. The guest should also be able to view the details for each product and easily add many items to a cart.

• Managing a Cart -
  A guest can easily add, edit, and remove cart items from their current cart at each page on the front end.

• Checkout & Purchase -
  A guest can easily add personal information allowing them to successfully purchase the contents of their cart.

• Post Checkout & Notifications -
  A guest can view their order progress and receive updates from the restaurant.

All competitors utilized a form of marketing in their online ordering experience. It was decided that we would provide the following marketing materials.

• Postcards

• Promo & Evergreen e-mail

• Social media posts (Instagram & Facebook)

• One sheeter - Tips for success

Flow Explorations

The flow explorations consisted of a single location, multiple locations, and an edge case for directly visiting a URL for an item or an unavailable item.

• Single Location -
  Customers are required to select either pickup or delivery. The main difference between how one approaches multiple locations vs single location is the landing page.

  • Multiple locations allow the customers to search or browse through all locations.

  • Single location shows the fulfillment method page as the first experience.

• Multiple locations -
  Customers can input their address to search for the nearest location or scroll through all locations available.

• Directly visiting a URL for an item or an unavailable item -
  Edge case for when the guest visits a menu item link directly and the item may or may not be available.

Wireframes

I started with mobile as it ensures that the users' experience is seamless on any device. I quickly mocked up the wireframes to gather feedback from Product, Engineering, and Bentobox customers.

In between iterations, I worked closely with the engineering team to quickly prototype the basic structure of the wireframes, interactive animation, and code logic.

Notifications

I worked closely with the product marketing manager to determine the copy for the post-checkout order status, SMS, and e-mail notifications. The restaurant’s customers would receive email and SMS notifications while ordering with Bento Ordering.

Marketing

The marketing items included social media posts (Instagram & Facebook), postcards, promo e-mail, evergreen email, and one sheeter.

The team chose to go with a third-party printer Canva, an accessible design tool, and printing vendor. We contacted their customer support representative to help us create specific URL links for BentoBox customers. This method allowed us to create easily editable templates which gave owners the freedom to order as many items as they need without constantly having them go through us.

This method would require quality control. We will need to educate our BentoBox customers (example: what files are appropriate to upload). I worked closely with the product marketing manager to create a guide to assist the onboarding managers to ensure they have the knowledge and tools moving forward.

Design Variants

The design goal is to include the restaurant’s brand presence. We had thousands of restaurant websites and no two were alike. If we were to customize each Bento Ordering experience to its restaurant, it would be a nightmare for our engineering team.

I worked closely with the engineers to understand the backend variants we can pull from existing Bentobox restaurant websites. After multiple iterations from quick comps and prototypes, we were able to determine the variants we can utilize on Bento Ordering:

• Logo

• Primary Color

• Secondary Color

The next step was deciding the components that would utilize these variants. I experimented with brand color combinations from multiple BentoBox restaurant websites. The custom variants that will be hooked up to the primary color and secondary color are:

• Contained Button

• Text Button

Throughout this process, it was obvious that not all our restaurant customers had the best brand combination and wouldn’t pass the WGAG (Web Content Accessibility Guidelines). I shared my concerns with the team and we came up with a solution to ensure that WGAG will not be overlooked. I worked with the director of product and created a quick guide to educate our onboarding team regarding WGAG in their future setup for Bento Ordering.

Usability testing

I conducted a moderated usability testing where the users interact with a prototype while their actions and reactions were being recorded. The results of user testing indicate an overwhelmingly positive response which the key stakeholders were very satisfied with. This allowed us to finalize any necessary changes to the designs and quickly move closer to launch.

Final Designs

The MVP utilizes BentoBox’s design system and a Material Design-inspired interaction model. This design decision was based on our time constraint, limitation of design variants, and simpler code which allowed future development with ease.

Outcome

Bento Ordering launched beta to a selection of qualifying BentoBox customers at the end of August 2019. It was well-received and many BentoBox customers have shown an increase in ROI within the first month.

In future iterations, the goal is to continue to implement more design variants to be closer to a branded experience similar to a BentoBox restaurant website. We’ll continue to measure success by observing the customer dashboards and having the customer support team routinely reach out for feedback.