Esendel — UI/UX Design Brief
Date: March 2026 · Status: Tentative / Work In Progress
Audience: UI/UX Designer
Platform: Next.js 15 web app (desktop-first, responsive)
1. Platform Overview
Esendel is a B2B marketplace connecting food & beverage industry buyers (cafés, restaurants, hotels) with verified suppliers/sellers (coffee distributors, equipment vendors, packagers). The platform has three distinct portals, each with its own layout and sidebar.
Design System (Already Coded)
| Token | Value |
|---|---|
| Primary Font | Outfit (Google Fonts) |
| Brand Palette | Coffee-inspired: #3c2415 (dark) → #faf6f1 (light) |
| Accent (Green) | #5e7a5b earth green |
| Border Radius | 0.625rem |
| Theme | Light only (dark mode not yet implemented) |
Layout Shell
All three portals share the same shell structure:
┌─────────────────────────────────────────────┐
│ AppHeader (sticky, 64px) │
├──────────┬──────────────────────────────────┤
│ Sidebar │ <page content> │
│ 256px │ (scrollable) │
│ │ │
└──────────┴──────────────────────────────────┘
- Sidebar collapses to a hamburger on mobile (overlay pattern)
- Sidebar accent color differs per portal (see below)
2. Portal Color Themes
| Portal | Sidebar Active Color | Header Badge | Primary Use |
|---|---|---|---|
| Seller | Coffee brown (coffee-100/900) | bg-coffee-800 | Suppliers managing their store |
| Buyer | Earth green (green-100/900) | bg-green-700 | Cafés/restaurants buying supplies |
| Admin | Purple (purple-100/900) | bg-purple-600 | Esendel staff only |
3. Public Pages (Landing)
These pages have NO sidebar — just the public Navbar + Footer.
| Status | Route | Page Name | Notes |
|---|---|---|---|
| ✅ Built | / | Landing / Home | Hero, Categories, Featured Products, Top Suppliers, Platform, Value Bar, Loyalty, CTA, Footer |
| ✅ Built | /shop | Public Shop | Product grid browse |
| ✅ Built | /shop/product/[id] | Product Detail | Inquiry form → sends to /inquiries |
| ✅ Built | /login | Login | Email/password |
| ✅ Built | /login/phone | Phone Login | OTP login |
| ✅ Built | /signup | Sign Up | Role selector (Buyer / Seller) |
Designer Note: The landing Navbar has placeholder
href="#"links — actual routes need to be specified once pages are built.
4. Seller Portal (/seller/*)
Sidebar: Dashboard · Products · Orders · Customers · Finance · Analytics · Settings
| Status | Route | Page Name | Priority |
|---|---|---|---|
| ✅ Built | /seller/dashboard | Seller Dashboard | P0 — stat cards + quick actions |
| ✅ Built | /seller/products | Product Listing | P0 — table with edit/view |
| ✅ Built | /seller/products/new | Add Product | P0 — full form |
| ✅ Built | /seller/products/[id]/edit | Edit Product | P0 — prefilled form |
| 🟡 Stub | /seller/orders | Orders | P0 — table with status filters |
| 🟡 Stub | /seller/finance | Finance & Payouts | P1 — payout history + bank details |
| 🟡 Stub | /seller/customers | Customers | P1 — buyer list, repeat purchase view |
| 🟡 Stub | /seller/analytics | Analytics | P2 — charts: revenue, views, conversion |
| 🟡 Stub | /seller/profile | Profile | P1 — business info edit |
| 🟡 Stub | /seller/settings | Settings | P1 — notifications, payment, security |
| ✅ Built | /seller/onboarding | Onboarding Form | P0 |
| ✅ Built | /seller/onboarding/welcome | Onboarding Welcome | P0 |
| ✅ Built | /seller/onboarding/status | Onboarding Status | P0 |
5. Buyer Portal (/buyer/*)
Sidebar: Dashboard · Browse Shop · My Orders · Inquiries · Saved Suppliers · Analytics · Profile · Settings
| Status | Route | Page Name | Priority |
|---|---|---|---|
| ✅ Built | /buyer/dashboard | Buyer Dashboard | P0 — stat cards + quick actions |
| ✅ Built | /buyer/shop | Browse Shop | P0 — personalized product view (currently placeholder) |
| 🟡 Stub | /buyer/orders | My Orders | P0 — order history + tracking |
| 🟡 Stub | /buyer/inquiries | Inquiries | P0 — messages sent to suppliers |
| 🟡 Stub | /buyer/suppliers/favorites | Saved Suppliers | P1 — bookmarked seller cards |
| 🟡 Stub | /buyer/analytics | Analytics | P2 — spend over time, category breakdown |
| 🟡 Stub | /buyer/profile | Profile | P1 — personal + delivery locations |
| 🟡 Stub | /buyer/settings | Settings | P1 — account, notifications, payment |
| ✅ Built | /buyer/onboarding | Onboarding Form | P0 |
| ✅ Built | /buyer/onboarding/welcome | Onboarding Welcome | P0 |
| ✅ Built | /buyer/onboarding/status | Onboarding Status | P0 |
Designer Note:
/inquiries(top-level) redirects to/buyer/inquiries. This is the destination after an inquiry is submitted from a product detail page.
6. Admin Portal (/admin/*)
Sidebar: Dashboard · Pending Onboardings · Pending Products · Sellers · Buyers · Settings
| Status | Route | Page Name | Priority |
|---|---|---|---|
| ✅ Built | /admin/dashboard | Admin Dashboard | P0 — live stats from API |
| ✅ Built | /admin/onboardings/pending | Pending Onboardings | P0 — review queue |
| ✅ Built | /admin/onboardings/[id] | Onboarding Detail | P0 — approve / reject |
| ✅ Built | /admin/products/pending | Pending Products | P0 — moderation queue |
| 🟡 Stub | /admin/products/[id] | Product Detail | P0 — approve / reject individual product |
| ✅ Built | /admin/sellers | Sellers List | P0 — table of all sellers |
| 🟡 Stub | /admin/sellers/[id] | Seller Detail | P1 — full seller profile view |
| ✅ Built | /admin/buyers | Buyers List | P0 — table of all buyers |
| 🟡 Stub | /admin/buyers/[id] | Buyer Detail | P1 — full buyer profile view |
| 🟡 Stub | /admin/settings | Settings | P2 — platform config |
7. Future / Planned Pages
These pages are not yet started and need design + implementation.
High Priority (P0–P1)
| Portal | Route (suggested) | Page Name | Description |
|---|---|---|---|
| Seller | /seller/orders/[id] | Order Detail | Full order with tracking, invoice download |
| Buyer | /buyer/orders/[id] | Order Detail | Delivery tracking, re-order button |
| Seller | /seller/products/[id] | Product Preview | Public-facing preview of a product listing |
| Buyer | /buyer/inquiries/[id] | Inquiry Thread | Full conversation with a supplier |
| Buyer | /buyer/suppliers/[id] | Supplier Profile | Public supplier store page |
Medium Priority (P2)
| Portal | Route (suggested) | Page Name | Description |
|---|---|---|---|
| All | /notifications | Notifications Center | Bell dropdown + full list page |
| Admin | /admin/transactions | Transactions | Platform-wide payment overview |
| Admin | /admin/reports | Reports | Exportable CSVs / charts |
| Seller | /seller/finance/invoices | Invoices | Per-order invoice PDF download |
| Buyer | /buyer/checkout | Checkout / RFQ | Multi-item request for quote flow |
Low Priority / Future (P3)
| Portal | Route (suggested) | Page Name | Description |
|---|---|---|---|
| Public | /about | About Esendel | Company story |
| Public | /pricing | Pricing | Seller subscription tiers |
| Public | /contact | Contact | Support form |
| Public | /blog | Blog | Industry articles / SEO |
| All | /help | Help Center | FAQ + docs |
8. Key UX Flows to Design
- Signup → Onboarding → Dashboard (both Buyer & Seller variants)
- Buyer: Browse Shop → Product Detail → Submit Inquiry → View in Inquiries
- Seller: Add Product → Submitted for Review → Admin Approves → Live in Shop
- Admin: Review Onboarding → Approve/Reject → User notified
- Seller: Receive Order → Mark Shipped → Buyer sees Delivered
9. Components Needing Design Spec
| Component | Current State | Needs |
|---|---|---|
AppHeader | Functional, basic styling | Full design pass, avatars, notification drawer |
SellerSidebar / BuyerSidebar / AdminSidebar | Functional, minimal | Polished icons, collapsed state for small screens |
| Product Card | Exists in shop | Wishlist, badge overlays (New, Out of Stock) |
| Order Status Badge | Basic color badge | Full status timeline component |
| Inquiry Card | Basic | Chat bubble UI, unread indicator |
| Data Tables | Basic HTML table | Sortable columns, pagination, export button |
| Empty States | Plain text placeholder | Illustrated empty states per section |
| Analytics Charts | Placeholder box | Chart component (line/bar) with time filters |
10. Notes for Designer
- RTL Support is built in — the app reads a
localecookie and setsdir="rtl"for Arabic. All layouts must be tested in both directions. - No dark mode yet — the team may add it later; avoid hard-coded light-only assumptions in components.
- Mobile breakpoint: Full sidebar collapses below
md(768px). Pages should be usable on tablet (1024px+) and desktop (1280px+) as the primary target. - Onboarding pages (
/seller/onboarding,/buyer/onboarding) do not use the portal sidebar — they are standalone flows.