Skip to content

WDM Task — Research Design References Before Building

Updated
2026-06-02

Date: 2026-06-02. Task type: Task methodology (not manager methodology). See _template.md §"Two document types."

1. Purpose + triggers

Purpose: before building or rebuilding a marketing/storefront/rental site, walk a deliberate set of best-in-class references in the same vertical to capture what good looks like. The output is a 1-page design-language brief that the build phase consumes. Skipping this step is how sites end up looking like 2014 Bootstrap templates with brand colors swapped.

Trigger patterns:

  • "Build [property] from scratch" (greenfield).
  • "Rebuild [property]" / "redesign [property]" / "make [property] look amazing."
  • "The site looks dated / generic / utilitarian — let's elevate it."
  • "We're a [premium tier] in our market but the site doesn't say so."
  • Any time you're about to make significant typography, color, or layout decisions on a property you've never built before in that vertical.

Do NOT trigger this task for:

  • Small content additions to a property whose design language is already established (add a guide, ship a new card, fix a layout bug). Use audit-existing-site.md instead.
  • Sister properties of an existing ATG-family site whose design language is already documented and intentional.

2. Universal core — what every research pass does

Regardless of vertical, every research pass produces these artifacts:

  1. Reference list with URLs you actually loaded — 6-10 sites minimum. Mix of tiers (national leader, mid-market, premium niche, adjacent vertical). Cite the URL for every observation; if a site blocked you (403, CF challenge), say so and skip — do not fabricate observations.
  2. Per-site capture sheet — 10 dimensions documented for each site (see §3).
  3. Pattern synthesis — 3-4 consistent moves (table-stakes), 2-3 differentiating moves (used by 1-2 sites, clearly working), and what separates premium from utilitarian in this vertical.
  4. Design-language brief for our build — fonts, colors, grid, motion, photography direction, conversion choreography, trust signals. One page. Build phase consumes this; no decisions deferred to "I'll figure it out while building."

3. Situational lenses — what to capture per site

Use this lens checklist on every reference site. Don't summarize generically — get specific.

Lens What to capture Good answer shape
Typography Display font family + weight + size scale, body font, mono usage "Inter 700 / 56px desktop / 38px mobile for h1; Inter 400 / 17px for body; JetBrains Mono for spec values"
Color palette Primary, secondary, accent, semantic (success/warning/error/info), neutral scale Hex codes if visible via dev tools, otherwise close approximations + the name (e.g. "muted forest green, ~#2d5d31")
Layout grid Container max-width, gutter, column count, hero proportions "1200px container, 24px gutter, 12-col grid, hero 60vh on desktop / 100vh on mobile"
Hero treatment Photo / video / solid / pattern? Headline length? CTA placement? "Full-bleed worksite photo, headline 8 words, two CTAs side-by-side (primary + secondary), trust strip below"
Inventory grid Card aspect ratio, photo treatment, price prominence, hover behavior "16:10 photo, price as the largest single element in the card after the photo, hover = subtle lift + shadow"
Detail page Buy/reserve box position, spec table format, photo gallery type "Sticky right rail buy-box at lg+; below-hero on mobile. Specs as 2-col dl. Gallery: hero + 4 thumbnails, no lightbox"
Conversion choreography Clicks from interest → committed? Form length? Trust signals on path? "3 clicks from hero CTA to submitted form. 5 fields. Trust strip + warranty card visible at submit"
Photography style Staged / candid / drone? People in shots? Color treatment? "Candid worksite, no models, color-graded warm"
Motion / interaction Hover states, scroll behaviors, transitions "Subtle lift on cards, no page transitions, sticky nav shrinks on scroll"
Trust signals Years in business / fleet size / locations / certs / logos / testimonials "Year established in footer, 'X trucks in fleet' in hero, customer logos in a strip below hero"

4. Procedure — the loop

The research-to-brief loop is six steps. Total time: 2-4 hours depending on vertical breadth.

Step 0 — Confirm the brief

Before opening a browser, confirm with the principal (or work from prior session notes):

  • What is the property's positioning? (Premium / utility / marketplace / boutique.)
  • Who is the customer? Be specific — "construction site superintendent ordering a 3-month truck rental from a tablet at the site" beats "B2B buyer."
  • What is the differentiator? "Every truck rebuilt by us" / "37-year track record" / "only same-day delivery in market."
  • Are there brand constraints inherited from sister properties? (ATG family: SEI/SWTP = DM Sans navy/orange; IMA = Lato black/gold; CTP = Public Sans green/yellow. New sites should feel family-adjacent but not duplicate.)

Step 1 — Build the reference list

Aim for 6-10 sites across 4 tiers:

  • 2-3 Tier-1 national leaders — they set the table-stakes. United Rentals, Sunbelt, Herc for equipment rental; OEMs and major dealers for parts; etc.
  • 1-2 Mid-market regional — closer to our scale, often more useful than national.
  • 1-2 Premium niche boutiques — specialized operators with disproportionate design polish. Hunt these — they often have the most stealable ideas. Search vertical + "premium" or vertical + city.
  • 1-2 Adjacent verticals — same buyer, different product. (Equipment rental ↔ equipment sales marketplace; auto parts ↔ industrial supply; etc.) Cross-pollination is where unique moves come from.

