UI/UX Audit: FalahOS needs marketplace + education UX layer (Fiverr × Coursera benchmark) #2

New Issue

2026-07-03T04:02:46Z

wmj commented

2026-07-03 04:02:46 +00:00

📊 UI/UX Design Audit & Recommendations

Current State (falahos.my)

Strong visual identity (gold/green on dark, Cinzel serif, geometric details) but lacks marketplace + education UX patterns.

What to Keep

✅ Color system: #C9A84C gold + #2ECC71 green on #070A0D dark
✅ Font stack: Cinzel (headings) + DM Sans (body) + JetBrains Mono (labels)
✅ Glassmorphism nav, geometric border accents, noise overlay

🔴 Must Fix (5 Critical Issues)

1. Replace emoji with SVG icons

Current: Uses emoji as structural icons in arch-cards, eco-cards
Fix: Replace with Lucide SVG icons (consistent stroke 1.5px)
Ref: design-system/ummah-falahos/MASTER.md §6 Iconography

2. Add search-first hero

Current: Hero is brand tagline only — no search
Fix: Search bar as primary CTA with category pills below (Fiverr pattern)
Ref: MASTER.md §7.2 Hero

3. Add social proof / review system

Current: No ratings, reviews, or testimonials block
Fix: Rating distribution widget + review cards with Verified Purchase badges
Ref: MASTER.md §7.6 Review/Rating Block

4. Add mobile bottom navigation

Current: Nav links hidden on mobile (display:none)
Fix: Bottom tab bar with 5 items (Fiverr mobile pattern)
Ref: MASTER.md §7.1 Navigation

5. Add progress & learning UX

Current: No progress indicators, no syllabus structure
Fix: Stepped progress bars + course card layout + syllabus accordion (Coursera pattern)
Ref: MASTER.md §7.5 Course Details, §7.7 Progress

🟡 Should Fix

Add geometric clip-path to CTA buttons (signature detail missing)
Ensure JetBrains Mono on ALL labels/tags (some sections mixed)
Add metrics/statistics bar below hero (trust signal)
Add category grid for browsing services/courses
Implement prefers-reduced-motion support
Add responsive safe-area handling for notch/gesture bar

📐 Full Design System

Complete 15-section unified design system combining best of Falahos, Fiverr & Coursera saved at:
design-system/ummah-falahos/MASTER.md

🎨 Color Reference

Token	Value	Usage
`--color-gold`	`#C9A84C`	Primary accent, CTAs
`--color-green`	`#2ECC71`	Success, verified
`--color-bg`	`#070A0D`	Background
`--color-text`	`#E8E4DC`	Primary text

🔤 Font Reference

Role	Font
Display	Cinzel 900
Body	DM Sans 300/400/500
Labels	JetBrains Mono 300/400
Editorial	Playfair Display (NEW)

Benchmarked against: fiverr.com (marketplace UX), coursera.org (education UX), falahos.my (existing)

## 📊 UI/UX Design Audit & Recommendations ### Current State (falahos.my) Strong visual identity (gold/green on dark, Cinzel serif, geometric details) but lacks marketplace + education UX patterns. ### What to Keep - ✅ Color system: `#C9A84C` gold + `#2ECC71` green on `#070A0D` dark - ✅ Font stack: Cinzel (headings) + DM Sans (body) + JetBrains Mono (labels) - ✅ Glassmorphism nav, geometric border accents, noise overlay ### 🔴 Must Fix (5 Critical Issues) **1. Replace emoji with SVG icons** - Current: Uses emoji as structural icons in arch-cards, eco-cards - Fix: Replace with Lucide SVG icons (consistent stroke 1.5px) - Ref: `design-system/ummah-falahos/MASTER.md` §6 Iconography **2. Add search-first hero** - Current: Hero is brand tagline only — no search - Fix: Search bar as primary CTA with category pills below (Fiverr pattern) - Ref: MASTER.md §7.2 Hero **3. Add social proof / review system** - Current: No ratings, reviews, or testimonials block - Fix: Rating distribution widget + review cards with Verified Purchase badges - Ref: MASTER.md §7.6 Review/Rating Block **4. Add mobile bottom navigation** - Current: Nav links hidden on mobile (display:none) - Fix: Bottom tab bar with 5 items (Fiverr mobile pattern) - Ref: MASTER.md §7.1 Navigation **5. Add progress & learning UX** - Current: No progress indicators, no syllabus structure - Fix: Stepped progress bars + course card layout + syllabus accordion (Coursera pattern) - Ref: MASTER.md §7.5 Course Details, §7.7 Progress ### 🟡 Should Fix - Add geometric clip-path to CTA buttons (signature detail missing) - Ensure JetBrains Mono on ALL labels/tags (some sections mixed) - Add metrics/statistics bar below hero (trust signal) - Add category grid for browsing services/courses - Implement prefers-reduced-motion support - Add responsive safe-area handling for notch/gesture bar ### 📐 Full Design System Complete 15-section unified design system combining best of Falahos, Fiverr & Coursera saved at: `design-system/ummah-falahos/MASTER.md` ### 🎨 Color Reference | Token | Value | Usage | |-------|-------|-------| | `--color-gold` | `#C9A84C` | Primary accent, CTAs | | `--color-green` | `#2ECC71` | Success, verified | | `--color-bg` | `#070A0D` | Background | | `--color-text` | `#E8E4DC` | Primary text | ### 🔤 Font Reference | Role | Font | |------|------| | Display | Cinzel 900 | | Body | DM Sans 300/400/500 | | Labels | JetBrains Mono 300/400 | | Editorial | Playfair Display (NEW) | --- Benchmarked against: fiverr.com (marketplace UX), coursera.org (education UX), falahos.my (existing)

wmj added the ui-ux enhancement priority-high labels 2026-07-03 04:02:46 +00:00

claude-code was assigned by wmj

2026-07-03 04:02:46 +00:00

claude-code was unassigned by wmj

2026-07-07 12:08:40 +00:00

pi was assigned by wmj

2026-07-07 12:08:40 +00:00

openclaw was assigned by wmj

2026-07-07 12:08:40 +00:00

wmj commented

2026-07-07 12:49:35 +00:00

This ticket superseded by new war-room EPIC and CAB/Implementation tickets. Keeping open as reference — new tickets have more specific scope with UIUX tester automation and Hermes Macbookair implementation.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: wmj/falah-mobile#2