Strategy check (Lean Canvas, 1-screen).

Business context is well-defined from the founder brief, so the canvas is filled rather than diagnosed. [VALIDATED] with the product owner.

// BUSINESS-CONTEXT.md § Lean Canvas (Maurya, 2010). Filled in deep mode.

JTBD personas — two-sided marketplace.

Per Christensen, archetypes are framed by the job hired, not demographics. Two archetypes drive the marketplace; a third (Admin) is operational and covered briefly. [INFERRED] from founder domain knowledge and trade-subreddit reading; recommended to validate with 5–8 user interviews using the JTBD switch-interview method (USER-RESEARCH § 1.6) before build.

Empathy maps.

Per Gray (XPLANE, 2010). One map per archetype. The gap between Says and Does is where most marketplace design insights live.

Problem statements.

Behavioural analysis.

Applied stack: Fogg B = MAP for diagnosing each key action, Eyal Hook Model for engagement loops, Thaler & Sunstein for the few defensible nudges. Cialdini patterns called out where used.

a · Fogg B = MAP per key action

// BEHAVIORAL-DESIGN § 1 (Fogg, 2009 / "Tiny Habits" 2020)

b · Hook cycle (Eyal, 2014)

// BEHAVIORAL-DESIGN § 2. Manipulation matrix: Facilitator quadrant — engagement design is ethically grounded because the product genuinely improves both users' lives.

c · Nudge inventory

// BEHAVIORAL-DESIGN § 3 (Thaler & Sunstein) + UX-PATTERNS § 3 (Cialdini)

d · Dual-process (Kahneman) targeting

Journey maps.

Two journeys cover ~80% of the marketplace volume. Phase library per USER-RESEARCH § 3.4. Emotional curve is the design priority signal: invest where the dip is steepest.

Information architecture.

Two surfaces: a hash-routed SPA for logged-in app behaviour, and a server-rendered SEO layer for discovery. They co-exist on the same WordPress and are intentionally distinct so Divi/JS conflicts can't break either one.

/#/home              Hero · trades · how-it-works · blog
/#/jobs              Filterable list (1,000 init, fallback fetch)
/#/job-detail?id=    Detail · apply CTA · save
/#/apply?id=         Single-screen application
/#/about             Pricing & how-it-works
/#/register          Role chooser → worker | employer
/#/login             Async login, async logout (WPS guard)
/#/profile           Seeker dashboard
/#/employer-dashboard Employer home
/#/post-job          Post / edit a job
/#/search-candidates Candidate browser
/#/worker-profile?id=Worker detail (locked / unlocked)
/#/saved-jobs
/#/applications
/#/admin             Admin shortcuts
/#/blog              Blog index (delegates to WP)

/                              SPA root
/jobs/{trade}/                 Trade landing (12)
/jobs/{state}/                 State landing (50)
/jobs/{trade}/{state}/         Trade × state (600+)
/job-directory/                HTML sitemap, all combos
/sitemap-jobs.xml              XML sitemap (~662 URLs)
/sitemap-jobs/                 Non-extension fallback
/blog/                         WP posts page
/blog/{slug}/                  WP post
/about, /contact, …            Divi-managed
/flj-admin-2026                WP admin (WPS Hide Login)

// Architecture corresponds to Garrett's 5-planes — surface (Divi + SPA), skeleton (hash + REST), structure (role-gated routes), scope (pricing + vetting features), strategy (two-sided marketplace).

Master flowchart.

Double-Diamond Deliver output. Entry points (Reddit / SEO / direct), the two main loops (apply, unlock), all decision nodes (auth, role, unlock fee toggle, vetting tier), and success / failure terminals. Each rounded node maps 1:1 to a wireframe in §2.

