Design Package — Wireframes

Wireframe Specifications

Low-fidelity layout blueprints for every critical page — customer-facing and admin

Public Pages
E-Commerce
Booking Flow
User Dashboard
Admin Portal
Mobile Views
Public Pages
Home, Destinations listing, Package detail, Contact
Homepage (P01)All Visitors
① Full-bleed video hero with overlay CTAs
② Animated stats counter (trips, countries, reviews)
③ Shop promo strip cross-sells safari gear
Destinations (P03)All Visitors
›
① Filter by country, wildlife, duration, price range
② Toggle: grid / map view
③ Cards show best season indicator
Package Detail (P06)All Visitors
›
›
GALLERY · 12 PHOTOS
① Sticky right-panel: price, dates, guests, book CTA
② Tab switch: Itinerary / Inclusions / Reviews
③ "Complete Your Safari" gear cross-sell section
E-Commerce Pages
Shop listing, product detail, cart, checkout flow
Shop — Product Listing (E02)All Visitors
① Left: collapsible filter sidebar (type, price, size, brand)
② Currency selector persists across all pages
③ "Sale" / "New" / "Bundle" badges on product cards
Shopping Cart (E04)Auth required at checkout
›
›
① Cart distinguishes tour bookings vs. gear items visually
② Real-time currency conversion toggle in order summary
③ "You might also need" upsell in cart
Booking Flow
4-step booking: package select → customize → payment → confirmation
Booking Step 1 — CustomizeAuth Required
✓
2
3
4
① Step 2: customize — guests, dates, add-ons, gear bundle
② Live price update in right summary panel
③ Gear bundle cross-sell with "save 15% when added" badge
User Dashboard
Registered tourist's personal portal — bookings, orders, loyalty, profile
User Dashboard (U01)Registered Users
MY SAFARIS
SHOP
ACCOUNT
① Loyalty points balance prominently displayed
② Next upcoming trip with countdown
③ Quick access: re-book, view docs, add gear
Admin Portal
Master dashboard, products manager, inventory, user management
Super Admin — Master Dashboard (S01)Super Admin Only
OVERVIEW
CONTENT
COMMERCE
SYSTEM
① 4 KPI cards: revenue, bookings, orders, active users
② Revenue chart (bar) + destination distribution (donut)
③ Recent bookings table with inline status badges
Products Manager (A05)Sub-Admin +
① Product thumbnail, name, category, stock, status, actions
② Red row highlight = out of stock items
③ Inline low-stock alert bar with restock CTA
User Management (S02)Super Admin Only
① Role filter tabs: All / Super Admin / Sub-Admin / Users
② Color-coded avatar + role badge per user
③ Inline role edit — click badge to change role
Mobile Wireframes
375px viewport — key customer-facing screens optimized for mobile
Mobile — Home375px
① Hamburger nav with bottom tab bar
② Horizontal scroll for destination cards
Mobile — Shop375px
① 2-col product grid (vs. 3-col desktop)
② Cart badge on icon with item count
Mobile — Checkout375px
① Single-column stacked checkout on mobile
② Currency selector + payment methods grid