Umrah hotel discovery and group inquiry prototype

HappyHome Stays

A bilingual English and Arabic prototype for discovering Makkah and Madinah hotels and sending family or group Umrah stay inquiries.

View live prototype (opens in a new tab)

Role: Product research, UX/UI design and front-end development
Platforms: Web
Status: Prototype
Timeline: 2026
Client: HappyHome Realestate

Web application
Business system

Design prototype

Overview

HappyHome Stays is a clickable, responsive prototype of a hotel discovery and group inquiry platform for Umrah travelers staying in Makkah and Madinah. I built it as a Phase 1 concept for HappyHome Realestate, a real estate business in Riyadh.

Visitors can browse and filter hotels, compare room capacities and estimated distances to Masjid al-Haram or the Prophet's Mosque, and send one structured inquiry for a family or a large group. An admin demo shows how the operator's team would then track those inquiries and manage hotel listings.

It is a front-end prototype with no backend. Every hotel, price, star rating and distance in it is fictional sample data, and the interface labels it that way.

Built for: Umrah families, large Umrah groups, group organizers and travel agents, plus the operator's internal team who handle their inquiries.

The problem

Before designing anything, I studied more than 35 Pakistani, Saudi and global hotel and Umrah platforms. Global booking sites are built around one room and two adults booking instantly, with no way to ask for a group quote. Many Pakistani Umrah sellers collect leads over WhatsApp but offer no real way to explore hotels.

Distance to the Haram is shown inconsistently across these sites (in feet, kilometers or vague text), usually without saying whether it is a walking route or a straight line. Room occupancy is rarely visible on hotel cards, and Arabic coverage is often incomplete.

The solution

I chose an inquiry-first design instead of a booking engine. Hotel cards lead with room capacity and a clearly labeled straight-line distance, and a group can describe all its room needs in one inquiry that returns a reference number. Booking and payments are left out of the first version on purpose.

The site is natively bilingual, with full right-to-left Arabic rather than a translation layer on top of English. On the operator side, a demo dashboard shows inquiry statuses, internal notes and listing management, so the client could see the full loop from a guest's inquiry to staff follow-up before committing to a production build.

Main features

What the prototype demonstrates, screen by screen.

English and Arabic with full RTL
Every page lives under a language prefix (/en or /ar), and switching language flips the document direction, layout and typefaces. Dates and SAR prices are formatted for each locale, with an option for Arabic-Indic digits.
Homepage search
City tabs for Makkah and Madinah, a neighborhood selector, check-in and check-out dates and a guests and rooms picker. The homepage also shows featured hotels, destination sections and an FAQ.
Filtering and sorting
Results can be filtered by neighborhood, an indicative price range, star category, facilities and family or group suitability, then sorted by price, distance or stars. There is a grid and list toggle and a dedicated mobile filter panel.
Hotel detail pages
Each hotel has a photo gallery with a lightbox, room cards showing bedding, occupancy, size and an indicative nightly rate, an amenities list and a distance block. A sticky sidebar starts an inquiry with the dates and guest count already filled in.
Family and group inquiry
A structured form covers city, property, dates, adults and children, rooms, room configuration, traveler category and special requirements, with field-level validation. Submitting it creates a reference code and states clearly that it is not a booking and no payment is taken.
WhatsApp hand-off
Click-to-chat buttons open WhatsApp with a pre-filled message. They stay hidden until a verified WhatsApp Business number is set in the configuration.
Admin dashboard demo
Staff can search and filter inquiries by status, open an inquiry to change its status and add internal notes, and manage the hotel catalog: add bilingual listings, mark them featured, or set them to active, draft or archived.
Honest sample-data labels
Every price, star rating and distance carries a sample or indicative badge. Distances are described as straight-line map estimates, never as walking time.

Inside the product

Screens from the clickable design prototype, not a released product.

Arabic right-to-left version of the HappyHome Stays homepage with a Reem Kufi headline and a mirrored search widget — The Arabic homepage, with a mirrored layout and its own typefaces.

HappyHome Stays hotel search results for Makkah with a filter sidebar for neighborhood, indicative price, star category and suitability, plus sorting and a grid and list toggle — Search results with filters, sorting and straight-line distance notes.

HappyHome Stays featured hotel cards showing photo carousels, sample star ratings, estimated distance to the Haram, guests per room and indicative SAR prices — Hotel cards lead with distance and room capacity, all marked as sample data.

HappyHome Stays hotel detail page for a sample Makkah hotel with a breadcrumb, sample star rating, estimated distance to Masjid al-Haram and a photo gallery with thumbnails — A sample hotel page, with a banner noting that rates and distances are indicative.

HappyHome Stays family and group accommodation inquiry form with preferred city and property, dates, adult and child counts, rooms, travel category and room configuration — The group inquiry form, which makes clear that no payment is taken.

HappyHome Stays homepage on a phone with the headline 'Find Your Stay in Makkah & Madinah', Makkah and Madinah tabs, neighborhood, check-in and check-out fields and a Search button — The homepage search stacks into a single column on mobile.

HappyHome Stays hotel search on a phone with a city switcher, collapsible filter panel, sort control and the first hotel card — The search page on mobile, with filters collapsed into a panel.

Development and architecture

HappyHome Stays is a single-page React app written in TypeScript and built with Vite. Routing uses React Router with a language segment in every URL, and styling is Tailwind CSS with custom design tokens, self-hosted fonts and custom SVG arch and geometric pattern elements.

There is no server. All data sits in a React Context store seeded with 13 fictional hotels and a few demo inquiries, and it is saved to the browser's localStorage. An inquiry submitted on the public site appears straight away in the admin dashboard in the same browser, which makes the whole flow demonstrable without a backend.

The production build is deployed as static files under a sub-path on Apache hosting, with a rewrite rule so client-side routes resolve. I also documented which parts are simulated and what a production version would need, such as a database, email delivery, the WhatsApp Business API and authenticated admin access.

Type-checked translations: I wrote the copy dictionaries so that TypeScript requires the Arabic text to match the shape of the English text. A missing or misnamed Arabic string fails the type check instead of showing up blank on the page.
Language in the URL: Routes start with /en or /ar. The app detects the preferred language and redirects missing or invalid prefixes, so every page has a shareable address in both languages.
Script-specific typography: English and Arabic each get their own display and body typefaces (Marcellus with IBM Plex Sans, Reem Kufi with IBM Plex Sans Arabic), so the Arabic version is designed rather than simply mirrored.
In-browser data store: A React Context store persisted to localStorage stands in for the backend. It keeps the public site and the admin demo in sync and includes a reset option to restore the demo data.
Configuration-driven features: WhatsApp buttons and the inquiry backend only switch on when the relevant environment variables are present. The brand name sits in one config file because it was still provisional, and the deployment base path is configurable.
Licensed image pipeline: A Node script fetches selected Wikimedia Commons photos, converts each one to WebP at three widths with sharp and records attribution data. The site serves the images responsively and lists the credits on its own page.