Loryn Chen
Work  
Mixbowl Menu Redesign Walmart Express Delivery Boba Meets Bagel Dating App Hack University Media Brand
About Resume
Mixbowl logo

Mixbowl Menu Redesign

Enhancing the online ordering experience for hungry customers.

Launch Mixbowl's site

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 facelift.

I jumped onboard as a freelance designer to redesign the menu experience which resulted in larger basket sizes and more checkouts.

My Role

Product Designer

Researcher

Team

Kim Borah (PM)

John Lee (Engineer)

Me (Freelance Designer)

Duration

3 weeks

Platforms

Web, mobile

Mobile web version of the menu experience.

OUTCOME

Satisfying that crazy hunger

In one month, we saw:

  • 12% increase in checkout rates.
  • 25% increase in basket size.
  • A more flexible navigation system.

THE PROBLEM

How might we create a new menu experience for customers to make it easier for them to add to their cart and checkout?

Data showed us that a good chunk of users browse a restaurant's menu but hardly ever add anything to their cart - let alone checkout. We set off to investigate.

UNDERSTAND

Looking at the data

The menu is the most interacted screen. It's a critical touchpoint for the consumer. Looking at our data, we found some interesting things.

  • 45% of users that get to the menu screen bounce without ever checking out.
  • Of the 45%, about half never add an item to their cart.
  • While Mixbowl is a responsive web-app, about 67% of consumers use their phones.

USER INTERVIEWS

I 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.

Three pieces of feedback that helped me as I went through my designs:

  1. A lot of scrolling.
  2. Not enough information on individual menu items.
  3. Interface was "unappetizing".

IDEATION

Using these learnings, I began sketching out six different layouts and ideas.

Wireframe explorations
6 different concepts.

Together with my team, we discussed pros and cons of each. These explorations (along with our user interviews) helped develop our three guiding principles for the menu:

  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

C3 and C6 seemed the most promising so I fleshed them out more.

Restaurant admins actually have the ability to add menu item photos and descriptions. However, we never displayed that data on the customer-facing side.

So, to provide more specific information and to get customers excited about ordering, I thought it'd be a a good idea to pull that data in if we have it.

Hi Fi Designs
C3 and C6 Hi-Fi designs.

USABILITY TESTING

Bringing these to users again, I learned three important things:

  • In C3, the horizontal scrolling tabs make it difficult to get a holistic view of the menu.
  • In C6, the menu icon makes it hard to discover the menu categories in a list dialog view.
  • Because this was all happening in the browser, navigation and pages needed to be very clear.

REFINEMENTS

I made refinements and we shipped a hybrid model that used both top-level horizontal tab anchors and the menu category icon. This ensured more flexibility in the interface.

LAUNCH

We launched the new menu experience in a few stores and checked off our guiding 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.
Mobile web version of the menu experience.

OUTCOME

Satisfying that crazy hunger

In one month, we saw:

  • 12% increase in checkout rates.
  • 25% increase in basket size.
  • A more flexible navigation system.

DESIGN SPECS

I documented the key page flow and different component states.

Menu page flow and components
UI components documentation.

KEY TAKEAWAYS

In a two-sided marketplace, it's important to know how one experience can affect both parties. It was critical for me to get feedback from both users and constantly empathize for the two personas.

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 CASE STUDIES

Walmart's associate experience for Express fulfillment mockups

Walmart Express Delivery

Providing a speedier delivery service to customers.

Work, UI, UX, research

Read case study
Boba Meets Bagel responsive web app mockups

Boba Meets Bagel Dating App

Connecting Asians through a niche dating app.

Passion project, UI, UX, research, branding

Read case study
Hack University content

Hack University Media Brand

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

Passion project, UI/UX, branding, social media content

Read case study