Sources for finding references: - Awwwards (filter by vertical / by year / by element) - SiteInspire (vertical filters) - Top 5 Google results for the customer's most common search, not for "best [vertical] websites" - Industry trade publications' "best digital experience" award lists - LinkedIn/X — search for "redesigned our site" + vertical

Step 2 — Walk each site, capture the 10 lenses

Use Claude in Chrome if WebFetch is blocked (most CF/Akamai-protected sites will be). If Claude in Chrome is unavailable, write what you can from screenshots + visible URLs and flag the gaps explicitly. Empirical observation beats imagined design every time.

Per site, write 200-400 words. Include the URL of the page(s) you looked at.

Step 3 — Pattern synthesis

Look at the 6-10 capture sheets together. Pull out:

  • Consistent moves (3-4): what shows up in 4+ of the references? These are vertical table-stakes — skip them and the site reads as out-of-genre. Examples: heavy-equipment-rental sites all use full-bleed worksite hero photos, all show fleet size somewhere prominent, all use a YMM (year/make/model) or capacity selector early.
  • Differentiating moves (2-3): what shows up on 1-2 of the references and clearly works (you saw it and it stuck with you)? These are stealable ideas. Don't copy — adapt.
  • Premium vs utility separator: what single dimension most separates the premium-feeling sites from the utility-feeling ones? Often it's photography quality, sometimes typography, sometimes whitespace, occasionally motion. Name it.

Step 4 — Design-language brief (the deliverable)

One page. Sections:

  1. Positioning — one sentence about what tier and feel we're going for.
  2. Fonts — display + body + mono. Specify weights and a basic scale (h1/h2/h3/body/small/mono).
  3. Colors — primary, secondary, accent, semantic, neutral scale. Hex codes.
  4. Grid — container max-width, gutter, column count, breakpoint rules.
  5. Component library shape — describe (don't draw) the 5-8 component primitives the build will use (button, card, badge, table, form field, hero, nav, footer).
  6. Photography direction — what photos to shoot or source. If we don't have photos yet, flag it (don't fabricate stock).
  7. Motion philosophy — restrained / lively / utility / playful. One sentence.
  8. Conversion choreography — what's the click-path from landing to submitted? How many clicks? What trust signals at each step?

Step 5 — Build with the brief in hand

The build phase (wdm-website-build.md for greenfield, audit-existing-site.md for rebuilds) now has concrete inputs. Don't deviate from the brief mid-build without writing down why; that's how design coherence dies.

5. Composition references

This task composes with:

  • wdm-website-build.md — the build methodology consumes the brief produced here.
  • audit-existing-site.md — for rebuilds, the audit identifies what's broken; this doc decides what to replace it with.
  • patterns.md — reusable patterns from production runs (sitemap discipline, JSON-LD parse verify, BEGIN/END swap markers, etc.) — apply during the build phase, not the research phase.

6. Non-goals

  • This is not a competitor analysis for positioning, pricing, or product. That's a separate strategic exercise.
  • This is not UX research with real users. We're studying what good looks like across the vertical, not validating with our customers.
  • This is not an excuse for analysis paralysis. Time-box to 2-4 hours total. 8 references > 20 references for our purposes.

7. Failure modes & non-fabrication rules

  • Do not fabricate observations. If WebFetch returned 403 and you couldn't load Claude in Chrome, write "could not load" — do not invent design details.
  • Do not invent hex codes by guessing at screenshots. Either pull from dev tools (Claude in Chrome) or describe in named terms ("muted navy, close to #1a2540 but eyeballed").
  • Do not recommend fonts you haven't seen working in this vertical at this tier. "DM Sans because it's modern" is weak; "DM Sans because URentals + CompactEquipment.co + 2 of the boutiques use it for display and it reads as the current premium-utility default" is strong.
  • Do not skip premium niches. Hunting boutique operators with great design is the highest-leverage hour of the research pass. Their good ideas haven't been copied yet.
  • Do not let the brief get vague. If a section ends up "modern and clean," you didn't research enough — keep going until you can name specifics.
  • Do not ship a brief and then ignore it mid-build. If you change direction, update the brief and note why. A drifted brief is worse than no brief.

Worked example

See projects/website_design_manager/ctp-v3-research-vanderhaags-and-comps.md — empirical research on Vander Haag's via Claude in Chrome that fed the CTP v3 spec. Note especially how the algorithm-decoding moves (Similar Items, Frequently Bought Together) were extracted from observed behavior, not assumed.

A more recent worked example (SWTR rebuild, 2026-06-02) is in agent_comms/from_website_design_manager/20260602-WDM-swtr-rebuild-handoff.md.