Cephas Osayi

Cephas Osayi

Product DesignerUX Engineer

Back to Projects

From WhatsApp
to Imvoy.

How I researched, designed, and shipped an end-to-end photography delivery platform for the Nigerian market — solo, from zero to beta in under six months.

RoleProduct Designer & Design Engineer
Timeline6 Months — Solo
StatusLive — Private Beta
Platformuseimvoy.com
250+
Photos uploaded by beta users
150+
Client photo downloads
350+
Gallery page visits
100%
Purchase intent from validated research
Overview

The problem
nobody solved locally.

Nigerian photographers are some of the most talented creatives on the continent. They charge ₦150,000 to ₦500,000 per wedding shoot. They spend hours editing work that moves people. And then they send it on WhatsApp — compressed, unprofessional — and type their bank account number in a text message to collect payment.

Global platforms like Pixieset solve this but are priced in dollars, designed for Western photographers and clients, and completely blind to how business actually works in Nigeria. The one local alternative covered only a fraction of the workflow.

Imvoy is the fix — a naira-priced client workflow platform built specifically for Nigerian studio and wedding photographers.

Before Imvoy
  • Photos sent via WhatsApp — arrives compressed
  • Google Drive links clients struggle to navigate
  • Bank account number sent in a WhatsApp text
  • No paper trail — payment chased manually
  • Clients share invoice with family by accident
  • Dollar-priced tools increasingly unaffordable
After Imvoy
  • Branded magic link gallery — one tap, no login
  • Full resolution delivery via Cloudflare CDN
  • Private invoice link — separate from gallery
  • Bank details auto-populated on every invoice
  • Gallery viewed and invoice opened notifications
  • ₦4,000/month — priced in naira, built for Nigeria
Research & Validation

Research first.
Code second.

Before writing a single line of code or designing a single screen, I spent weeks talking directly to Nigerian photographers. Not surveys first — conversations first. I wanted to hear the frustration in their own words, not confirm assumptions with a form.

7
Photographers interviewed directly — studios, weddings, corporate
5
Structured survey responses from Nigerian photography communities
100%
Of respondents showed positive purchase intent — zero said no
5/5
Photographers sent their bank account number via WhatsApp text
₦3.5K
Validated price point — confirmed ₦2,500–₦5,000 range willingness
4/5
Used WhatsApp as their primary photo delivery method

“After sending them the file via WhatsApp they always complain that it's not showing on their device or the quality of the picture is low.”

— R1, Studio & Wedding Photographer, 5+ years

“This whole process should be one thing, not five things.”

— R5, Studio & Events Photographer, 5+ years
Research Deliverables Produced
User Survey (Google Forms)5 Stakeholder InterviewsUser PersonaEmpathy MapUser Journey Map (8 stages)Jobs To Be Done FrameworkCompetitor AnalysisOpportunity MapHMW QuestionsImpact vs Effort Matrix
Process

The full path
from insight to live product.

This is not a typical portfolio project. Every stage of the product development lifecycle was executed by one person — research, strategy, design system, product documentation, development, QA, infrastructure, and beta launch.

01
Discovery

Market Research & Validation

Conducted in-depth interviews and structured surveys with active Nigerian photographers. Built a complete empathise stage — persona, empathy map, user journey map, jobs-to-be-done framework. Validated the problem, the price point, and the purchase intent before touching Figma.

02
Strategy

Product Requirements Document

Wrote a comprehensive PRD covering UVP, positioning statement, competitive analysis, all six user flows, technical requirements, pricing tiers, success metrics, and a kill condition. The PRD became the single source of truth for every design and engineering decision that followed.

03
Ideation

Ideate Stage & Information Architecture

Built an opportunity map, How Might We questions, Impact vs Effort matrix, and a complete sitemap covering every screen, every input field, and every button across authentication, onboarding, dashboard, gallery creation, and account settings.

04
Design System

Design System in Figma

Built a complete design system before any screen work — color tokens, typography scale using Outfit, spacing system on an 8px grid, component library, and status badge mapping. All tokens exported as CSS custom properties for direct use in development. The design system was the foundation that made AI-assisted development coherent and consistent.

