MVP + Phase 1 | Apple Notes Edition
⸻
🧭 Purpose
This guide defines how the product feels and flows, not what it does technically. It ensures: • Minimal friction • Zero ambiguity • Trust + privacy • High conversion • Apple-grade clarity
⸻
🏛️ Design Principles (Core Philosophy)
✨ 1. Progressive Disclosure
Users see only what is necessary at each step: • Browse → Blurred • Post-MSA → Full profiles • Post-payment → Onboarding
🧊 2. Blurred-First Privacy
Identity is hidden until legal + payment conditions are met.
⚡ 3. Instant Gratification UX
Every client action produces immediate visible progress (matches, confirmation states, micro-animations).
🪄 4. AI-Assisted, Human-Approved
AI helps generate summaries, videos, psychometrics — but the UX always feels curated.
🎯 5. Zero Cognitive Load
Users never ask: “What should I do next?”
⸻
🗂️ Main UX Modules 1. Marketing Website (Webflow) 2. Client Portal (Wized + Supabase) 3. Candidate Portal (Wized + Supabase) 4. Recruiter Dashboard (Airtable + Wized embeds) 5. AI Video Review Flow (HeyGen) 6. Contract + Payment Flows (DocuSign + Stripe)
⸻
🌐 1. Marketing Website UX
🎯 Goal
Convert visitors → sign MSA → start hiring.
📌 Key Sections • Hero: “Hire vetted nearshore engineers instantly.” • How It Works (3-step animation) • Live Demo (blurred talent cards carousel) • Pricing • Testimonials • CTA: Start Hiring
📱 Forms • Role intake form triggers recruiter workflow • Email capture → nurtures via n8n flows
⸻
🔐 2. Client Portal (Core Experience)
✨ Home Dashboard (Post-login)
Elements: • “Continue Onboarding” card • “Your Recommended Talent” carousel • “Available Now (Instant Match)” list • Search + Filter bar
🧱 Key Screens
⸻
🟦 Screen 1: Blurred Talent Catalog
Purpose: preview quality without exposing identities.
UI Elements • Candidate Card (blurred photo/video, initials, stack, rate, timezone) • Availability dot 🟢 🟡 🔴 • Tags: Seniority, Languages, Skills • Hover micro-animation (lift + glow)
Interaction Rules • Clicking opens Blurred Talent Modal • Cannot view full video/PDF • Cannot download anything • Suggests signing MSA to unlock
⸻
🟦 Screen 2: Blurred Talent Modal
Shows: • Blurred video thumbnail • Blurred PDF viewer • Skills grid • Psychometric icon badges (but no values) • “Unlock Full Profile → Sign MSA” CTA
Microcopy:
“We hide identity details until legal protection is in place — your trust matters.”
⸻
🟦 Screen 3: Full Profile View (Post-MSA)
Sections • Full HD video (HeyGen intro + candidate interview clip) • Clean skill matrix (Apple-style cards) • Background summary • Personality traits • TalentScore • Work samples (links masked but viewable inside iframe)
Interaction • “👍 Suitable / 👎 Not a fit” buttons • “Book Interview” (Cal.com embed) • “Add to Shortlist”
⸻
🟦 Screen 4: Interview Booking (Cal.com Inline Modal)
UI Behavior • Opens as modal, darkened background • Default recruiter + candidate availability shown • Confirmation → success animation • Email notifications automated
⸻
🟦 Screen 5: SOW Signing (DocuSign Inline)
Minimal UI chrome to reduce distraction. Steps indicator: 1. Review 2. Sign 3. Confirm
⸻
🟦 Screen 6: Payment (Stripe Embedded Checkout)
Clean, minimal, Apple-like.
Confirmation screen → confetti → “Next Step: Kickoff Call”
⸻
🟦 Screen 7: Onboarding Progress Dashboard
Progress bar with 4 steps: • MSA ✔️ • SOW ✔️ • Payment ✔️ • Kickoff (Schedule CTA)
⸻
🟩 3. Candidate Portal UX
🎯 Goal
Make joining TalentQuote feel simple, friendly, and premium.
⸻
🟩 Screen 1: Welcome / Start Application
Two CTAs: • “Apply via WhatsApp” • “Apply via Web”
⸻
🟩 Screen 2: Upload CV
CV preview + progress states: “Parsing…” → “Success.”
⸻
🟩 Screen 3: AI Interview Flow
Lightweight prompts: • “Introduce yourself” • “Tell us about a recent challenge”
User chooses: • 🎥 Video • 🎙 Audio
After submission:
“Great! We’re generating your TalentQuote Intro Video…”
⸻
🟩 Screen 4: Availability Selector
Big circular buttons: • 🟢 Available Now • 🟡 Available Soon • 🔴 Not Available
WhatsApp automation reminders shown subtly.
⸻
🟩 Screen 5: Profile Completion
Checklist: • CV parsed • Interview completed • Skills confirmed • Availability updated
⸻
🟧 4. Recruiter Dashboard UX
🎯 Goal
Give recruiters a powerful but friendly control panel.
We keep Airtable (Phase 1) but wrap it with: • Wized summaries • Recruiter-friendly status indicators • n8n automation logs
⸻
🟧 Screen: Pipeline View
Columns: • New • Interview • Video • Approved • Published
Drag-and-drop triggers automations. Color-coded status chips.
⸻
🟧 Candidate Detail Pane
Shows: • Parsed data • Video status (“Generating / Ready / Failed”) • Psychometric results • Availability
Actions: • Approve • Reject • Request more info
⸻
🟫 5. AI Video Review Flow (HeyGen)
Trigger Points • After AI interview • After recruiter approval
UI States • “Generating video…” • “Video ready — preview now” • “Regenerate?” (Retries limited to 1–2)
HeyGen video appears inside a secure Cloudflare Stream player.
⸻
🟪 6. Contract & Payment UX
Principles • Users should feel: fast, protected, and guided. • Zero ambiguity: the system tells them exactly what happens next.
⸻
🟪 DocuSign UX Behavior • Always inline • Page dims to focus • Success → green check + “Unlocking Profile…”
🟪 Stripe UX Behavior • Inline modal • Success → confetti → “Let’s finish your hiring!”
⸻
🧩 Cross-Module Micro-Interactions
⭐ Microcopy
Clear and human: • “We blurred this to protect candidate identity.” • “Instant Match saved you 5 hours — here are your best options.”
🌀 Motion • Card lift on hover • Smooth fade between blurred → full content post-MSA • Confetti on key milestones
🛡 Security UX • Watermarks • No downloads pre-MSA • Session-based link expiration