Beep: Group Ordering for Food UX

Tackling the hassle of group ordering food at work & home

Wei-Ee
UX Collective

--

Disclaimer: Yes! Many food delivery apps have now added group ordering features. This is a personal exercise before these features were launched.

Problem: think of your last group order 🤦‍♀️

It’s lunchtime in your office. The sun is blazing hot outside, your stomach rumbles and the notion of simply staying in grows increasingly palpable amongst you and your colleagues. Then suddenly, some enlightened colleague blurts out––“Hey, do you guys want to order food from X?”

Everyone puts off their work in abrupt relief, as a group naturally forms to discuss what food/restaurant to order from, the delivery wait time, the promos that seem promising and even an informal voting process ensues.

10 minutes later, the restaurant is finally selected. Everyone starts browsing the menu on their own phones as the person who suggested the idea for food delivery regrets as he is unceremoniously chosen to be ‘the waiter’ responsible for getting everyone’s order right, checking the delivery time and hearing the most unpleasant phrase–– “Thanks for ordering! I’ll pay you later, just let me know how much.” 😘

Looking at how people in a group is oddly cute and insightful.

Identifying the problems

  1. Manual group process of determining which restaurant/food
  2. One person is assigned to do the ordering for everyone
  3. One person is assigned to check on the delivery time
  4. One person receives manual payment from everyone
  5. One person receives all reward points and gives restaurant ratings

Users: mapping needs & priorities ✍️

It’s clear that the problems are burdensome for the assigned individual to handle everybody’s orders. But how can we better improve this? Let’s take work colleagues as an example persona to map out the basic process of ordering via most food delivery apps:

Process checklist for getting food delivered to you

Understanding the key steps in the delivery process gives emphasis to designing important screens and solving these problems within the app. At the same time, it was important to consider the aspirational needs for launching a new feature for the users.

Key priorities and principles

As a hungry workmate, I want this product feature to be:

  • Democratised: everyone plays their part in making the order work.
  • Simple/unobtrusive: fits with existing user flow, not just new & shiny.
  • Reducing effort: takes away the manual handling and responsibility.

With these building blocks in place, it was easier to craft a defined goal that would be a natural add-on to the existing app. The goal should be simple enough to resonate with anyone and easy to refer throughout the exercise:

To create a seamless group ordering experience in an existing food delivery app service — easy!

Solution: create a Venmo-like experience! 🤳

Before jumping into some ideation magic, I only had a specific problem with no particular app in mind. I decided to select Beep — a new food delivery service from StoreHub that takes a smaller commission % from local restaurants than the established players in the market.

User flow mapping

The first step was studying Beep’s current user flow/logic to understand the users’ decision-making process in ordering food. Next, I added a layer of group-ordering sequences that fits into the platform.

Current Beep platform: a mobile-friendly website that gets the job done — smart way to launch to market!

Wireframing interactions

Using my trusty whiteboard, the next process was making sense of the flow on a user-to-screen level. The goal was to introduce group ordering in a visible and non-invasive way & establish confidence in each step.

They say that product design is what happens behind the screens — here’s some raw thoughts.

Other considerations

Once the wireframes were complete, it validated the technical assumption of solving the group ordering problem with the app as the middleman. This means users do not need to manually sort choosing restaurants, food and payment! Other questions that arise during this process were:

  • Multiple user views: what does the initiator vs. the group see on-screen?
  • Simple invites: how can we easily invite people to a group order?
  • Social features: how can we make this an enjoyable social experience?

After that, I couldn’t help but develop a new UI visual language for Beep!

Introducing the new Beep! 🎉

… and a simpler way to order food in any group scenario.

1/6 Home: start a new group order anytime

In the new home and restaurant/menu screens, the ‘group order’ buttons are designed to be non-intrusive yet still grab your attention to try out the new feature. The home screen is designed to better showcase food selection.

2/6 New group order: invite your existing contacts easily

Utilising existing contacts from your phone, you can simply find your friends & family who have verified payment accounts on the app to share an order. The delivery location is confirmed before sending out the invites. A little confetti interaction signifies everyone is now together in a group order 🥳

3/6 Restaurant voting: make it easy, fun & democratic

A new social feature is helping to solve the issue of choosing a restaurant. Admins can choose 2–3 max. restaurants as options for the group to vote. The restaurant is chosen after everyone votes or the timer runs out.

4/6 Ordering: order for yourself & see orders from everyone

The ordering process is no different than ordering for yourself, which reduces cognitive load for the user and solves the ‘assigned waiter’ situation. What’s new is seeing what others are ordering to inspire your choice.

5/6 Payment: everyone pays for their own meal only

One of the biggest hassle in a group order is collecting payment from everyone. The app simplifies this by organising payments by individual orders, so the bill is automatically split.

6/6 Complete: everyone can check the food delivery status

Once everyone is complete with paying for their orders, a prompt screen appears to confirm your delivery address one more time. Everyone in the group can see the delivery status, not bothering one poor person anymore!

Project insights & takeaways ✅

Food delivery marketplaces are ever-evolving with substantial financial backing for market dominance and maximising network effects. In a world where the cheapest price and best promos win, perhaps redesigning scenarios users face daily may contribute the best product for everyone long-term.

  • Leverage in-app features: complex problems do not always need complex solutions. By utilising what exists like users’ contacts to invite, basic payment and menus — this helps eradicate 80% of the issue at hand.
  • Urgency can be exciting: group orders is a social activity so implementing a timer and voting mechanism creates a fun, collective experience.
  • Inform when it’s a group/individual process: inform users when the entire group is required to progress the next step, e.g. voting for a restaurant, ordering and paying before delivery etc.

You’ve reached the end of this case study! Thanks for reading.

Please feel free to drop your comments, ideas and feedback below or reach out to me at yingweiee@gmail.com if you’d like to collaborate together ☕️

--

--

Remote UI, visual & brand designer at Airfoil Studio. Crafting subtle interfaces with tiny visual surprises. www.weieeying.com