Master Data Wrangler masterdatawrangler CRM · DATA · AI AGENTS
VISITOR No. 005018
BOOK AUDIT >
< BACK TO PROJECTS
WEB DESIGN & DEV

masterdatawrangler.com, Start to Finish

WordPressCustom theme (PHP)Custom blocksVanilla JSREST APIGoogle Analytics 4Mailgun SMTPSchema.org
// HOW IT WAS MADE
01 DISCOVERY Wrote the positioning before the layout: who the site is for, what they must believe by the end of the first scroll, and which single action counts as success.
02 CONTENT MODEL Mapped case studies, log entries, and engagement tiers to custom post types and fields, so structure came before styling and nothing later required a code change to publish.
03 PAPER WIREFRAMES Sketched every template by hand and argued with the layout on paper, where changes cost nothing. The sheets below are those pages, cleaned up.
04 COPY + IDENTITY Briefed a copywriter on voice and proof points and a designer on the logo and visual system, then edited both against the wireframes rather than the other way round.
05 BUILD Custom WordPress theme, hand-written blocks, vanilla JS for the interactive rail and filters, and REST endpoints where the front end needed live data.
06 INSTRUMENT + LAUNCH GA4 custom events on every CTA and expand, Mailgun SMTP for deliverable form mail, schema markup for AI and search retrievability, then a staged launch with real submissions tested first.
SKETCHBOOK › 4 PAGES what each page had to do

Home

/
header with standing cta
logo
work services log contact
book audit
hero + operator profile
positioning line + two ctas
profile card, live status
proof bar — numbers, inverted
10,000+
700+
4 → 1
8 yrs
case study rail, one open at a time
featured case study
capabilities 01–06
01
02
03
04
05
06
engagements — one tier highlighted
teardown
architecture
ai enablement
site build
One scroll has to answer: what does he do, has he done it before, and how do I start. Proof sits above the fold-and-a-half.

The rail is the hard part: one case study open, the rest collapsed to spines, so the page proves range without becoming a scroll marathon. Proof numbers sit inverted right under the hero because that band is the only thing a skimmer is guaranteed to see.

Work

/projects
intro + report index
field reports + filters
index stats card
featured report with pipeline diagram
form → workflow → routing → owner
grid of everything else
Filterable index, one featured report up top. Every card leads with the outcome, not the tech list.

Every card leads with the outcome line, and the featured report carries the pipeline diagram so a technical reader can judge the architecture in four seconds without opening anything.

The Log

/log
pillar filters
ai · crm · data · growth
expandable entry rows
post title — date — abstract on expand
Writing is the credibility engine. Expandable rows so scanning is cheap and reading is a choice.

Rows expand in place instead of navigating away. Scanning stays cheap, reading is opt-in, and the pillar filters double as a statement of what I actually work on.

Contact

/#contact
form · expectations · details
name · email · message
replies in 24–48h, never shared
email · github · rss
closing cta band
your stack isn't broken, it's just undocumented
Same promise as the hero: a free teardown, no pitch. Set the reply expectation right beside the send button.

The form repeats the hero promise verbatim, because the gap between what a CTA offers and what the form implies is where most inquiries evaporate. Reply expectation and privacy note sit beside the button, not in a policy page.

VISIT THE LIVE SITE ❯ masterdatawrangler.com/

01 // THE PROBLEM

A consulting site has to do three jobs at once — explain the work, prove it, and reliably deliver the inquiry to an inbox. Most personal sites quietly fail the third one, and a static brochure could not carry interactive case studies, a filterable writing archive, or event tracking granular enough to tell me which section actually converts.

02 // THE APPROACH

Treated it as an application, not a brochure. Wireframed every template on paper first, briefed a copywriter on positioning and a designer on the logo and visual direction, then built a custom WordPress theme with hand-written blocks for the interactive case-study rail, the filterable log, and the engagement tiers. Content is modeled as custom post types so new case studies and posts publish without touching code; the front end runs on vanilla JS with no framework tax. GA4 carries custom events on every CTA and case-study expand, and Mailgun handles SMTP so contact submissions are traceable end to end.

WORDPRESS GA4 MAILGUN SMTP INBOX

03 // THE RESULT

One site that carries the whole offer, publishes without a developer, and reports on itself — plus a theme architecture and instrumentation checklist I now reuse on every client build.