Back to web design

Case Study · B2B Marketing Website

Headlands
Marketing.

A veteran-owned information design firm turning dense technical research into briefings and public-facing communications. I designed the full five-page site — research, structure, UX/UI and visual language.

Mobile home — headlandsmarketing.com

Client

Headlands Marketing LLC

My role

UX/UI & Visual Design · Content structure

Platform

WordPress

Scope

Home · About · Process · Capabilities · Contact

Serious work,
said simply.

Headlands sells clarity to people who live in dense material — agency staff, prime contractors, researchers. The site had to feel institutional and calm, never startup-flashy, while still looking designed.

The design system leans on editorial print: a serif voice, generous rules, color used as punctuation instead of decoration.

I designed all five pages — layout, typography, photography direction and content structure — with accessibility (WCAG 2.1 AA contrast and type sizing) built into the palette from day one.

Design System

Typography

Aa

DM Serif Display — headlines & titles

Aa

Inter — paragraphs & UI text

The serif carries authority and a print-document heritage that public-sector readers recognise. Inter keeps long-form paragraphs, form labels and navigation neutral and highly legible at small sizes.

Color

Ink Navy

#1E1E24

Headlands Gold

#B08428

Fog Grey

#F1F1F1

Periwinkle

#8C9BF5

Signal Yellow

#E9B421

Paper

#FFFFFF

Ink navy and fog grey do the structural work; gold marks every action and eyebrow. The periwinkle and signal yellow blocks appear only once — on the differentiators grid — so the page has a single point of surprise.

Five Pages

The site, page by page.

Scroll inside a screen to browse it, or click to open it full size.

01Home

Earning trust in five seconds

Challenge: agency decision-makers scan a homepage for credibility, not features. My approach was to lead with a single plain-language promise over a full-bleed aerial, then alternate dark text panels with photography so the three service pillars read as a rhythm instead of a list.

  • Set an editorial, institutional tone with serif headlines and generous rules.
  • Moved the agency logo bar high in the scroll so proof lands before the pitch.
  • Built hierarchy with contrast and spacing only — no animation, no gradients.
headlandsmarketing.com
02About

Making a small team read as an advantage

Challenge: a boutique firm competing against large primes. I structured the page as a single centered narrative so nothing competes with the people, and turned the certifications — DVBE, SDVOSB, WOSB — into a visual credential rather than fine print.

  • Gold-ruled pull quote gives the certifications the weight of a headline.
  • Consistent black-and-white portraits keep the team grid calm and equal.
  • Value pills replace a bulleted list so the culture is scannable at a glance.
headlandsmarketing.com
03Our Process

Turning a service into something countable

Challenge: 'we help you communicate' means nothing to a procurement officer. I designed the process as a five-step timeline with oversized numerals on a dark field, so the intangible becomes a sequence a buyer can picture and budget against.

  • Hairline dividers build a five-column rhythm that stacks cleanly on mobile.
  • The dark section acts as a mode switch: how we work, not what we sell.
  • Closing line reframes the deliverable as action, not another report.
headlandsmarketing.com
04Capabilities

A capability statement worth reading

Challenge: government buyers expect a PDF capability statement, and most firms just link one. I designed the content as a page — three capability columns, a four-quadrant color block for differentiators, past performance cards — and kept the PDF one click away for procurement workflows.

  • Color-blocked quadrants break the grey and give the page one point of surprise.
  • Past performance cards name the client first — the credential does the selling.
  • Download CTA repeated top and bottom to match how buyers actually skim.
headlandsmarketing.com
05Contact

A form that qualifies, not interrogates

Challenge: inquiries arrive from primes, agencies and partners, each needing different routing. I grouped the fields into three short blocks and made the inquiry type a checkbox row, so a long form never feels long and the lead arrives pre-sorted.

  • Inquiry checkboxes remove a round of qualifying email.
  • Solicitation details are optional, keeping required fields to a minimum.
  • The gold full-width submit is the only saturated element on the page.
headlandsmarketing.com

Built for procurement, read by people.

The finished site gives Headlands a credential-forward presence that works in a proposal, an email signature, or a cold visit from a program manager — with the capability statement always one click away.

Every layout was designed responsive-first: the five-step process collapses into a stack, the differentiator quadrants become full-width bands, and the contact form stays single-column on every breakpoint.

All web projectsNext — Kimelo