Sign in
A split sign-in: a calm, minimal form on one side and a photograph of the Kaaba on the other, all in the platform's gold.
- Username or email, plus password
- One gold primary button
- Register link for new pilgrims
All projects
umrahHub
Case study
UmrahHub: the official Umrah planning and booking platform
A unified digital gateway for pilgrims and service providers to plan, book and experience the journey of Umrah, from visa eligibility to full itinerary management.
- Client
- UmrahHub
- My role
- UI/UX design
- Platform
- Web, 1440px layout
- Languages
- Arabic and English
Overview
UmrahHub is the official planning, booking and experience platform for Umrah, the Islamic pilgrimage to Makkah and Madinah. It serves two groups: pilgrims planning their journey, and licensed service providers offering packages, flights and tourism experiences.
The design challenge was a dignified, trustworthy experience that reflects the spiritual significance of Umrah while staying simple enough for a global, multilingual audience, many of whom are not digitally native.
What it covers
- Sign in and OTP
- Umrah packages
- Package booking
- Reservation details
- Visa eligibility
- Provider homepage
The challenge
What had to be solved
A global, mixed audience
Dozens of countries and languages with very different digital literacy, on one platform.
Regulation and consumer-grade booking
Balance licensing, visa eligibility and service contracts with a simple booking flow.
Bilingual at 1440px
Make Arabic and English work seamlessly across a wide layout without losing reading hierarchy in either.
Available now, coming soon
Separate live services (Umrah permit, attractions) from upcoming ones (flights) without hurting trust.
Two audiences, one homepage
Speak to pilgrims and to business operators at the same time.
Workflow
From brief to screens
Brief and analysis
I take the brief from the client, then read it closely: goals, audience, constraints and what success looks like. Nothing is drawn until the requirement is clear.
Sketch
I start on paper: quick sketches of structure and key flows, so ideas are cheap to change before any pixel is placed.
Foundations and design system
I set the foundations: colour, type, spacing and core components. If the client already has a design system I build on it, otherwise I create one for the project.
Build the screens
With the system in place I assemble the screens from its components, so every page stays consistent and fast to build.
The process
How the work moved
Understand
Pilgrims, providers and the regulatory frame.
Flows
Sign in, OTP, package choice, pilgrim details, payment, reservation.
Design system
An editorial gold-and-grey system, written down.
Screens
Desktop screens in Arabic and English.
Handoff
Tokens and component rules for the build team.
The work
The platform, full length
umrahhub.sa
Hover to scroll the page
Selected screens
6 screens that carry the system
Verify your OTP
The OTP step keeps one task on screen: enter the code that was sent, with the timer and the resend option close by.
- Large separate code boxes
- Timer for the current code
- Resend option within reach
OTP, code entry
The same step in its in-progress state, with digits entered and the confirm action ready.
- Entered digits are clearly filled
- Confirm action stays in the same place
- Same layout as sign in for continuity
Book a package
Booking starts with a three-step progress bar, the chosen package and a running purchase summary, so pilgrims always know what they are paying for.
- Progress: package, pilgrim information, payment
- Package card with hotel details
- Purchase details beside the form
Pilgrim information
Step two collects each pilgrim's details in a list, marking entries as saved and verified as they are completed.
- One row per pilgrim
- Saved and verified status
- Step two highlighted in the progress bar
Package details
A package page with the price up front, tabs for hotels, transportation and description, and an action to download the itinerary.
- Price visible before anything else
- Tabs: hotels, transportation, description
- Download itinerary action
Design decisions
The thinking behind the choices
Editorial luxury
Warm, metallic golds against a spectrum of architectural greys: a gallery, not a template.
The no-line rule
Sections are separated by tonal shifts between surfaces instead of 1px borders.
Serif voice, sans utility
Noto Serif for headlines and Manrope for interface text, with generous line height.
Glass navigation
Floating navigation at 80% surface with a 24px blur lets gold tones bleed through.
Tonal layers instead of shadows
A white card on a slightly darker surface lifts without visual clutter.
Honest states
Live and upcoming services are clearly distinguished, so trust is never spent on a promise.
The brand
Colours the design speaks in
- #705837PrimaryActions and emphasis
- #8B704EPrimary containerGradient partner
- #FFF8F2SurfacePage background
- #FCF2E7Surface lowCards and sections
- #343028Inverse surfaceFooters and callouts
What I delivered
- Platform design
- Sign-in and OTP flows
- Booking flow
- Design-system spec
- Arabic and English layouts
Next case studyRaviaCare: a beauty and skincare e-commerce for the GulfView case study