ADD FIGMA DESIGN SYSTEM SCREENSHOT
Color tokens & component library
ADD FIGMA DESIGN SYSTEM SCREENSHOT
Typography scale & spacing tokens
05
Design

UI Design — All Screens

Designed the complete platform in Figma — landing page, authentication, 6-step shoot creation flow, photographer dashboard, client gallery magic link, private invoice page, and account settings. Every screen mobile-first at 375px, designed for the WhatsApp in-app browser on Android.

ADD FIGMA SCREEN
Dashboard
ADD FIGMA SCREEN
Gallery Creation Flow
ADD FIGMA SCREEN
Magic Link Gallery
06
Engineering

Skills-Based AI Development with Antigravity

Built a documentation-first engineering system — eight skill files defining the complete technical constraints before writing any code. Colors, typography, forms, upload logic, accessibility, API handlers, architecture, and agent persona. Fed these as context to an AI agent in Antigravity to ship the full-stack application.

Next.js 16TypeScriptPrisma + PostgreSQLSupabaseCloudflare R2NextAuth.js v5PaystackResendVercelTailwind CSS v4Antigravity AI AgentDeepSeek V4 Pro
07
Quality Assurance

79-Test QA Suite — 97.5% Pass Rate

Wrote a comprehensive test suite covering authentication, plan gating, photo upload quality preservation, gallery and invoice security, dashboard accuracy, billing, mobile rendering, and database integrity. Ran tests across five priority phases using structured AI prompts. Achieved 97.5% pass rate before onboarding a single beta user.

79
Total tests
77
Tests passed
0
Critical failures
97.5%
Pass rate
08
Launch

Private Beta — 10 Photographers

Launched private beta with 10 Nigerian photographers — 5 from original research interviews, 5 from photography communities. Every beta user onboarded personally via WhatsApp. Platform running on Supabase Pro, Vercel Pro, and Cloudflare R2 with daily automated database backups and real-time error monitoring.

Live Platform

Designed in Figma.
Shipped to production.

Every screen you see below was designed in Figma then built and deployed as a production application. The design-to-development fidelity is high because the design system tokens were defined once and used identically in both environments.

Landing Page
ADD SCREENSHOT — useimvoy.com landing page
Photographer Dashboard
ADD SCREENSHOT — Dashboard with stats cards and shoot list
Shoot Creation — Step 2 Upload
ADD SCREENSHOT — Photo upload step with progress
Shoot Creation — Step 6 Two Links
ADD SCREENSHOT — Gallery link and invoice link generated
Client Magic Link Gallery
ADD SCREENSHOT — Client gallery magic link page (full resolution, no login)
Private Invoice Page
ADD SCREENSHOT — Private invoice link with bank details
Gallery Status Tracking
ADD SCREENSHOT — Dashboard status timeline
Mobile — Client Gallery (375px)
ADD MOBILE SCREENSHOT
Gallery cover
ADD MOBILE SCREENSHOT
Photo grid
ADD MOBILE SCREENSHOT
Invoice page
Design System

Tokens defined once.
Used everywhere.

The design system was built in Figma before a single screen was designed. Color tokens, typography scale, spacing rules, and component states were all defined as CSS custom properties — making the handoff from Figma to AI-assisted development precise and consistent.

Color Tokens
Primary
Background
Surface
Border
Success
Warning
Error
Text Primary
Text Secondary
Typography — Outfit
DisplayYour Shot, Delivered.
HeadingGallery Creation Flow
BodyDeliver stunning galleries to your clients without WhatsApp chaos.
LabelClient Name *
CaptionGallery Opened — May 21, 2026
Account No.0123456789
Figma Design System
ADD FIGMA SCREENSHOT — Full design system overview
Components, tokens, and variants
Key Design Decisions

The decisions that
define the product.

Every non-obvious product decision was grounded in research. Here are the ones that shaped Imvoy most significantly.

🔒

Gallery and invoice links are always separate