flowchart TD
    %% Entries
    R([Reddit ad]):::ent --> H
    G([Google / SEO]):::ent --> L[/SEO landing/]
    D([Direct]):::ent --> H[Home]
    L -->|"CTA: View jobs"| H

    %% Public browse
    H --> J[Browse jobs]
    J -->|filters| J
    J --> JD[Job detail]
    JD -->|Save| AUTH1{Logged in?}
    JD -->|Apply| AUTH1
    AUTH1 -- No --> RG[Register]
    AUTH1 -- Yes --> APP[Apply form]
    RG --> ROLE{Role?}
    ROLE -- Worker --> WP1[Seeker profile setup]
    ROLE -- Employer --> EP1[Employer profile setup]
    WP1 --> APP

    %% Worker apply loop
    APP --> APPOK[/Applied · toast/]:::ok
    APPOK --> DASH_S[Seeker dashboard]
    DASH_S -->|Saved jobs| J
    DASH_S -->|Edit profile| PROF_S[Worker profile editor]

    %% Employer demand loop
    EP1 --> DASH_E[Employer dashboard]
    DASH_E --> POST[Post a job]
    POST -->|AI assist| POST
    POST --> POSTOK[/Job live/]:::ok
    DASH_E --> SC[Search candidates]
    SC -->|Filters| SC
    SC --> WPROF[Worker profile · LOCKED]
    WPROF --> FEE{Contact unlock fee?}
    FEE -- ON --> PAY[PayPal $5]
    FEE -- OFF --> UNLOCKED[Worker profile · UNLOCKED]
    PAY --> ADMIN_REC{Admin marks paid}
    ADMIN_REC --> UNLOCKED
    UNLOCKED --> VET{Buy vetting?}
    VET -- No --> CALL([Call / text / hire]):::end_
    VET -- Yes --> VTIER[Choose tier $29/$49/$149]
    VTIER --> PAY2[PayPal]
    PAY2 --> REPORT[/Vetting report PDF/]:::ok
    REPORT --> CALL

    %% Admin
    SET([Admin · Settings]):::ent --> TOGGLE[Toggle: Contact Unlock Fee]
    TOGGLE --> FEE

    %% Failures
    AUTH1 -- "session expired" --> LOGIN[Login]
    LOGIN --> AUTH1

    classDef ent fill:#fff,stroke:#1a1a1a,stroke-width:2px;
    classDef ok fill:#f1ede4,stroke:#1a1a1a,stroke-width:2px,color:#1a1a1a;
    classDef end_ fill:#efece5,stroke:#1a1a1a,stroke-width:2px;
          

// UX-FOUNDATIONS § 3.1 (Design Council Double Diamond). Auto-rendered with Mermaid 11.

Purpose. Within 5 seconds, a worker on a phone should understand "this is for me" and tap into Browse Jobs; an employer should see "Hire" path and pricing. Hero, trade chips, social proof count, blog teaser, footer.

Purpose. Marcus scans 8–12 cards in 90 seconds. Trade + state filters above the fold; card density tuned for thumb scroll. Empty / loading / "no results" states all spec'd.

No results for filters:
  Title:  "No [trade] jobs in [state] right now"
  Body:   "Pull-up to refresh. We're adding ~140 jobs a week."
  Action: "Clear filters" + "Notify me when posted"
Network error:
  Toast:  "Couldn't load jobs. Try again."
  Retry:  Auto after 3s, 5s, then manual.
Aggregator stale (> 24 h):
  Banner: "Showing cached jobs."

Two-step: (1) pick role, (2) minimum-viable form per role. Reddit pixel SignUp splits into SeekerSignUp / EmployerSignUp.

The marketplace's single most important screen. Two states (Locked / Unlocked) drive 100% of paying-employer revenue. Plus a third (Free mode, admin toggle off) for the public-relations / demo configuration.

Closes the loop on the employer empathy map: "I don't want a monthly plan." Lead with per-contact; show monthly plans as opt-in upsells.

600+ programmatic pages indexed in GSC. Goal: rank, convert a tap into Browse or Register. Static-HTML-only — no Divi navigation hijack.

Heuristics audit — Nielsen 10.

Severity: 0 = none · 1 = cosmetic · 2 = minor · 3 = major · 4 = catastrophe. Background-checked across all 14 wireframes.

// NIELSENS-HEURISTICS.md (Nielsen, 1994). Background evaluation per skill rule.

Home & browse.

Job detail.

The highest-revenue screen in the product, rendered hi-fi in both states. Every colour choice here was tested against the behavioural intent set in §1.5 and the states table in §5.3.

Employer dashboard.

Apply.

Register & login.

Seeker dashboard.

Search candidates.

Post a job.

Pricing / About.

SEO landing page.

The wireframes in §2.14 spec a single Settings screen. In hi-fi, the full admin suite is designed: the operator's daily workspace across jobs, people, vetting, and data pipelines. A one-person operation lives or dies on how fast these screens work — they get the same design attention as the public product, not an afterthought template.

Content pillars.

Three pillars, each answering a different stage of the worker's job statement (§1.2). No pillar exists to "have a blog" — each maps to a real search intent and a real internal link target.

Programmatic SEO architecture.

Hub-and-spoke model. The trade × state landing page (§2.13) is the hub built to convert; blog posts are spokes built to rank on long-tail queries the hub itself can't target, then funnel authority and clicks back to it.

