01 — Overview
Role
UI/UX Designer
Platform
Mobile · Build Your Own Meal
Tools
Figma
The Task
Chefgood's Menu page is one of the most important screens in the Build Your Own Meal experience — it's where users browse, compare, and add meals to their cart. But the existing design made this harder than it needed to be. A distracting banner consumed prime real estate. Category navigation was hard to scan. And users had no way to compare meals by size or calorie content at a glance.
After a quick review of the current state, I identified three core areas to address: the banner, the category tab layout, and size differentiation between Regular and Low Calorie meal options. What followed was a systematic redesign of the entire page — from the top navigation down to the footer.
Design task
“Update the Menu page to be more user-friendly, accessible, and easy to browse.”
Before & After
The before state prioritized visual brand expression over usability. The after state inverts that priority — every element is there because it earns its place.
Before
Teriyaki Chicken
400 cal · Regular
Asian Chicken Salad
280 cal · Regular
After
Build Your Own Meal
5 meals · AUD $90.00
Teriyaki Chicken
400 calAsian Chicken Salad
280 cal ✦Design Decisions
Every element must either help users find a meal, understand a meal, or take action on a meal. Anything that does not do one of those three things gets cut or deprioritized.
Removed the banner
The full-width promotional banner consumed a significant portion of the screen's vertical real estate without adding informational value. Users entering this page are already in the Build Your Own Meal flow. Removing the banner immediately reclaimed space for the content users actually came to see: the meals.
Optimized Category Tabs layout
The previous tab layout displayed only the first few categories, giving users no sense of how many more existed. The redesign ensures most categories are partially visible at once. Each tab also displays a live count of how many meals the user has added from that category, turning navigation into a running tally.
Size toggle for Regular vs. Low Calorie
Within Chefgood, some meals have two sizes — Regular (400 calories) and Low Calorie (under 400 calories). The size toggle makes this distinction explicit and interactive, allowing users to switch between sizes inline and see how many of each size they've already added — all without leaving the menu.
Macros bar on every meal card
Each card now shows calories, protein, carbohydrates, and fat directly on the menu — not hidden behind a meal detail page. For Low Calorie meals, the calorie count is highlighted in green to give health-conscious users an immediate visual signal.
Updated Navigation Bar
The navigation bar redesign is part of a separate, related design task and is not covered in detail in this case study — but the updated bar is reflected in the final design to ensure the complete screen is presented in its final intended state.
Redesigned footer with progress bar, filter, and cart
The footer was elevated from a simple CTA into a persistent, information-rich action bar. A progress bar shows how many meals the user needs to add to unlock 5% and 10% discounts. The View Cart button is locked until the minimum order of AUD $75 is met, preventing premature checkout confusion.
Decision Breakdown
Design Rationale
Each change addresses a specific pain point in the menu browsing flow. Together, they create a screen that respects the user's limited screen space, supports informed decision-making, and reduces the distance between browsing and adding to cart.
Less banner, more meals
Removing the banner recovered 20% of the viewport for meal content — the single most valuable real estate on a product browsing screen.
Tabs that inform navigation
Partial tab visibility communicates scrollability. Category counts turn the tab bar into a live summary of what has been added from each section.
Size decisions made inline
The size toggle eliminates a round-trip to the meal detail page — users can make the Regular vs. Low Calorie decision without breaking their browsing flow.
Macros at a glance
Nutrition data is shown on the card, not hidden behind a tap. Low Calorie highlighting lets health-conscious users identify their options instantly.
Discount incentive built in
The progress bar turns the footer into a motivating element — users know exactly how many more meals they need to reach the next discount tier.
Locked cart prevents confusion
Disabling the cart button below AUD $75 prevents a frustrating dead-end checkout experience. The locked state communicates why, not just that it is unavailable.
Design philosophy
“Every element on a mobile menu screen is competing for attention. The best design decision is usually the one that removes something— not adds it.”