A magic link is publicly accessible to anyone who holds it. A wedding gallery gets forwarded to family, friends, and guests. Embedding the invoice inside would expose the payment amount to everyone. One flow generates two independent tokens — gallery is public, invoice is always private.

Naira pricing — never dollars

Global platforms charge in dollars. With naira devaluation, a $15/month subscription feels different every month. Imvoy is priced at ₦4,000/month — fixed, predictable, local. This is not just a pricing decision. It is a trust signal that says we understand your market.

📱

Zero client login — ever

Clients who receive a gallery link are often not tech-savvy. Research showed that requiring account creation was the single biggest cause of client access failure on existing platforms. Imvoy galleries open in one tap — no login, no app, no instructions needed.

🏛️

Abuja creative energy — not Lagos hustle

Imvoy is positioned for the Abuja creative — class, professionalism, premium packaging, calm confidence. This informed every design decision from the dark premium aesthetic to the deliberate typography to the brand voice. The product does not shout. It represents.

📐

Free plan is features-limited, not time-limited

A time-limited trial creates anxiety and urgency at the wrong moment. A features-limited free plan lets photographers experience the core value — professional delivery — before they hit the upgrade moment naturally. Two shoots lifetime. No deadline pressure.

🖼️

Original photo quality — never compressed

Photos travel from photographer's device directly to Cloudflare R2 via presigned URLs — the server never touches the bytes. The client downloads the original file with identical MD5 hash verified end-to-end. The photo your client receives is byte-for-byte identical to what you uploaded.

Engineering Approach

Documentation-first
AI development.

The engineering approach was as deliberate as the design approach. Before writing a single line of application code, I built eight skill files — constraint documents that defined how the AI agent should think, build, and make decisions.

This documentation-first method meant the AI agent had the full product context, design constraints, security requirements, and business logic before touching the codebase. The result was consistent, well-reasoned code that matched the design system and respected the product's privacy architecture.

Framework
Next.js 16
Language
TypeScript
Styling
Tailwind v4
Database
Supabase
ORM
Prisma
Storage
Cloudflare R2
Auth
NextAuth v5
Payments
Paystack
Email
Resend
Hosting
Vercel Pro
AI Agent
Antigravity
Design
Figma
The 8 Skill Files That Constrained the Build
agent.md — Engineering identity and decision framework
architecture.md — Stack, schema, and API surface
colors.md — Token system and semantic color roles
typography.md — Type scale and font rules
forms.md — Multi-step flow logic and validation
upload-logic.md — Batch upload and retry rules
api-handlers.md — Security rules and error codes
accessibility.md — Zero-login client access rules
Learnings

What building solo
teaches you.

Owning every stage of a product — from the first interview to the production deployment — changes how you think about design. Here is what this project taught me that no client project has.

01

Research is the real design work

The most important decisions in Imvoy — separate invoice and gallery links, zero client login, naira pricing — all came from research, not from the design tool. The interviews with photographers shaped the architecture more than any wireframe session. Design without research is decoration.

02

A design system is an engineering document

Building the design system in Figma first and exporting tokens as CSS custom properties meant the AI agent could reference the same values I used in design. The design-to-development gap disappeared because the source of truth was shared. Design system work is infrastructure, not overhead.

03

Documentation constrains AI — intentionally

The most dangerous thing about AI-assisted development is scope drift — the agent changes things it was not asked to change. Writing skill files before development meant every constraint was explicit. The agent knew exactly which files to touch and why. Constraint is a feature, not a limitation.

04

Test cases are design specifications

Writing 79 test cases before running QA forced me to define exactly what 'correct behaviour' meant for every feature. A test case is a design specification in disguise — it describes what the product should do, not how it should look. The QA process surfaced design ambiguities that wireframes missed.

05

Infrastructure is a product decision

Choosing Supabase free tier was a product decision that led to a database wipe during testing. Choosing Cloudflare R2 for photo storage was a product decision that keeps egress costs at zero regardless of how many clients download galleries. Infrastructure choices have UX consequences. They are not separate from design.

This is what a
design engineer ships.

Research. Strategy. Design system. Product documentation. Full-stack development. QA. Infrastructure. Beta launch. Solo. In six months.