Varmply
varmply.com ↗A creator-brand marketplace for the Nigerian music economy — linking artists to sponsorships with verified performance and escrow payouts.
The brief
Nigerian music is having a global moment. Ayra Starr sells out London, Burna Boy headlines Coachella. But most working artists, the ones with real audiences and real influence, still negotiate brand deals over WhatsApp. No contracts, no metrics, no guarantee anyone gets paid.
Varmply set out to give that economy the infrastructure it never had: a marketplace where sponsors and creators transact with money held safely and performance proven rather than promised. I owned it end to end, design and build, from the first wireframe to the deployed product.
The problem
Underneath every WhatsApp deal is the same two-sided trust gap. Three problems kept surfacing.
Sponsors pay upfront and can't verify what they got.
Brands wire money before anything ships, then have no recourse when creators ghost, post late, or deliver content that misses the brief. No standard contract, no neutral party holding either side to the deal.
Creators do the work and still don't get paid.
Payment runs on goodwill. A creator delivers, then waits, chases, and often eats the loss. After enough burns, the best creators stop trusting first-time sponsors at all.
Nobody can agree on what a campaign achieved.
Reach and engagement get inflated with cropped screenshots. Brands can't pull verified numbers and creators can't prove theirs are real, so every post-campaign conversation becomes a standoff.
The solution
Two mechanisms close the gap. Everything else in the product is built around them.
A sponsor funds the campaign before any creator applies, and the budget sits locked in escrow. Creators see the funds exist before they commit a minute of work, so trust no longer rides on a stranger's goodwill. Money releases only when the agreed terms are met.
Varmply connects to TikTok and Instagram over OAuth and pulls performance straight from the platform. No self-reported screenshots, no inflated numbers. The data both sides see is the same data that triggers payout.
From there the product splits cleanly: a marketing site that has to credentialize a product in a market with no category yet, and a web app where sponsors run campaigns and creators get paid.
Research — validating the approach
I didn't arrive at escrow and verified metrics from the outside. I have spent time close to this scene, and I took the problem straight to the people living it: creators chasing payments that never landed, and sponsors burned by deals that went nowhere.
The same story came back every time. Creators wanted to know the money was real before they posted. Sponsors wanted proof before they paid. Both kept describing the same missing middle. Escrow and verified metrics were not a guess at what might help, they were the two things people named back to me in their own words.
That is also why the design leads with trust signals instead of feature lists. The objection to clear was never what the product does, it was why anyone should believe it.
The rebuild
A design file and a shipped product are two different things. Partway through the build, the gap between them got too wide, too fast.
We had a deadline and a client watching. Engineering was moving faster than the design file could stay current, and every round of feedback added another day to a timeline that had no days left to give. The handoff between what was designed and what was shipping stopped working. I stopped trying to fix the handoff and removed it instead.
I moved into the code directly. Over a two-week sprint, 111 commits, every major surface rebuilt: dashboard, campaign builder, wallet, analytics, marketplace, settings, creator and sponsor profiles. No Figma. Design decisions made in the browser, in real time. Every component I knew should exist, I built it. Every interaction I had spec'd but never seen implemented, I coded it. The muscle memory from five years of design translated directly into code once I stopped routing it through someone else.
The feedback loop went from days to minutes. That is the actual reason this worked. Closing the distance between deciding and shipping changed what was possible under pressure: a decision got made, built, and judged in the same sitting instead of surviving a round trip through a file.
111
Commits in the sprint
180+
Design tokens
54
Component files
134
Production imports
The sprint produced a system, not just screens. A real token architecture: 180+ CSS custom properties across semantic color ramps for gray, primary, secondary, tertiary, success, warning, error, pink, blue, and purple, plus a full typography scale and a gradient and shadow system. On top of it, a 54-file component library that now carries 134 production imports across the app. The other engineer kept shipping features through the same window, so this was never a solo repo. I led and executed the visual system rebuild.
And a rulebook. Somewhere in that sprint I wrote down a rule that ended up governing everything after, and it grew into a 271-line internal rulebook with 16 hard constraints on how the frontend is allowed to behave. One of them matters more than the rest.
“The frontend explains backend truth. It never invents, infers, or smooths over system reality.”
docs/frontend-rulebook.md · 271 lines · 16 constraints
For a marketplace holding real money between creators and sponsors, that rule has teeth. It bans optimistic rounding on financial figures and payout estimates the backend has not confirmed. No fake states, nothing shown that is not true. Escrow only works if people believe the numbers, and people only believe numbers that never lie to them.
The same constraint shaped the marketing site. The phone mockups are not screenshots. They are 535 lines of hand-built TSX, real SVG status bar chrome, four full application views, tap gesture ripples and actual screen transitions. The bento grid under the line “Real product. No fake dashboards.” is a live component too, real layouts in color-blocked cards. That line was a build constraint before it was marketing copy, and the section below is the evidence: every block is the deployed product, embedded live.
Design decisions
This is the running decision log I kept while designing and building Varmply — dated as each call happened, not reconstructed for this page. Every entry: the decision, the alternative I rejected, and why.
Apr 22, 2026
Waitlist split by audience at the point of conversion
A single email field loses the most valuable signal at signup — who the person is. Splitting /waitlist into two role cards (sponsor vs creator) means outreach and onboarding can be prioritised from day one. A dropdown was considered and rejected: the visual split reinforces the two-audience positioning far more clearly than a collapsed select.
Apr 22, 2026
Sponsors hero: animated campaign prototype over static mockup
A static phone mockup on the sponsor hero wasn't demonstrating the product's core value. The animated prototype cycles through three live campaigns — overview → submissions → video player, with skeleton loaders between transitions. Concrete proof of what running a campaign looks like, not an illustration of the concept.
Apr 16, 2026
All CTAs unified to one ask per page
"Get Early Access", "Learn More", "See How It Works" — three labels on the same page create decision friction. Unifying to "Join the Waitlist" (primary) and "How It Works" (secondary) simplified the conversion path. "Request Access" framing was considered and cut: it felt too gatekeeping for a product trying to build creator trust.
Apr 16, 2026
Platform scope cut to TikTok + Instagram only
YouTube and Twitter appeared in copy, FAQ, and UI mockups despite the product not being live on either. Listing unsupported platforms is actively misleading on a waitlist product. The cut also strengthened the brand position — Varmply is short-form social, not broadcast. "Coming soon" labels were considered and rejected because they weaken trust.
Apr 16, 2026
Creator hero: rising engagement icons over copy
The creator audience reads engagement metrics as a signal of earning potential. Adding heart/comment/share/fire icons rising inside the glass panel made the hero feel alive and audience-specific without adding a single word of copy. Emoji icons were considered and rejected for inconsistency with the Lucide design system.
Apr 15, 2026
Home hero phone replaced with portrait treatment
The code-built phone mockup was reading as too "app launch" — too direct, too product-forward for a brand about human creative work. Replacing it with a portrait treatment grounded the product in actual use. The 3D background was scoped via props per-page to avoid forking the component for each audience section.
The engineering calls behind the case study itself — the live-embed system, load performance, and snapshotting. Separate from the product design work above.
How it evolved
The design didn’t arrive fully formed. Here is the home page at two earlier points in its life — the full pages, pulled straight from the repo’s own history — before the rebuild reset all of it.
The two-week rebuild threw the template out entirely — brand, copy, layout, and the product it was selling. What replaced it is running live below.
The live product
Not screenshots — the deployed product itself, embedded live: the marketing site first, then the auth and onboarding flows, then the web app. Every design decision above, running in production.
Purple full-bleed hero with two CTAs — one for sponsors, one for creators — so both audiences self-select at entry. The glass panel holds a portrait of a real artist rather than a device mockup, making the product feel like it's already in use. Floating platform pills (Instagram reach, TikTok views) ground the abstract pitch in the numbers creators actually track.
Four-step sponsor journey in editorial bento cards. Ghost step numbers sit behind each card as background depth — borrowed from print design to add hierarchy without visual noise. Phone mockups inside each card visualise the flow without relying on real screenshots.
Creator-facing value prop — contrasts the informal DM economy (no contracts, no accountability) with Varmply's structured campaign flow. Positioned before any feature detail so the problem lands before the solution.
A masonry grid of real creator thumbnails tied to active campaigns. The goal was to signal a live creator pool to sponsors before the platform fully launches — presence before proof.
Creator community section anchored in the Nigerian music economy — Ayra Starr, Rema, Davido named explicitly. Specificity was a deliberate choice: a generic 'creator economy' framing wouldn't signal who this is actually built for.
Six testimonial cards split by role — creators and sponsors — in tinted editorial frames. Auto-scroll signals community momentum without requiring any interaction. For a pre-launch product, the testimonials do the job of making the platform feel inhabited.
GSAP curtain reveal — the footer stays fixed beneath the page and lifts into view as the last section scrolls away. Gives the site a cinematic close that matches the ambition of the product rather than just stopping.
Campaign stat cards in editorial poster format. The large headline numbers — 148K reach, 9.1% engagement — pull the eye before any explanatory copy. Proof before pitch: the numbers are the argument, the body copy is the footnote.
The trust anchor of the whole site — ₦0 lost to non-performance as the hero stat. The asymmetric layout (large feature card + two stacked) breaks down lock → validate → return in one scan. Payment uncertainty is the primary sponsor objection; this section answers it before they ask.
Creator-side step breakdown: browse campaigns, apply, post content, get paid. Mirrors the sponsor flow in structure but reframes every step around the creator's actions and incentives. Phone mockups inside each card show the exact screen they'll see.
Email + password entry with Google OAuth. The screen links directly to Sign In for returning users — no separate page needed. Single-screen entry, no multi-step friction before role selection.
Role selection is the first decision — creator or sponsor. Each choice routes to a different setup path. Clicking through the screens mirrors how a real user would move: role → profile → platform connection (creator) or org setup (sponsor). The split keeps onboarding specific to what each role actually needs.
The sponsor's primary view: campaign grid, budget distribution ladder, and a 30-day performance chart. Stat tiles are lifetime figures — a sponsor always knows their total reach and creators worked with at a glance.
The sponsor campaign workspace: tabbed by state (Active, Draft, Completed, Archived). Each card shows creator slot fill rate, budget utilisation, and days remaining — the three numbers a sponsor actually checks mid-campaign.
Aggregate performance across all campaigns: total impressions, engagement, and distributed budget over a selectable time window. Designed so a sponsor can answer 'is this working?' without opening individual campaigns.
The full 4-step campaign creation flow in one interactive embed. Step 1 collects identity (name, artist, cover). Step 2 sets content rules (platform, hashtags, format). Step 3 shows a live budget projection — estimated impressions and engagement update as the number changes. Step 4 is the final review before escrow is funded and the campaign goes live.
The creator's home: earnings, pending payout, active campaigns, and a performance chart. Kept deliberately minimal — creators are on mobile, so the sidebar collapses and the stats stack vertically.
Where creators discover campaigns. Three filter tabs (All, Open now, Available to me) surface the right campaigns for each creator's platform and audience. Eligibility is checked server-side so creators never waste an application.
The creator's financial layer: available balance, tracking earnings (locked until campaign verifies), pending payout, and transaction history. The three-bucket breakdown makes the escrow model legible — creators know exactly why money isn't immediately withdrawable.
Conclusion & next steps
The result is the product you just scrolled through: a complete, deployed creator-brand marketplace, designed and built end to end. Marketing site, authentication, onboarding for both roles, and a working web app for running campaigns and tracking payouts. Every screen here is the real thing running live, not a mockup.
Carrying it from a blank canvas to something live and coherent, owning both the design and the code, is the part I am proudest of. Varmply is pre-launch, opening through a waitlist, and the work now shifts from building the product to proving the loop with real money and real campaigns.
Open the waitlist to a first cohort
Bring on an initial set of creators and sponsors so the marketplace has both sides live from day one, not just one half waiting on the other.
Prove the escrow-to-payout loop end to end
Run real money through the full cycle: fund, lock, verify, release. The mechanism is designed and built; the next milestone is watching it hold under actual deals.
Harden verification on live platform data
Tune the TikTok and Instagram integration against real performance numbers, where the edge cases the design cannot predict will surface.