Marhaba – WhatsApp based Ordering Menu
Marhaba is a digital platform that streamlines restaurant operations with tools like interactive menus, QR codes, and analytics.
Introduction: The “Marhaba” Project
Marhaba is a white‑label food ordering app that lets restaurant customers in Saudi Arabia quickly order delivery, dine‑in, pickup, or car pickup from a single, branded mobile experience.
The app connects directly to Fooder’s digital menu and WhatsApp infrastructure, so every order is structured, trackable, and easy for branches to fulfill across busy cities in the MENA region.
Business Context & My Role:
I worked as the end‑to‑end UI/UX designer on Marhaba. I was responsible for:
The Problem:
Before Marhaba, the customer journey looked like this:
For busy diners in Saudi Arabia who are used to frictionless mobile experiences, this felt slow and confusing. Restaurants were also missing out on structured data like order history, favorite items, and clear feedback scores.
Design challenge:
Create a mobile app that keeps Fooder’s WhatsApp‑first foundation, but gives customers a seamless, app‑like ordering experience with clear steps, fewer errors, and better visibility on the status of each order.
Goals & Success Criteria:
From day one, the design goals were:
- Reduce friction in ordering:
Make it possible to go from “open app” to “order placed” in a few focused steps, even for first‑time users. - Support multiple order modes:
Handle delivery, dine‑in, pickup, and car pickup with one consistent UX pattern so restaurants can adopt new modes without redesigning every time. - Improve accuracy for restaurants:
Ensure that the app sends structured orders (items, modifiers, branches, times, addresses) that map cleanly into Fooder’s dashboard and existing kitchen workflows. - Increase repeat usage:
Make it easy to log in, see previous orders, reorder favorites, and feel confident about delivery time and status.
Design Process
Understanding Users & Constraints:
I started by mapping two primary user types:
On the technical side, I gathered constraints around:
This helped define a flow that feels familiar to users in Saudi Arabia and the wider Middle East, while still staying compatible with existing systems.
Defining the Ideal Flow:
From there, I designed one clear, linear journey:
Each step is supported by a dedicated screen, a single primary action, and contextual feedback so users never wonder “what now?”.
Key flows and UX decisions
Onboarding with WhatsApp:
Home & Menu Experience:
Order Type & Time:
Address Selection & Delivery Coverage:
Checkout & Payments:
Order Tracking & Rating:
Visual Design & Localization
From a visual standpoint, Marhaba uses a clean, light interface with strong accent colors for actions and alerts. Food photography takes center stage, supported by plenty of white space for readability on smaller screens.
The UI is designed with localization in mind: it works in both English and Arabic (including RTL layout), uses regionally familiar iconography, and displays currency and time formats that match customer expectations in Saudi Arabia and the GCC.
Impact & Results (How I present it):
Depending on what numbers you can share, here is how I frame the impact:
Even without exact figures, the case study demonstrates how thoughtful UX across onboarding, ordering, and tracking can directly support restaurant revenue and operational efficiency in a WhatsApp‑first market like Saudi Arabia.
What I learned:
Working on Marhaba reinforced three key lessons for me:
Even without exact figures, the case study demonstrates how thoughtful UX across onboarding, ordering, and tracking can directly support restaurant revenue and operational efficiency in a WhatsApp‑first market like Saudi Arabia.
Overall, stakeholders felt Marhaba made the Fooder experience look more premium and reliable, and they were especially happy that it supported delivery, pickup, and dine‑in without adding extra complexity for their teams.
Stakeholder Review
The engineering team consistently mentioned that the handoff was clear and predictable, with flows, edge cases, and components documented in a way that sped up implementation and reduced back‑and‑forth.
Developer handoff
Users generally described the app as “straightforward” and “faster than chatting,” appreciating how it remembers their details, guides them step by step, and keeps them informed about order status without confusion.