flowchart LR
    subgraph Spokes["Blog spokes · long-tail intent"]
      B1["[trade] salary [state] [year]"]
      B2["[audience] to [trade] career change"]
      B3["[trend] in the trades"]
    end
    HUB["/jobs/[trade]/[state]/ — landing hub · converts"]
    SITEMAP["/job-directory/ + sitemap-jobs.xml"]
    REG(["Register / Browse jobs"]):::ok

    B1 -->|internal link + CTA| HUB
    B2 -->|internal link + CTA| HUB
    B3 -->|internal link + CTA| HUB
    HUB --> REG
    HUB -.indexed via.-> SITEMAP

    classDef ok fill:#f1ede4,stroke:#1a1a1a,stroke-width:2px;
          

// Cross-reference §1.7 Information Architecture. Every blog post ships with a mandatory internal link to its matching trade/state hub — not optional, not "when relevant."

Editorial cadence & calendar.

3 posts / week, 600–900 words, rotating across 12 trades × 50 states without repeating a trade+state combination. Sample four-week calendar below — a template to fill, not a fixed schedule.

// Categories: Salary Guides · Career Advice · Industry News. Track covered trade+state pairs in a single shared log so no combination repeats.

Voice & style guide.

Distribution & promotion.

KPIs & success metrics.

Design tokens.

All values are CSS-custom-property ready — drop into :root. Aesthetic intent: workmanlike, slate-led, hi-vis warm orange used sparingly. Final stylesheet lives at assets/css/styles.css.

a · Colour palette

All foreground/background pairs verified ≥ 4.5:1 (WCAG AA body). Ink-on-surface = 16.7:1.

b · Typography

Stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif. No web-font fetch on landing pages — system stack only, to keep LCP < 1.8 s for SEO.

c · Spacing

d · Borders, radii, elevation

Atomic component inventory.

Per Brad Frost. Component tree flows up: atoms → molecules → organisms → templates → pages. Every wireframe is built from this set, no exceptions.

Component states.

a · Buttons

b · Inputs

c · ContactStrip (key)

Accessibility checklist (WCAG 2.2 AA).

Responsive behaviour.

Mobile-first. Most blue-collar traffic arrives via phone (Reddit ad clicks confirm this).

Microcopy library.

House voice: direct, jobsite-plain, no em-dashes per blog rules. Active verbs. Pay-rates and prices stated upfront. No "leverage / seamlessly / unlock the power of" — banned per skill rules + product voice.

Developer deployment code.

Copy-paste-able brief for the front-end developer (or for an LLM agent operating in the codebase). Pre-loaded with the existing tech stack (WordPress + Divi + custom plugin SPA) so no environment-discovery round-trip is needed.

---
DEVELOPER DEPLOYMENT CODE
---
You are the Developer. I am the Designer.

Here are the approved wireframes and design tokens for FindLaborJobs.com.
Implement against the existing stack:
  WordPress + Divi (parent) · child theme jersey-laborlink-child
  jersey-laborlink-plugin (custom)
  SPA at / with hash routing
  REST: /wp-json/jll/v1/
  CSS in assets/css/styles.css ONLY (no inline, no <style>)
  JS in assets/js/ (core, wp-bridge, pages-public, pages-dashboard, pages-auth, targeted-ads)
  PHP via FTP (plugin editor server-side disabled)
ZIP delivery only. node --check all JS. Version bump +1 every ZIP.

## DESIGN CONTEXT
National job board for the 12 skilled trades. Two-sided marketplace.
Workers free. Employers pay $5 per contact unlock. Optional vetting tiers.
Solo-operator economics; no support team for runtime errors.

## USER FLOW REFERENCE
See §1.8 master flowchart. Two core loops:
  WORKER · home → browse → detail → register → apply → dashboard
  EMPLOYER · landing → register → post job → search → profile (locked) → PayPal → profile (unlocked) → vetting → call

## DESIGN TOKENS

Colour (CSS custom properties on :root)
  --color-ink:         #0F172A
  --color-ink-2:       #334155
  --color-muted:       #64748B
  --color-rule:        #CBD5E1
  --color-surface:     #FFFFFF
  --color-surface-2:   #F1F5F9
  --color-accent:      #E07A2D
  --color-success:     #15803D
  --color-warning:     #B45309
  --color-error:       #B91C1C

Type
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace
  H1 40/700/1.1 · H2 28/700/1.2 · H3 20/600/1.3
  Body 16/400/1.55 · Caption 12/500/1.4 uppercase 0.08em

Spacing (base 4px): 4 8 12 16 24 32 48
Radius: 2px (sm) · 6px (md)
Borders: 1px rule (default) · 2px ink (selected/sticky-edge)

