CASE STUDY
FsiBoard
Umrah and Hajj Management System Dashboard built to monitor pilgrim data and daily operations efficiently in real-time.
01
The Problem
Prior to this platform, Hajj and Umrah travel agencies managed thousands of pilgrims using fragmented systems: primarily chaotic Excel spreadsheets and unstructured WhatsApp groups. This led to scattered travel documents, lost passport data, uncoordinated flight schedules, and severe miscommunication between the central office administrators and the on-the-ground guides (mutawwifs) in Saudi Arabia. The lack of a centralized "source of truth" resulted in heightened anxiety for both the agency and the pilgrims.
02
Research & Insights
Through contextual inquiry and interviews with travel agency staff and field guides, we uncovered the core bottlenecks in their daily operations.
Insight 1: Time Drain
Administrators spent over 4 hours daily just manually reconciling pilgrim manifests and checking visa statuses across different portals.
Insight 2: Mobile Dependency
Field guides (Mutawwifs) needed a mobile-first way to update pilgrim statuses (e.g., "Arrived at Hotel") instantly without navigating complex desktop UIs.
03
Dual-Role User Flow Architecture
Two complete flows — Admin (desktop-first) and Mutawwif/Field Guide (mobile-first) — showing how both roles interconnect in real time. Each includes user actions, system responses, and decision nodes.
flowchart TD
A([👤 Admin logs in — Desktop]) --> B[Dashboard loads\nLive KPI widgets render]
B --> C{Critical alerts\nflagged?}
C -- 🔴 Yes → red badge --> D[Click alert badge\nExpanded alert drawer opens]
D --> E{Alert type?}
E -- Visa Expiry Warning --> F[Navigate to Manifest\nFiltered by expiry risk]
E -- Flight Delay Detected --> G[Navigate to Flight Board\nAffected group highlighted amber]
E -- Missing Document --> H[Navigate to Doc Verification\nIncomplete records queue]
C -- ✅ No alerts --> I[Review KPI cards\nVisas approved · Pending · Rejected]
I --> J[Navigate to Pilgrim Manifest]
F --> J
H --> J
J --> K[Search or filter by\ngroup · status · flight]
K --> L[Click pilgrim row\nSide panel slides in — full profile]
L --> M{Document status?}
M -- ✅ All verified --> N[Mark pilgrim Ready\nBadge turns green · log entry created]
M -- ⚠️ Pending review --> O[Open doc preview modal\nCompare vs requirements]
M -- ❌ Missing or invalid --> P[Flag as Incomplete\nAuto-notif pushed to mutawwif]
O --> Q{Document valid?}
Q -- ✅ Approve --> R[Click Approve\nTimestamp + admin ID logged]
Q -- ❌ Reject --> S[Click Reject → enter reason\nReason stored · visible to mutawwif]
R --> N
S --> T[Pilgrim enters\nAction Required queue]
N --> U[Navigate to Flight Board]
G --> U
T --> U
U --> V[View flight timeline\nGroups colour-coded by status]
V --> W{Flight changes\nneeded?}
W -- Yes --> X[Drag group chip to\nnew flight slot]
X --> Y{Conflict\ndetected?}
Y -- ✅ No conflict --> Z[Save · push to mutawwifs' devices\nActivity log entry created]
Y -- ❌ Overbooking --> AA[Warning modal:\nSuggest alternative flight]
AA --> X
W -- No changes --> Z
Z --> AB([✅ Session complete\nAll changes logged and synced])
style A fill:#0EA5E9,color:#fff,stroke:none
style AB fill:#10B981,color:#fff,stroke:none
style C fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style E fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style M fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style Q fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style W fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style Y fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style T fill:#2d0a0a,color:#EF4444,stroke:#EF4444
style AA fill:#2d1f03,color:#F59E0B,stroke:#F59E0B
style P fill:#2d1f03,color:#F59E0B,stroke:#F59E0B
Entry node
Success end
Decision node
Error / flagged state
Warning / conflict
Insight 1 (Time Drain) addressed: The alert badge system surfaces critical issues within 10 seconds of login — no spreadsheet scanning. Approve/Reject is a single click with auto-logged timestamps, eliminating the 4-hour daily reconciliation entirely.
flowchart TD
A([📱 Mutawwif opens app\nmobile device]) --> B[PIN or biometric login\nNo complex password form]
B --> C{Network\navailable?}
C -- ✅ Online --> D[Live sync · admin updates\npull instantly]
C -- 📴 Offline --> E[Cached group loads\nAmber offline badge shown]
D --> F[Home: My Group list\nPilgrim status cards visible]
E --> F
F --> G{Mini KPI row\nshows issues?}
G -- ⚠️ Amber count > 0 --> H[Tap amber KPI chip\nList filters to problem pilgrims]
G -- ✅ All clear --> I[Scroll full group list]
H --> J[Tap pilgrim card\nStatus sheet slides up]
I --> J
J --> K{Action needed?}
K -- Update location --> L[Tap Update Status\nPre-set tile grid opens]
L --> M[Select tile:\nArrived Hotel · At Haram\nBoarded Bus · Needs Help]
M --> N[Confirm tap\nHaptic + green flash]
N --> O{Online?}
O -- ✅ --> P[Status pushed to server\nAdmin dashboard updates instantly]
O -- 📴 --> Q[Status queued locally\nSyncs when connection resumes]
Q --> P
K -- Report an issue --> R[Tap Report Issue\nIssue type selector opens]
R --> S[Select: Health · Lost Item\nMissed Bus · Passport Issue]
S --> T[Optional note — 200 chars max\nLarge tap-target text field]
T --> U[Submit\nAdmin alert badge fires instantly]
K -- View documents --> V[Tap Documents tab\nThumbnails load — view only]
V --> W{Admin-flagged\ndocuments?}
W -- ❌ Flagged --> X[Read rejection reason\nshown in amber card]
W -- ✅ Clear --> Y[View mode — no edit access]
P --> Z[Card status updates visually\nTimestamp + mutawwif name logged]
U --> Z
Z --> AA{More pilgrims?}
AA -- Yes --> F
AA -- No --> AB[Group summary screen\nAll statuses at a glance]
AB --> AC([✅ Field update complete\nAll synced to Admin Dashboard])
style A fill:#0EA5E9,color:#fff,stroke:none
style AC fill:#10B981,color:#fff,stroke:none
style C fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style G fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style K fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style O fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style W fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style AA fill:#1A2236,color:#94A3B8,stroke:#F59E0B,stroke-width:1.5px
style E fill:#1A2236,color:#60A5FA,stroke:#60A5FA
style Q fill:#1A2236,color:#60A5FA,stroke:#60A5FA
style X fill:#2d0a0a,color:#EF4444,stroke:#EF4444
Entry
Success end
Decision
Offline fallback
Flagged / error
Insight 2 (Mobile Dependency) addressed: Pre-set status tiles eliminate keyboard typing entirely. The offline-first queue ensures no update is lost in low-signal zones like the Haram. Every update is timestamped and attributed — replacing all WhatsApp coordination.
04
Screen-by-Screen Architecture
Four detailed blueprints — three desktop-first, one mobile-first — with annotated component specs, semantic colour logic, and Figma-ready layout descriptions.
S1
Admin Dashboard
Critical metrics surfaced in under 10 seconds of login
Desktop · 1440px
🗂 Layout Structure
Fixed Sidebar + Fluid Main Area
- Sidebar: 220px fixed, dark navy (#111827). Logo top, nav links (icon + label), avatar/logout anchored bottom. Never collapses on desktop.
- Top bar: 60px sticky. Page title (Syne 700, 20px) left. Notification bell with red number badge. Global search center. Admin avatar right.
- Alert drawer: slides down from top bar (320px height) on bell click — overlays content without full navigation. Dismissible per alert.
- Main content: fluid, 24px gutters. Scrollable independently of fixed sidebar.
🔴 KPI Card Row — Semantic Colour Logic
The dashboard's decision-making engine
- Card 1 — Visas Approved: Green tint (#052e1a bg, #10B981 border). Syne 800, 36px value. Icon: shield-check. Clicking = no navigation needed.
- Card 2 — Pending Review: Amber tint. Clock icon. Clicking navigates to manifest filtered to "Pending." Badge shows count.
- Card 3 — Issues Flagged: Red tint (#2d0a0a, #EF4444 border). Pulsing red ring on card if count > 0. Warning triangle icon. Highest visual urgency — eye goes here first.
- Card 4 — Flights Today: Blue tint. Split value: "X on time / Y delayed". Clicking goes to flight board.
- All cards: 16px radius, semantic 1px border, hover: lift shadow. Click = contextual navigation shortcut to relevant section.
📊 Secondary Widgets
Activity Table + Trend Chart (below KPIs)
- Left (55%): "Recent Activity" table — Name, Status Badge, Group, Last Updated. 8 visible rows, then scroll. Status badge = semantic pill (green/amber/red dot + label).
- Right (45%): "Processing Trend This Week" bar chart — X: days, Y: count. Pure CSS bars in Figma. Current day bar = solid teal. Others = teal-dim. No chart library needed.
- Section labels: Syne 600, 12px, uppercase, txt3. Consistent above every widget.
⚡ Key Interactions — Insight 1 Fix
Reducing the 4-hour daily time drain
- Red badge on bell → pre-filtered view on click. Admin never searches manually.
- Each KPI card click = 1-click contextual navigation to the problem area. No menus.
- Keyboard shortcuts visible on hover (e.g. "Press M — Manifest") for daily power users.
- Live sync indicator: bottom-left, "Synced 12s ago" with green pulse — removes doubt about data freshness vs. a stale spreadsheet.
Design rationale — replacing Excel
The four semantic KPI cards replace "scan 12 tabs." The mental model: admins navigate by colour, not cell reference. Green = no action. Amber = review soon. Red = act immediately.
S2
Pilgrim Manifest & Document Verification
Dense data grids transformed into scannable, actionable records
Desktop · 1440px
📋 Manifest Table — Row Design
The scannable grid (replacing dense Excel rows)
- Columns: Checkbox · Pilgrim Name (+ 28px avatar) · Passport No. · Visa Status · Document Status · Group · Actions.
- Row height: 48px minimum. 16px horizontal cell padding — no cramming.
- Row-level semantic tinting: Approved = default dark row. Pending = amber row tint (rgba 4%). Flagged = red row tint (rgba 4%) + 3px red left-border accent.
- Admins scan the left edge — colour bleeds surface problem rows without reading any text. This is the core grid → card transformation.
- Sticky header row on scroll. Bulk-select checkbox in header for batch actions.
🏷 Status Badge System
Semantic pill badges — the anti-spreadsheet pattern
- Approved: Green dot + "Approved" — #10B981 tint, green border + text.
- Pending: Amber dot + "Pending Review" — amber tint.
- Rejected: Red dot + "Rejected" — red tint. Tooltip on hover: rejection reason preview.
- Incomplete: Grey dot + "Missing Docs" — neutral tint + warning icon.
- All badges: 18px height, 100px radius, 11px Outfit 600 uppercase. 5px dot left of label. Clicking a badge opens the document panel directly.
🗃 Document Verification Side Panel
Approve / Reject without leaving the list
- Clicking any row opens a 380px right panel (slides in — admin keeps list in view on left).
- Panel: pilgrim photo (48px) + name (Syne 700) + group chip at top. Tabs: Documents · Details · History.
- Document cards grid: one card per document type (Passport, Visa, Vaccination Certificate). Each card: thumbnail + type label + status badge + Approve / Reject buttons.
- Approve: single click, logs timestamp + admin ID instantly. No modal.
- Reject: opens inline reason field (required). Reason stored, visible to mutawwif in their app under that pilgrim.
🔍 Filter Bar
Quick-filter chips — instant triage
- Chips: "All" · "Pending Review (14)" · "Issues Flagged (6)" · "Ready (203)" · "My Group [A]". Click = instant client-side filter, no reload.
- Count in parentheses lets admin triage by volume — highest-count problem first.
- Search: filters by name, passport number, group ID in real time. 300ms debounce.
- Export button (top right): generates filtered PDF manifest — replaces manual Excel export entirely.
The grid → card shift
Row tinting + badge pills + inline panel = admin reads the status of 200 pilgrims in 60 seconds by scanning left-edge colour. Only edge cases need the detail panel opened.
S3
Flight & Logistics Scheduling
Multi-group flight coordination without a spreadsheet
Desktop · 1440px
🗂 Layout Structure
Timeline Board + Assignment Detail Panel
- Main view: chronological flight card list (65% width). Each flight = a "flight row card" — not a spreadsheet row.
- Right panel (35%): Group Assignment detail on flight click. Lists assigned groups, headcount, pilgrim status breakdown.
- Date tabs at top: Today · Tomorrow · +2 · +3. Today always active on load.
- Filter row: Airline dropdown · Destination (Jeddah / Madinah / Istanbul) · Status (On Time / Delayed / Cancelled).
⚠️ Delay Alert Banner
Proactive alert — replaces WhatsApp monitoring
- Amber banner pinned below top bar when any flight on the current day is delayed. "⚠ SV 4821 Jeddah — Group B — now 14:30 (was 12:00). View affected pilgrims →"
- Banner auto-dismisses once admin opens the affected flight card or manually closes.
- This is the critical behaviour change: system pushes the delay to admin. Admin no longer monitors airline WhatsApp groups or calls the airport.
✈ Flight Card Row Anatomy
High-density but visually scannable
- Left: departure + arrival time (Syne 600, 14px).
- Center: flight number, route, group tag chip, seat count pill ("234/260").
- Right: capacity progress bar (booked/total) + status badge.
- Row states: On Time = green left-border + green bg tint. Delayed = amber. Cancelled = red. Upcoming = teal/neutral. Delayed rows show "+Xh" amber chip for delay duration.
🔁 Group Reassignment
Drag-to-reassign + conflict detection
- Group chips inside flight rows are draggable on desktop. Drop onto another flight row triggers reassignment.
- On drop: system checks seat capacity. OK → green toast + real-time push notification to all mutawwifs in that group ("Your flight has been updated — new departure 14:30").
- Conflict: modal mid-drag — "SV 4823 has 48 seats. Your group has 62 pilgrims. Suggested: SV 4825 (80 seats free)."
- All changes logged in sidebar Activity Log: timestamp + admin name + previous vs. new assignment.
📡 Live Connection Indicator
Admin ↔ Mutawwif real-time visibility
- Bottom of page: "● Live — 4 mutawwifs online" with green pulse dot. Admin sees which field guides are active.
- Saving a flight change auto-pushes an in-app notification to affected mutawwifs. No manual message. No WhatsApp.
Replacing WhatsApp coordination
Every flight change auto-notifies the relevant mutawwif in-app. The "compose message to Group B" step is removed from the admin's workflow entirely — the system handles distribution.
S4
Mutawwif Companion App
Field-first UI — minimum taps, maximum clarity in the field
Mobile · 390px
Home · My Group
Live sync dot
Semantic borders
Status Update Sheet
←
54px tap targets
No keyboard input
📱 Home — My Group Screen
Header + Mini KPIs + Pilgrim Card List
- Header: logo + "My Group — [Name]" + live sync dot (green pulse, "Live") + avatar. No complex nav.
- Mini KPI row: 2-card grid — "Checked In: 38/42" (green) · "Needs Attention: 4" (amber). Tapping amber filters list immediately to problem pilgrims.
- Filter chips: "All · Pending · Issues" — 22px height, horizontal row. Active = teal tint.
- Pilgrim card: 32px avatar circle + name + sub-label (room/group) + status pill right-aligned. Card border colour = semantic status. 56px min height for thumb-friendly tap.
- Tap any card = status sheet slides up. No page navigation — context preserved.
✅ Status Update Sheet — The 2-Tap Flow
Designed for one hand, in a crowd
- Sheet slides up 85% of viewport. Pilgrim mini-card at top confirms identity before action.
- Status grid: 2×2 large tile buttons (54px height). Labels: "Arrived at Hotel" · "At Haram" · "Boarded Bus" · "Needs Assistance" (red tint). Pre-set — zero typing required.
- Selected tile: coloured border + bg tint. Selecting auto-highlights, one tap per pilgrim update.
- Optional note field: 52px text area. Keyboard opens only on tap — not automatically.
- Confirm: 48px full-width teal button. Haptic feedback + green flash + sheet dismisses + card list updates instantly.
📴 Offline Mode
Built for low-signal sacred sites
- Top bar shows amber "Offline — syncing when connected" badge when network drops.
- All status updates queue locally: "Queued: 3 updates" shown. No data lost.
- On reconnect: auto-sync fires, toast: "3 updates synced ✓". Admin dashboard reflects changes immediately.
- Core pilgrim list always cached — mutawwif can view all records without any connection.
🔔 Push Notifications from Admin
In-app only — no WhatsApp, no SMS
- Flight update: "⚠ Group B — SV 4821 now departs 14:30 (was 12:00). Confirm group notified →"
- Document flag: "Pilgrim [Name] — visa flagged by admin. Action required."
- In-app banner (4 sec) + persisted in Notifications tab. One notification centre replaces multiple WhatsApp groups.
Insight 2 — Mobile Dependency solved
Zero typing for standard updates. The 2×2 tile grid means a mutawwif can log 10 pilgrim arrivals in under 60 seconds — one hand, in a crowd, at full Haram capacity.
05
UI Design & Elements
The final interface utilizes a clean, high-contrast aesthetic. Crucial metrics like "Visas Approved" or "Flights Delayed" are highlighted using semantic color coding (greens for success, amber for warnings) to draw immediate attention to actionable items.
Colors
Typography
Syne (Display)
Outfit (Body)
Components
06
Prototype & Outcome
The shift from spreadsheets to a unified dashboard reduced administrative sorting time by 75%. Agency owners reported significantly less anxiety during the peak Hajj season, as the real-time tracking allowed them to proactively address flight delays and visa issues before they cascaded into larger logistical nightmares.