GigRadar Landing Page | Joseph Wijaya

Role: Product Designer & Front-end
Type: Full-time
Client: GigRadar.io
Platform: Web
Timeline: Jan 2025 to Sep 2026

TheProblem

GigRadar's pages lived across two site builders, so the brand drifted from page to page and every new landing page was hand-built and slow to ship.

TheSolution

One Next.js codebase with a shared design system and a reusable page kit, so a new landing page is copy and data on top of components that already match, and the whole site converts through one demo funnel.

TheProcess

Design

Step 01

Brief

One marketing site to replace a patchwork of Webflow and Typedream pages, where a visitor lands, reads the story and books a demo, and a new landing page ships in an afternoon instead of a week.

Audience: Upwork agencies
One goal: booked demos

The token set: nine colour tokens, the type ladder from H1 to Paragraph M, and the spacing ramp

Step 02

Design system

Colour, type, spacing and radius written once as design tokens, in rem, so every page inherits the brand without a single hardcoded value.

Tokens
SF Pro type scale
Brand gradient

Step 03

Components

The shared shell drawn as reusable blocks in Figma, a navbar, footer, hero, comparison table and FAQ, each with the states a marketing site actually uses.

NavBar
Hero
Comparison
FAQ
Footer

Step 04

Landing-page kit

The section primitives a landing page is built from, a hero band, checklist, video, case-study cards and ROI blocks, designed so a page is data on top of parts that already match.

Section primitives
Data-driven pages

Step 05

Motion

Hero and feature animations built in Framer Motion and dotLottie, and the lead-flow diagram that carries the hero.

Framer Motion
dotLottie
Lottielab

Build and Development

The stack in three layers: Next.js App Router and TypeScript, Tailwind over compiled design tokens, Vercel behind the Cloudflare edge

Step 06

Tech stack

Next.js App Router with TypeScript and Tailwind, the tokens compiled into the Tailwind theme so the design system is the source of truth in code too.

Next.js
TypeScript
Tailwind

Step 07

Architecture

NavBar, Footer, FAQ, comparison and CTA built once as components and reused across every route, so the whole site reads as one product.

One navbar / footer
Reused per route

Step 08

Core logic

The Figma section kit implemented as composable React sections, so a new landing page is copy and data rather than new layout.

Composable sections
Copy + data

Nine of the rebuilt pages as a contact sheet: home, the autopilot lander, Done For You, the CRM, Case Studies, Partnerships, the API integration, the MCP page and the request-demo page

Step 09

Migration

Twenty-plus Typedream and Webflow pages rebuilt onto the kit, reusing one shared image pool so the set stays consistent and light.

20+ pages
Shared image pool

Step 10

Demo funnel

The request-demo form with country and revenue routing, embeddable form-only where a landing page needs it inline, wired to the booking and analytics flow.