Skip to content
Demo Project

A concept build of the KONTROVERSIONAL website — not the agency's official site.

About this build

KONTROVERSIONAL Website Rebuild

What this is

A demonstration rebuild of the site for KONTROVERSIONAL, a Jakarta digital agency running viral campaigns and a managed roster of TikTok creators. The existing site speaks to brands only. This rebuild serves two audiences at once — brand clients and prospective talents — and carries the agency's TikTok visual identity onto the web.

Every talent, client and testimonial shown here is placeholder or reference content. Nothing on this build should be read as a live commercial claim.

Two audiences, one voice

The site forks early — a homepage split plus audience-labelled nav — so brands reach services, case studies and proof in one click, while creators reach the roster, the value proposition and the application flow just as fast. The cross-sell sits on the talent profile pages, where a “book this talent” CTA hands creator traffic back to the brand funnel.

Design direction

Black, white and a single red accent — no fourth colour, no gradients. Oversized display type does the work of decoration, photography runs full-bleed, and the agency's signature “Kontroversial Take:” callout recurs across the site as a reusable component. Motion stays fast and snappy — closer to a zine than a corporate agency site.

How it is built

  • Next.js 15 (App Router, output: export)
  • TypeScript + Zod-validated content
  • Tailwind CSS, palette locked to 3 colours
  • Content as JSON in-repo — no CMS, no backend
  • Static hosting, forms via a static form service

Timeline — 4 weeks

  1. Week 1

    Foundation & Design System

    Next.js static export, closed black/white/red palette, fluid display type scale, and the signature components: Logo, TwoToneHeadline, TakeCallout, MarqueeTicker, StatBadge.

  2. Week 2

    Content Layer & Talent Pages

    Typed JSON content schema with build-time validation, the 10-talent launch roster, filterable roster grid, and the editorial talent profile layout with TikTok embeds.

  3. Week 3

    Brand-Facing Pages

    Home audience fork, /brands services and case studies, client logos, testimonials, /work, /about, and /contact with branched inquiry routing plus the WhatsApp fallback.

  4. Week 4

    Polish & Launch

    Responsive image pipeline, SEO metadata and per-page OG images, sitemap, contrast and accessibility pass, performance budget, static deploy.

Contact

Questions about this build, the scope or the timeline:

croissantsmoon@gmail.com

Two documents, each in Bahasa Indonesia or English. Pick a language — it opens in a new tab and prints straight to PDF.

  • Project PDF

    Background, scope, architecture, 4-week timeline.

    IDEN

  • Design PDF

    Palette, type scale, layout patterns, a screenshot of every screen.

    IDEN

Work

The receipts

Case study lengkapnya lagi ditulis. Sementara ini, brand yang pernah kerja bareng kami ada di bawah — angkanya kami cerita langsung.

Brands we have worked with

Want to be next?

Start on WhatsApp