UX Flows – B2C Web & Mobile
Core B2C user experience flows across Web and Mobile platforms
1. Purpose
This document describes all core B2C user experience flows across both Web and Mobile. The flows are strictly derived from the raw UI analysis.
- Cross-platform behavioral consistency
- Unified naming for steps, statuses, and actions
- A fully mapped end-to-end journey for customers
- Technical clarity for frontend, mobile, backend, QA, and product teams
2. Included B2C User Flows
- Authentication Flow (Signin/Signup)
- Home & Exploration Flow
- Trips Browsing & Filtering Flow
- Trip Details Flow
- Booking Flow (Web + Mobile)
- Payment Flow
- Booking Confirmation Flow
- My Bookings Flow
- Trip Rating Flow
- Contact Us Flow
- Notifications Access Flow
3. Cross-Platform Alignment Principles
CP-1 — Same step naming
عرض الرحلة, التفاصيل, البرنامج اليومي
CP-2 — Booking flow steps must match
1. اختيار الرحلة 2. إدخال بيانات المسافرين 3. الدفع 4. تأكيد الحجز
CP-3 — Status labels must match exactly
قادمة → UPCOMING, مكتملة → COMPLETED, ملغاه → CANCELLED
CP-4 — Currency format
Always SAR (never $ even in placeholders)
CP-5 — Deep linking rules
Any card → goes to Details, Notifications → open relevant screen
4. Flow #1 — Authentication Flow
4.1 Signup Flow
- User opens 'إنشاء حساب'
- Enters: الاسم بالكامل, البريد الإلكتروني, رقم الجوال, كلمة المرور, تأكيد كلمة المرور
- Optional: Sign in with Google/Facebook
- System validates → creates account
- User is redirected to Home
4.2 Login Flow
- User opens 'تسجيل الدخول'
- Enters: البريد الإلكتروني أو رقم الجوال, كلمة المرور
- System validates credentials
- If valid → redirect to Home
- If invalid → show error message
6. Flow #3 — Trips Browsing & Filtering (Slice 8)
جميع الرحلات (active)سياحيةعمرة
Trip Card contains:
- صورة
- شارة المدة: '6 أيام / 5 ليالي'
- شارة الموقع
- عنوان الرحلة
- أقرب موعد (Slice 8)
- وسوم النشاط
- السعر: 'من X ر.س'
- زر 'احجز الرحلة'
8. Flow #5 — Booking Flow (Slice 3+4+8 SSOT)
- Pre-Step: Select scheduled date from Trip Details (Slice 8)
- Pre-Step: Login check (guest allowed)
- Step 1A: Contact info (Email + Phone — ONCE only)
- Step 1B: 'اختر من المسافرين المحفوظين' OR manual entry (Slice 4)
- Step 1C: Traveler forms by trip type (Domestic/International)
- Step 2: Payment
- Step 3: Confirmation — shows selected scheduled date
Validation:
- Scheduled date: ACTIVE + has capacity + not past cutoff
- Passport expiry ≥ 6 months
- Saved traveler passport check → prompt to update if expired
- Document type + number required
9. Flow #6 — Payment Flow
HyperPaySTC PayMadaApple Pay (iOS only)SADAD
- User selects payment method
- Redirect to payment gateway
- User completes payment
- Callback to backend
- If success → booking confirmed
- If failed → show error, allow retry
11. Flow #8 — My Bookings Flow
كل الحجوزات (All)قادمة (Upcoming)مكتملة (Completed)
Card Info:
- Trip image + name
- Booking reference
- Status badge
- Date range
- Number of passengers
- Total amount
Actions:
- View booking details
- Cancel booking (if allowed)
- Rate trip (if completed)
12. Flow #9 — Trip Rating Flow
Trigger: Booking status = COMPLETED
Screens:
- Push notification invitation
- Rating screen with 5-star system
- Text review (optional)
- Submit rating
Rateables:
- الرحلة إجمالاً (Overall Trip)
- الفندق (Hotel)
- الباص (Bus)
- السائق (Driver)
- الاستراحات (Rest Stops)