Dehs Buy
A self-initiated SaaS platform: designed in Figma, built with Antigravity, deployed on Vercel
- Project
- Dehs Buy — Self-Initiated SaaS Pre-Order Platform
- Role
- Product Designer & Builder
- Prototyping & AI
- Figma + Antigravity
- Tech Stack
- Next.js · Tailwind · Supabase
- Deployment
- Vercel Live
- Timeline
- 2026
- Deliverables & Disciplines
- Product design, UX research, interaction design, UI design, prototyping, and front-end implementation
Upfront Payment Anxiety
Demanding 100% payment 3–6 months before delivery causes a 78% checkout drop-off, while creators risk bankruptcy on unverified factory tooling.
₦0.00 Due Today Reservations
Buyers lock guaranteed batch slots with zero card required; creators track live demand thresholds (e.g. 38/150 reserved) before factory tooling.
Shipped SaaS with Antigravity
Translated Figma tokens into modular Next.js + Supabase code using Antigravity, deploying a live, production-grade SaaS to Vercel.
The High-Stakes Hardware Pre-Order Dilemma
Hardware pre-orders suffer from a systemic trust breakdown. Small makers and hardware creators need upfront batch validation to afford Minimum Order Quantities (MOQs, typically 100–150 units) before ordering tooling, PCBs, and CNC machining. However, asking buyers to pay full price 3–6 months in advance creates massive anxiety, leading to a 78% checkout abandonment rate.
Upfront Financial Anxiety
Paying ₦100,000+ upfront with 90+ day lead times creates intense skepticism. Backers fear delayed shipments, broken promises, uncommunicative creators, and zero refund guarantees if a project fails.
Minimum Order Quantity (MOQ) Vulnerability
Factories require 150+ units for tooling. Without upfront demand data, creators risk bankruptcy from self-funding unsold stock. But asking for cash upfront kills early-stage customer conversion.
Drop-off on Upfront Payments
Demand Milestone Transparency
Factory Tooling Minimum (MOQ)
The Core Design Challenge
“How might we design a hardware pre-order platform that eliminates buyer payment anxiety through a zero-risk reservation model, while giving independent creators guaranteed demand metrics before manufacturing begins?”
Uncovering the Trust Cliff & Backer Motivations
To validate why traditional crowdfunding platforms struggle with retention, I analyzed existing models (Kickstarter, BackerKit, Shopify pre-order plugins) and conducted qualitative interviews with tech gear enthusiasts and hardware founders.
The Trust Cliff
78% of potential backers abandon checkout when credit card details are demanded 90+ days before product completion.
The Communication Void
84% of surveyed backers cite lack of transparent production milestone updates as the primary reason for avoiding future drops.
Intent vs Hope
Free email waitlists convert at <12%; makers need binding reservation slots to satisfy factory Minimum Order Quantities.
Tobe Okafor
Software Engineer & Tech Collector · 28 years
User Background
Tobe is an avid tech collector who hunts for low-run mechanical keyboards, anodized accessories, and custom desk gear. He has dropped out of dozens of crowdfunding campaigns at the checkout step because he refuses to lend money upfront to unproven makers without transparent manufacturing timelines.
Goals & Priorities
- Lock in early-bird batch allocations for limited-edition tech gear
- Zero financial risk until manufacturing is completed and verified
- Real-time stage updates from tooling to final factory dispatch
Key Frustrations
- Having money tied up for months with radio silence from creators
- Hidden customs and surprise shipping charges added after paying
- Clunky checkout flows that ask for credit card info on products that don't exist yet
“I want the gear, but I refuse to hand over my money months before factory production even starts.”
4 Interaction Decisions That Eliminate Risk
Rather than tweaking the existing checkout funnel, I re-architected the pre-order transaction from the ground up to guarantee trust, momentum, and operational clarity.
₦0.00 Due Today Slot Reservation
Eliminated credit card friction at checkout. Backers reserve their batch slot instantly with only contact info; payment is triggered only when the batch hits MOQ and dispatch is imminent.
Live Batch Scarcity & Capacity Meter
Surfaced real-time progress indicators (e.g., 38/150 reserved) directly on hero cards and product pages, creating authentic urgency based on actual manufacturing thresholds.
5-Stage Self-Service Milestone Tracker
Replaced creator email back-and-forths with an automated order tracking portal where backers enter their reservation code to view live stage updates (Tooling → Sourcing → Assembly → QC → Dispatch).
Dual-Role Architecture (Storefront + Admin Portal)
Engineered a single unified platform serving both buyers discovering drops and creators managing batch allocations, milestone timestamps, and inventory thresholds.
From Discovery to Factory Dispatch
A seamless 6-step flow bridging buyer discovery with creator batch validation:
Discover Drop
Explore curated tech gear with active batch status and target dispatch dates.
Inspect Batch Progress
View transparent capacity progress (e.g. 38/150 reserved) and tier specs.
1-Tap Reservation
Lock in guaranteed slot with ₦0.00 due today — no card required.
Instant Confirmation
Receive unique Backer ID and direct link to self-service tracking hub.
Production Milestones
Follow live progress updates through 5 stages of factory manufacturing.
Dispatch & Fulfillment
Automatic notification when batch is QC-approved and ready for delivery.
Dark Indigo Industrial Tech Aesthetic
The visual system was crafted in Figma to feel precision-engineered, modern, and credible. Deep obsidian backgrounds highlight product industrial design, while electric indigo and emerald status indicators surface real-time manufacturing momentum.
Midnight Canvas
#090D16
Deep obsidian backdrop for immersive tech aesthetic
Cyber Slate
#131B2E
Structured card containers with subtle border contrast
Electric Indigo
#6366F1
Primary action accent, reservation buttons & active highlights
Active Emerald
#10B981
Live batch status indicator & confirmed threshold milestones
Warning Amber
#F59E0B
Low slot capacity warnings & closing reservation batches
Curated Hardware Releases & Hero Showcase
Full-bleed dark indigo aesthetic highlighting limited batch drops, estimated dispatch quarters, live capacity metrics, and crystal-clear technical specifications.
Product Detail & Real-Time Capacity Bar
Interactive product view featuring the live batch capacity indicator (e.g. 38/150 reserved), modular accessory options, transparent manufacturing schedules, and the 1-click '₦0.00 Due Today' reservation drawer.
Catalog & Multi-Category Filtering
Structured filtering by category, release status (Upcoming, Active Batch, In Production, Dispatched), and price tier for rapid gear discovery.
Backer Order Tracking Center
5-stage production milestone tracker where backers enter their reservation ID to monitor Tooling, Sourcing, Assembly, Quality Control, and Dispatch with live timestamps.
Mobile Ergonomics & Sticky Reservation Drawer
Engineered for effortless one-thumb interaction with a persistent bottom reservation bar, quick-tap spec accordions, and frictionless checkout on mobile browsers.
From Figma Vectors to Production SaaS with Antigravity
Rather than stopping at static Figma mockups, I leveraged Antigravity, an AI-assisted engineering tool, to translate design tokens and component hierarchies directly into modular, production-ready React/TypeScript code. This allowed rapid verification of real-world interaction ergonomics, optimistic UI states, and database constraints.
Next.js (App Router)
Server-side rendering, optimized image pipelines, and fast client navigation.
TypeScript
Strict type safety across product schemas, reservation models, and API routes.
Tailwind CSS v4 & Figma
1:1 token translation from Figma color variables and responsive utility architecture.
Antigravity
Accelerated scaffolding, component synthesis, and end-to-end full-stack velocity.
Supabase PostgreSQL
Real-time reservation counts, row-level security, and slot allocation logic.
Vercel
Global edge network deployment with automated Git continuous integration.
Slot Concurrency Locks
Row-level locking in Supabase PostgreSQL prevents over-allocation on limited-edition batch capacity thresholds.
Optimistic Reservation UI
The ₦0 reservation drawer updates progress metrics instantly before server response for seamless, zero-lag feel.
1:1 Design Token Sync
All Figma color variables, typography scales, and corner radii match Tailwind CSS configuration 1:1.
Interactive Recruiter Demo & Live SaaS Deployment
Dehs Buy is live and publicly accessible on Vercel. Hiring teams and recruiters can test the full pre-order flow, inspect batch progress responsiveness, and explore the admin portal.
dehsbuy.vercel.app
1-Click Slot Reservation
Experience the '₦0.00 Due Today' checkout drawer — locking a batch slot without credit card friction.
Live Milestone Tracking
Lookup batch codes to view real-time stage updates from tooling to final dispatch.
Admin Release Control
Operator dashboard for managing batch releases, threshold meters, and automated backer updates.
What Building End-to-End Taught Me
Code Informs UX Assumptions
Building the actual database schema and slot reservation logic revealed edge cases (e.g. concurrent slot bookings and MOQ thresholds) that static Figma vectors conceal.
Trust is a Measurable Interaction Metric
Removing upfront payment requirements while adding real-time capacity social proof turns high-friction hardware pre-orders into an effortless, confident user action.
The Designer-Builder Superpower
Leveraging AI tools like Antigravity enables solo product designers to bridge the vector-to-production gap, delivering fully realized, shippable SaaS products independently.
Building Dehs Buy end-to-end — from problem framing and Figma design systems to full-stack Next.js/Supabase development with Antigravity and Vercel deployment — validated the power of the designer-builder. By replacing broken upfront payment dynamics with a '₦0.00 Due Today' architecture, Dehs Buy provides both buyers and creators the trust they need to bring ambitious hardware into the world.
What I'd explore next for Dehs Buy
Outcome & Prototype
A fully functional, high-fidelity SaaS commerce platform designed in Figma, built with Next.js, TypeScript, Tailwind CSS, and Supabase using Antigravity, and deployed live at dehsbuy.vercel.app with complete end-to-end ownership.
