Rawaa

01Context

Rawaa is a B2B SaaS concept for restaurants and cafés in Jordan. Instead of asking guests to download yet another loyalty app, it starts with a QR code on the table and continues on WhatsApp: points for coming back, a private check-in after the visit, and an alert to the owner the moment something goes wrong, before it becomes a public review.

02Research

I combined desk research on WhatsApp, reviews and loyalty behaviour in Jordan and the region and built the product around three roles: the owner who pays, the guest who eats, and the staff member who has to pitch the system at the counter. Five assumptions from desk research shaped the design:

• Silent churn: guests avoid “making a scene”. They leave unhappy and simply never return.
• Defenceless owners: they discover 1-star reviews days after the incident.
• No visibility: owners rely on memory to know their regulars and can’t tell if a campaign brought anyone back.
• The app wall: loyalty tools that need a download lose casual and first-time guests.
• A short pitch: if the staff explanation is longer than one short sentence, staff are unlikely to say it.

A SWOT review of the two loyalty apps Jordanian venues already know showed the gap: both are good at rewards, neither helps an owner when a guest leaves unhappy, and both start with an app download.

03Five design principles

Each assumption became a rule. Every screen after this point was checked against these five.

• Zero friction

  Guests never download anything. A QR scan, then WhatsApp.

• The golden hour

  Feedback is requested within two hours of the visit, while it is fresh.

• Private first

  An unhappy guest reaches the owner before they reach Google Maps.

• One glance

  The dashboard answers “are my guests happy, and who are my VIPs?” without complex charts.

• Ten-word pitch

  Anything staff must say fits in one short sentence: “Scan to get points!”

04Structure and wireframes

I mapped the guest loop before drawing any screen: scan, welcome message, rating two hours later, then either a Google review request (happy) or a private complaint to the owner (unhappy), and a win-back offer if the guest doesn’t return in two weeks. Then I wireframed all 46 screens in grayscale: website, onboarding, the owner app and the mobile app. The 46 wireframes grew into 62 final screens once dialogs, states and the full mobile app were added.

05The owner app

The dashboard keeps to what an owner checks between orders: active guests, return rate, rewards issued and open complaints, each with its weekly trend, plus quick actions and VIP tiers by name. “WhatsApp connected” stays in the top bar so the owner sees first if the channel drops.

The Emergency Center is the heart of the product. Low ratings land here in the guest’s own words, so the owner can reply privately on WhatsApp within minutes instead of discovering a public review days later.

06Mobile companion

Owners are rarely at a desk. The mobile app focuses on Home, Customers, Complaints and Reports for one-handed checks. Complaints carry a live badge, and replying opens a sheet without leaving the list.

07Design system

Green borrows trust from the channel guests already use; yellow is saved for the one action that matters on each screen. Every colour pair was checked for contrast, and Lexend carries the English screens and Readex Pro the Arabic text styles, on one shared size scale.

08How I used AI

I used AI tools for speed, never for decisions. UX Pilot gave fast first drafts of layouts to compare directions, Figma Make turned static screens into a clickable prototype to test behaviour, and an AI assistant helped with repetitive large-scale work inside Figma. The research, the persona, the five principles and every final call were mine, and every generated screen was reviewed by hand.

09The rest of the owner app

The first prototype stopped at the dashboard, so I completed the owner app with the same shell, the same card system and one job per page: customers with tiers and an “at risk” filter, the six WhatsApp messages that run the loop, and campaigns that suggest an offer for the slowest day.

10Prototypes: the website and the owner’s first ten minutes

Start with the full Figma prototype, live. On desktop it runs from the landing page through sign-up and the four onboarding steps into every page of the owner app, with dialogs, toasts and dark mode. The mobile app runs from the splash screen to the last tab. No dead ends.

Load the live prototype

Runs in Figma: click the hotspots like the real product. Loads about 2–4 MB. Open full screen in Figma (new tab)

Prefer a quick look? Below are the key screens, one at a time, with notes.

Tap through the mobile flow from the Figma prototype: sign up, pick a plan, connect WhatsApp, then handle a complaint privately.

11Reflection

The biggest decision wasn’t visual, it was where Rawaa lives. Putting the guest side on WhatsApp removed the app wall both competitors hit, and made private feedback feel like a friend checking in rather than a survey.

• Next: moderated sessions with café owners in Amman, measuring time to first QR scan and time to resolve a complaint.
• Then: a full Arabic right-to-left version, and Telegram or SMS as fallback channels.