BackAds — Micro-Influencer Post-Roll Ads

A front-end demo for a micro-influencer agency that connects brands to creators who add a short post-roll advert at the end of their videos. Includes a matching quiz, creator profiles, a campaign brief flow, and a pricing estimator.

Live Demo Screens
Role: Frontend Developer
Stack: HTML · CSS · JavaScript
Scope: Matching Quiz · Creator Cards · Brief Builder
2023

Project Overview

Problem

SMBs need authentic reach without big-agency budgets; creators want simple, low-effort monetisation. Finding a fit across niche, audience, and budget is messy and slow.

Solution

A lightweight flow that recommends micro-influencers via a short quiz, previews creator stats, and generates a campaign brief with a transparent post-roll pricing estimate.

Key Features

Matching Quiz
Pick goals, niche, location, platforms, budget → get suggested creators (client-side scoring).
Creator Profiles
Cards with follower bands, avg views, engagement, verticals, and sample content.
Campaign Brief Builder
Form to outline message, CTA, asset rights, deliverables, and timeline.
Pricing Estimator
Heuristic for post-roll fee based on avg views × CPM bands + usage rights.
Tracking Ready
UTM / discount-code placeholders in the brief for later attribution.

Architecture at a Glance

Frontend
HTML · CSS · JS
Data
Mock JSON (creators)
Matching
Client-side scoring
Pricing
CPM heuristics
Hosting
Static + CDN
Future
Creator Onboarding · Payouts · Tracking

→ Quiz → Suggestions → Profile review → Brief draft → (Future) booking & tracking

Notables

  • Modular components: quiz, creator card, and brief summary are drop-in sections.
  • Deterministic client logic so recommendations are explainable and tunable.
  • Designed to slot in a backend later (auth, creator verification, offers, payouts).

Screens

Outcomes & Learnings

UX Thinking
First project where I focused heavily on how users interact, from quiz flow to visual feedback and clarity in navigation.
UI Growth
Learned to balance bold visuals with function, creating a layout that feels clean but still guides users naturally through the quiz.
Feature Expansion
Built a reusable modal system for the pricing section, improving how extra details and plan options are presented without leaving the page.