Mixbowl logo

Shipped Nov 2020

Mixbowl Menu Redesign

Enhancing the menu experience, increasing sales by 20%.

Visual designInteraction design

Mixbowl is a white-label online ordering platform for restaurants. It allows consumers to place orders directly on a restaurant's website instead of a 3rd party app.

Its business grew tremendously during the pandemic. With new restaurants signing up and new consumers ordering daily, it became clear that our menu design needed a update.

I jumped on board as a freelance designer to redesign the menu experience which resulted in a 12% increase in checkouts and 20% increase in sales.

Mobile web version of the menu experience.

OUTCOME

Since launching in November, we saw:

12% increase

in checkouts

20% increase

in sales

25% increase

in average order size

16% decrease

in shopping cart abandonment rate

THE PROBLEM

How might we make it easier for customers to add items to their carts and checkout?

42.28% of users bounce from the menu screen without ever checking out.

50.66% of these users never actually add an item to their cart.

  USER INTERVIEWS

I first chatted with four Mixbowl users to get their thoughts on the current menu.

Current menu experience for Mixbowl
Customers place orders directly on the restaurant's website.

I learned three critical pain points they experienced:

  • Navigation - Difficult to see everything the restaurant has to offer, a lot of scrolling.
  • Descriptions - Not enough info on each menu item.
  • Visual design - Interface was "unappetizing".

💡 HYPOTHESIS

Having a clear navigation system with item details up front would increase conversions.

A direct response from customer feedback, I explored 6 different navigation paradigms and other treatments with the thought of making it easier for users to browse, add to cart, and checkout.

Wireframe explorations set 1
Wireframe explorations set 2
Wireframe explorations set 3

After reviewing these explorations with my team, we came up with key principles that we'd use as a playbook:

  1. Provide specific information on menu items when possible. Customers need to know exactly what they're getting due to things like dietary restrictions.
  2. Browse and navigate easily. Customers get hangry. We need to make it as seamless as possible for them to find what they want.
  3. Fuel the hunger. Customers come here because they're hungry. We have an opportunity to make things more appetizing and get them excited for what's to come.

HI-FI DESIGNS

Bringing two ideas to life

After weighing out the pros and cons, we moved forward with Concept 3 and Concept 6 because they were more scalable had a simpler navigation.

USABILITY TESTING

I tested these two concepts assessing three important things:

  1. Time spent on adding an item to their cart and checking out.
  2. Success rate of adding items to their cart.
  3. Understanding of the different pages and hierarchy.
Hi Fi Designs
Concept 3 and Concept 6 Hi-Fi designs.

REFINEMENTS

I updated three things:

  • Merged the top-level horizontal tab anchors with the categories icon to handle both small and large menus.
  • Moved forward with Concept 3's item card design that removes chevrons because this tested well.
  • Displayed page titles for increased comprehension.
The menu's navigation experience.
Before and after snapshot of the menu design
Before and after snapshot.
Interaction design
Interaction flow of the last design.

FINAL TESTING

In the last round of testing, participants understood the navigation system and were able to seamlessly add to their carts and checkout.

We checked off our original guiding UX principles:

  • Provide specific info. We show description text when possible.
  • Browse and navigate easily. We have clear page titles and navigation actions.
  • Fuel the hunger. We display photos whenever restaurant admins add them.
Design iterations timeline
Progression of the different concepts.

LAUNCH

We launched the new menu experience in a few stores and then across all stores in November 2020.

Mobile web version of the menu experience.

OUTCOME

Since launching in November, we saw:

12% increase

in checkouts

20% increase

in sales

25% increase

in average order size

16% decrease

in shopping cart abandonment rate

  This confirmed our hypothesis of having a clear navigation system and displaying item details up front would increase conversions.

DESIGN SPECS

As a final touch, I documented different components and states.

Menu components and states
UI components documentation.

FUTURE ENHANCEMENTS

New challenges I'd love to work on

While I was only brought on to redesign the menu, these were other problems I was thinking about that would lead to a better performing menu design.

  • How might we encourage restaurant admins to add more delicious photos to their menu to boost order sales?
  • How might we encourage restaurant admins to include more descriptive text to their menu items in order to help consumers decide what to purchase?
  • How might we speed up the ordering process even more to make it easier for customers to add to their cart and checkout?

These were out of scope for my line of work at the time but i'd love to explore these if I were brought on again.

More product design case studies

Walmart's experience for Personal Shopper fulfillment mockups

Shipped Nov 2020

Walmart Shopper Performance

Exploring ways to empower Personal Shoppers to pick faster.

Product thinking, user research, exploratory

Boba Meets Bagel responsive web app mockups

Shipped Jan 2019

Boba Meets Bagel App

Connecting 40,000 asians through a niche dating app, leading to an acquisition.

Visual design, product thinking, prototyping

Passion project

Hack University content

Oct 2019 - now

Hack University Media Brand

Creating educational design content for a community of 85K people.

Content, community, branding

Other