## COMPONENT REQUIREMENTS

### JobCard (molecule)
- Structure: TradeBadge · Title · Employer · "City, ST · $low–$high or Pay TBD" · ScarcityStrip · SaveButton
- States: default · saved · viewed (visited-link grey)
- A11y: whole card focusable, aria-label "{title} in {city} – pay {range or unspecified}"

### ContactStrip (organism · KEY COMPONENT)
- States enumerated in §3.3.c
- DOM must NOT contain real phone/email until paid. Render dots only.
- Free-mode + demo Alex always render Unlocked.
- Confirm modal before PayPal redirect (Nielsen H5).
- Persist unlock via REST POST /worker_unlock; reflect status from
  jll_worker_unlocks.status === 'paid'.

### ApplyForm (organism)
- Single screen, sticky CTA, 5 fields prefilled from profile.
- Validate on blur; never block submit on async; fire Reddit Lead on 200.
- Edge: file > 5MB → inline error, do not strip silently.

### PostJobForm (organism)
- Autosave 10s pause to draft endpoint.
- "Help me write" → POST /ai/job-description with {trade, city, pay}
  → 4-paragraph draft; user edits before publish.
- 2-phase document upload (save → REST nonce → POST file → re-save).

### AdminSettings (organism)
- Top card: Contact Unlock Fee toggle. Self-saves on change.
  Persists to WP option jll_contact_unlock_free.
- $contact_free MUST appear in array_map closure use() list when
  reading workers — otherwise free-mode silently fails to unlock.

## RESPONSIVE BEHAVIOUR (mobile-first)
- sm 640 · md 768 · lg 1024 · xl 1280 (Tailwind defaults)
- Hero 1-col → 2-col at md.
- Filter bar sticky-top mobile · sidebar-left md+.
- Sticky-bottom CTAs disappear when soft keyboard is open (visualViewport API).
- Trade grid 3 → 4 → 6 col.

## ACCESSIBILITY CHECKLIST
- [ ] WCAG 2.2 AA contrast on every token pair
- [ ] 2px accent focus outline + 2px offset, on every interactive
- [ ] 44×44 mobile touch targets
- [ ] Single H1 per page; logical heading order
- [ ] Form labels visible; aria-describedby on errors
- [ ] Toast role="status", critical alerts role="alert"
- [ ] Hash route change → update document.title + announce via aria-live
- [ ] prefers-reduced-motion respected
- [ ] lang="en" on every template

## NON-NEGOTIABLE PROJECT RULES
1. CSS only in assets/css/styles.css. No inline, no <style>.
2. Footer + nav use <a> tags, not <button>. Global CSS overrides
   button backgrounds.
3. Blog cards on homepage are <div onclick>, not <a> — global
   CSS overrides anchor backgrounds.
4. Landing pages MUST NOT include wp_head/wp_footer — Divi breaks them.
5. Logout uses CFG.logoutUrl, never /wp-login.php (WPS Hide Login).
6. Login is async fetch with 1200ms cookie delay then
   window.location.replace(siteUrl + '?nocache=' + Date.now() + '#/route').
7. is_vetted from MySQL is string "0"/"1" — always parseInt().
8. editId from URL params is string — always parseInt() before
   comparing to job IDs.
9. .xml requests intercepted by LiteSpeed before WP rewrite — sitemap
   handler uses the parse_request hook to intercept early.
10. No em-dashes in user-facing copy (house voice / blog rule).

## IMPLEMENTATION NOTES
- Reddit pixel events to keep firing:
    PageVisit (every load)
    SignUp (split SeekerSignUp / EmployerSignUp; pass email for advanced
            matching)
    Lead (post-apply)
    Purchase (post-PayPal unlock click)
  Helper: window.jllRedditEvent(name, data)
- SPA load only fetches newest 1,000 jobs; job-detail falls back to
  GET /jobs/{id} for misses. Maintain App.store.jobsTotal vs jobs.length.
- Demo accounts (Alex 190, Jordan 191) are seeded server-side and pinned
  via ORDER BY is_demo DESC. Never delete; never hide is_demo from admins.

---
END DEPLOYMENT CODE
---

Hand this block to the Frontend Developer skill or to the next-session agent. It replaces the first 30 minutes of environment-discovery questions.

Placement & context.

Every direction below is evaluated against the same sample post — "The 5 Highest-Paying Trades in 2026 — And Where They're Hiring Right Now" — and shown with the site nav above and the How-It-Works section immediately below, so visual weight reads accurately in situ rather than in isolation.

Five directions.

Recommendation.