Varmply
varmply.vercel.app ↗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, with no contracts, no metrics, and no guarantee of payment. Varmply was built to fix that.
Two users, one trust problem. Creators don't get paid until they've already done the work. Brands don't know if they got what they paid for. The design challenge wasn't about making two dashboards — it was about building a system both sides trusted enough to show up to. Escrow holds the funds. Verified metrics hold the proof. The design communicates both.
The approach. I owned design and build from first wireframe to deployed product. The homepage needed to credentialize a new product in a market with no category — so every section is doing persuasion work, not decoration. Real artist names instead of “Creator Name.” Escrow as the headline feature. A phone mockup that shows the actual UI, not a gradient placeholder. The build became part of the portfolio.
Design breakdown
Added the phone mockup after the section felt like a product page, not a product. The dashboard UI inside visualises the experience rather than explaining it.
The escrow framing answers a known real anxiety in the Nigerian creator economy. 'Escrow' does more persuasion work than a feature description — it signals Varmply as the neutral party holding both sides accountable.
Three-column grid of pain points vs Varmply's solution. The contrast between chaotic DMs and structured campaigns needed to land before any feature details.
All three mockups are code-built — CSS and hardcoded data. The goal was to sell the concept of the experience, not document a shipped interface.
Using real artist names (Ayra Starr, Rema, Davido) instead of placeholder content was a mid-build copy pivot. The product didn't change — the framing did.
Scrolling marquee of creator and sponsor quotes. The auto-scroll signals community activity without requiring the user to interact — important for a cold-start product.
GSAP curtain reveal — the footer stays fixed behind the page and reveals as you scroll past the last section. Gives a cinematic close that matches the ambition of the product.
Deep blue with 3D floating brand icons behind a glass card. The blue palette creates instant separation from the green creators page — same product, different world.
Animated counters and chart previews answer 'but does it work?' before sponsors ask. Numbers are placeholder but the data schema mirrors what will be tracked in production.
Full dashboard UI mockup embedded directly in the landing page. Showing the actual product instead of a screenshot removes doubt about whether the tool exists.
Step-by-step escrow flow visualisation. Payment transparency is the primary trust blocker for sponsors — this section addresses it before it becomes an objection.
Three-step flow showing apply → get matched → get paid. The step numbering with connecting lines collapses a multi-week process into something that feels lightweight.
Scrolling reel of creator avatar cards with genre tags. Signals an active community — even pre-launch, showing who else is here reduces the first-mover anxiety for new sign-ups.
GSAP curtain reveal — the footer stays fixed behind the page and reveals as you scroll past the last section. Per-page config tints the footer blue to match the sponsors brand.
Build decisions
Apr 23, 2026
Portfolio embed system — live iframes, not screenshots
The entire section isolation infrastructure was built so the portfolio could embed real live sections rather than static images. CSP frame-ancestors, ?embed=1 mode, ?section= param isolation, ResizeObserver height reporting, Lenis disabled in embed — all of it exists because static screenshots can't demonstrate the animation and interaction quality that's central to the design.
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.
Apr 10, 2026
Dome gallery 3D carousel: tried, reverted same day
The creator reel section was rebuilt as a 3D cylindrical dome gallery — 34 thumbnails, draggable, radius 650. Reverted same day. The drag interaction conflicted directly with Lenis page scroll and broke mobile entirely. Touch-safe drag handling was estimated too complex for a non-primary section. The two-row marquee was simpler and more legible.
Apr 10, 2026
Creator community: stripe pattern over a solid section break
The reels marquee needed visual differentiation from the surrounding all-white editorial sections. A solid purple background was considered and rejected — it would have competed with the hero accent and broken the editorial rhythm. Diagonal stripes on a light purple tint (#F7F4FF) with a soft radial glow gave it texture without a dark section break.
Apr 9, 2026
Creators page: green throughout, no audience colour mixing
The editorial print system applied per-audience means each page has its own colour register. Creators get green (#006B35) — never mixing with home purple or sponsor blue. Shared creator/sponsor section components were rejected: audience colour rules make sharing impractical without excessive prop drilling.
Apr 8, 2026
Footer absorbs the CTA — CTABanner removed
CTABanner and footer were duplicating the conversion ask at the bottom of every page. The cinematic footer already commands attention — a separate banner above it created noise and weakened both. Consolidating the CTA into the footer gave each page a cleaner close and let the curtain reveal carry real weight.
Apr 8, 2026
MotionFooter: GSAP curtain reveal over standard fade-up
A standard fade-up footer felt flat after the editorial card sections above it. The curtain reveal — footer content fixed to the viewport, clip-path wrapper in standard document flow — gives the page a cinematic closing moment while keeping Lenis scroll intact. Parallax image in the footer was rejected for performance overhead.
Apr 8, 2026
Editorial print design system replaced grey-surface SaaS
The original grey-surface cards read like a generic SaaS landing. The overhaul drew from Highsnobiety and financial newspaper aesthetics: white backgrounds, 900-weight clamp headlines, pastel-tinted data cards with per-card texture patterns (crosshatch / dot-grid / horizontal / vertical rules), ALL CAPS tracked labels, box-score stat rows with column dividers. Music culture meets financial infrastructure.
Apr 4, 2026
LiquidGlass cursor: the hero is the first impression
The cursor becoming a liquid element extends the glass aesthetic into the pointer itself. Hero sections are where first impressions form — this was a deliberate craft signal at the highest-attention moment. A magnet effect on CTA buttons was considered and cut because it would have competed with the cursor rather than complementing it.
Apr 4, 2026
Three.js backgrounds over CSS aurora gradients
Static gradients weren't matching the kinetic music-campaign energy the brand needed. 3D floating orbs and particles added depth without competing with the copy. CSS aurora gradients were kept as a fallback layer. Background colour is scoped via props so the same component serves all three hero pages without forking.
Apr 4, 2026
Header made static — scroll triggers removed
Scroll-triggered header style changes caused flickering because Lenis was overriding the scroll detection logic. Moving SiteHeader outside LenisProvider fixed positioning and eliminated the bug. A custom Lenis-compatible scroll listener was scoped and rejected — too fragile for a component that should be invisible to the user.
Apr 3, 2026
JetBrains Mono purged from the entire codebase
JetBrains Mono had leaked from code labels into body copy and stat numbers, making the product read as a dev tool rather than a consumer product. Inter replaced it everywhere. A hybrid — Mono only for stat numbers — was considered and rejected: the inconsistency broke typographic register on every page.
Apr 2, 2026
Plus Jakarta Sans chosen, then superseded by Inter
The first build used Plus Jakarta Sans — contemporary, African-adjacent, dashboard-serious. No-shadow cards with hard borders aimed for a functional aesthetic. Plus Jakarta was replaced with Inter on Apr 3 once consistency across all contexts became the priority. The system font stack was briefly considered but felt too generic for a brand launch.