IMPACT

ROLES

Design Lead
Experience Strategy
Cross-functional Leadership

YEAR

2024

The restaurant menu is one of the highest traffic surfaces in GrabFood. It's where customers decide how they'd like to receive their order, evaluate promotions, browse available dishes, customize items, and ultimately decide whether to place an order.

As GrabFood evolved, this page gradually became home to an increasing number of product experiences. Pickup, Dine Out, Group Order, GrabUnlimited, promotions, menu translation, restaurant information, and other features all competed for visibility within the same limited space.

While each initiative solved an individual business need, the overall experience had become fragmented. Customers often had to scroll before seeing food, making it harder to understand what a restaurant offered and slowing the path to basket.

The challenge wasn't simply redesigning a page—it was creating a flexible framework that balanced customer needs, business priorities, and future product growth.

01 Consistency
Customers have already chosen to explore a restaurant. The menu should quickly reinforce that decision by surfacing familiar information and helping them find food without unnecessary friction.

02 Prioritizing Basket Building
The menu's primary purpose is to help customers discover food and build their basket. Limited screen space should prioritize elements that move customers toward ordering.

03 Surface customer value
Make promotions, memberships, and affordability benefits easy to discover so customers can make more informed purchasing decisions.

Reimagining the Decision Making Experience:

When reviewing the experience, one insight became immediately clear – when users are deciding on a merchant, their key question is "What am I going to eat?" 

Over 40% of clicks go to the top 10 items on the page, but only 2 could be shown in the current design. The merchant details section takes up nearly 60% of the overall screen and is underutilized, causing a high number of users to drop-off. 

We followed these three principles to ensure we had a north star during the design process and to ensure that every single asset (which is owned by a different cross-functional team) could have better understanding during alignment. 

Key improvements included:

• Simplifying and restructuring the architecture for Food experiences to be able to switch between different ways to enjoy food: Delivery, Pickup, or Dine Out

• Consolidating frequently used actions including Group Order, Schedule Order, Share, and Menu Translation into an area where users can find all tools that relate to the menu. 

• Surfacing promotions more intentionally upfront to see more at a time giving the signal that the restaurant might be more affordable.

• Restructuring restaurant information into a cleaner hierarchy

• Bringing food higher into the experience to encourage earlier discovery and basket building.

Rather than designing each feature independently, the page became a coordinated system where every component served a clear purpose.

Everyone wanted to be on top

Every team had a good reason to be at the top of this page, so most of the work was trade-offs. Here are some of the versions it took to get there.

Four dishes instead of two
Someone opening a restaurant is really asking one thing: is this what I want to eat? The most important information had to stay at the top, so we trimmed the header until the first screen went from showing 2 dishes to 4. Those dishes tell you what the place is known for and what you might like, even when the name or logo doesn’t say what it sells. You can decide without scrolling to find out.

You're hungry, you've already decided
Delivery, Pickup and Dine Out can each have a different menu and different prices, and Dine Out was a reference menu for when you’re eating at the restaurant. The Dine Out team understandably wanted it to be big and visible, and mirroring Food Home would have kept things consistent. But it didn’t make sense for the person on this page. They’ve already chosen a restaurant, and they’re hungry. They don’t need to be sold on another way to eat. So the options became a compact selector that opens a bottom sheet, the same pattern used for delivery options everywhere else in the app.

Group Order deserved better than a corner
Group Order was a big one. The team behind it was investing heavily to get people using it, so hiding it was never an option. My first instinct was to leave it in the top corner, because that’s where it had always lived. But once I looked at the page as a whole, it didn’t feel like a restaurant action at all. It’s something you do with the menu. So it moved in with Schedule, Share and Translate as a set of tools, and it got far more visible and much easier to find.

Bending the design system without breaking it

Almost everything above the menu is built from Duxton components, and that was a deliberate choice. Every time something didn’t fit, I had to decide whether to build something new or find a way to make what already existed work. A new component would have taken more time, and nobody else could have reused it.

So I worked closely with the design systems team, and we found creative ways to reuse existing components and custom slots to get what the menu needed. It shortened my timeline, and it kept the page consistent with the rest of the app.

Outcomes

The redesigned menu improved both customer decision-making and business performance across one of GrabFood's highest-traffic surfaces.

Customer Impact

• Improved Food Menu → Basket Rate (+0.016pp)
• Improved Basket → Checkout Rate (+0.018pp)
• Clearer discovery of restaurant offerings and menu items
• Reduced friction during ordering and item modifications

Business Impact

• Food Session CVR (+0.012pp)
• GMV per Pax (+2.42%)
• Group Order CTR increased (+88%)
• GrabUnlimited Subscriptions (+2.4%)