006

AirDNAWebsite

Visit Site
RoleStaff Product Designer → Design Lead
CompanyAirDNA
Year2023 – 2025
PlatformMarketing Site
A stack of marketing component blocks — hero, feature grid, trust bar, testimonial, case study card, CTA.
01
Components
Overview

AirDNA's marketing site had grown organically over several years. Every new landing page, feature page, or campaign required custom design and development — no shared structure, no reusable components, no consistent patterns across pages.

As design lead, I introduced a modular marketing component system — a library of reusable blocks and page templates that could be assembled in Prismic and shipped without custom development. The system covered everything from hero sections and feature grids to testimonial cards and pricing layouts.

The result was a fundamental shift in how the marketing team shipped pages — reducing turnaround from roughly a week to about a day, with consistent quality and brand cohesion across every surface.

01

The Problem

01The Problem

Every new landing page, feature page, or campaign was a bespoke effort. Designers built from scratch in Figma. Engineers rebuilt the same patterns from scratch in code. A single page could take a week to ship, and when it finally did, it rarely matched the page shipped the month before.

The marketing team felt the cost every week. Launches slipped. Brand cohesion drifted. Engineering cycles that should have gone to net-new work were spent re-implementing heroes, feature grids, and CTAs that already existed somewhere else on the site.

What should have taken a day was taking a week — and every page looked different.

02Designing the System
02

Designing the System

The system was a library of component slices — self-contained building blocks for marketing pages. Each slice owned its layout, content model, and responsive behavior, and every slice was designed to compose cleanly with any other.

Marketing briefs specified which slices a page should use, and we assembled the page from that selection. Because every slice drew on the same token system — type scale, spacing rhythm, and breakpoints at 1280 / 720 / 360 — a design built once held up at every width without bespoke layout work.

Marketing component system
Design tokens table showing type scale, spacing, and grid values across desktop, tablet, and mobile breakpoints.Design tokens table showing type scale, spacing, and grid values across desktop, tablet, and mobile breakpoints.
Design TokensGraphik / Graphik Compact type scale, spacing rhythm, and responsive breakpoints (1280 / 720 / 360).
Component BlocksHero, feature grid, trust bar, testimonial, and split image text — 5 of 19 slices, designed for composition.
Page AssemblyBriefs specified which slices a page needed. We composed the page from that selection — every page was unique, but every slice was reused.
Prismic IntegrationEvery component maps to a reusable Prismic slice — content editors assemble pages without code.
Design tokens table showing type scale, spacing, and grid values across desktop, tablet, and mobile breakpoints.Design tokens table showing type scale, spacing, and grid values across desktop, tablet, and mobile breakpoints.
03The System End-to-End
03

The SystemEnd-to-End

This system connected content, design, and engineering into a single pipeline. Marketing worked inside predefined templates, designers assembled pages from reusable components, and engineers built once and reused across the platform.

  1. 01

    Marketing brief

    Goals, audience, and known templates as reference.

  2. 02

    Template selection

    Landing, feature, or pricing. Structure locks in early.

  3. 03

    Component assembly

    Hero, features, comparisons, CTAs — composed in Paper with tokens applied.

  4. 04

    Reusable slices

    Mapped to Prismic once. Breakpoints handled once. Reused everywhere.

  5. 05

    Live page

    Assembled from slices. Consistent, on-brand, ready to iterate.

Pipeline
ContentConstrained early by templates
  1. 01

    Marketing brief

    Goals, audience, and known templates as reference.

Design SystemComponents + tokens standardize layout
  1. 02

    Template selection

    Landing, feature, or pricing. Structure locks in early.

  2. 03

    Component assembly

    Hero, features, comparisons, CTAs — composed in Paper with tokens applied.

EngineeringReusable slices power assembly
  1. 04

    Reusable slices

    Mapped to Prismic once. Breakpoints handled once. Reused everywhere.

  2. 05

    Live page

    Assembled from slices. Consistent, on-brand, ready to iterate.

04Continuous Iteration
04

ContinuousIteration

The system didn't just speed up page creation — it enabled continuous iteration. With templates and components in place, teams could test and refine pages without redesigning from scratch. Design shifted from building layouts to optimizing performance — focusing on messaging, visual hierarchy, and conversion behavior.

Faster A/B testing, quicker iteration cycles, and a consistent way to evaluate what actually worked.

AirDNA homepage hero: miniature bayside city scene with a running tram and the Golden Gate Bridge in the distance.
Cycles on each visit· Randomized
  1. Miniature bayside city scene in daylight — AirDNA marketing hero variant.
  2. Miniature city scene at dusk with warmly lit interiors.
  3. Miniature coastal town with palm trees and a tram.
  1. Background 01Bayside miniature — daytime.
  2. Background 02City miniature — dusk, interiors aglow.
  3. Background 03Coastal miniature — bay & tram.
  1. Miniature city scene at dusk with warmly lit interiors.
  2. Miniature coastal town with palm trees and a tram.
  1. Background 02City miniature — dusk, interiors aglow.
  2. Background 03Coastal miniature — bay & tram.
Key insight~1 week → ~1 day

Top-performing homepage hero for 6+ months running.

Next Projectkonteen
002