# USER_JOURNEYS.md Five journeys validated against the IA. Format: step → what they see → design element that makes it succeed. --- ## J1 · Recruiter Silje — LinkedIn → CV in ATS (target: < 60 s) 1. Clicks site link on LinkedIn (mobile). → Hero: "Connor Babbington — Systems Developer · .NET / React / Docker · Tønsberg, Norway · Open to work." Portrait matches LinkedIn photo. *(Identity confirmed in ~3 s.)* 2. Thumb-scrolls once. → Proof strip chips: 8+ yrs · UK public sector · work permit ✓ · EN native/NO B1. *(All screening objections cleared without reading prose.)* 3. Scrolls skills matrix. → Keyword match against job spec: C#, .NET, SQL, React, Docker, CI/CD. *(Chips, not bars — parseable at a glance.)* 4. Taps persistent **Download CV** in header. → Gets `Connor-Babbington-CV-EN.pdf` (locale-matched). *(Split-button defaults correctly; no hunting.)* 5. Done — candidate shortlisted. **Exit quality: converted without ever leaving the fast lane.** ## J2 · Eng manager Martin — shortlist e-mail → interview recommendation (target: ≤ 7 min) 1. Opens link on desktop, dark IDE habits → site respects `prefers-color-scheme`, loads instantly. *(First silent evidence.)* 2. Skims hero, ignores chips, clicks **Projects** in nav. → Two case-study cards with real screenshots + stack chips. Picks InboxIntel (Gmail/OAuth catches his eye). 3. Case study: reads TL;DR box, jumps via mini-TOC to **Architecture**. → Clean-architecture diagram: React SPA → ASP.NET API → PostgreSQL, background sync worker, Gmail API, token encryption. *(Diagram before prose — his reading order.)* 4. Reads **Decisions & trade-offs** ("why a hosted worker instead of a queue", "why advisory-only AI"). → Judgement demonstrated, not claimed. 5. Reads **Security & production notes** (encrypted refresh tokens, confirmed-flag destructive ops, integration tests asserting authz). → *This* is the interview trigger for a production-minded manager. 6. Opens dev tools out of habit → semantic HTML, no framework soup, fast. Checks the footer "how this site works" link, smirks approvingly. 7. Replies to recruiter: "Yes, bring him in — ask about the sync worker." **Exit quality: P4 (interviewer prep) journey pre-seeded.** ## J3 · CTO Anne (Norwegian) — application → forwarded to colleague (target: ≤ 5 min) 1. Opens link from application e-mail. Browser prefers `nb-NO` → dismissible hint: "Denne siden finnes på norsk →". Clicks it. → `/no` with natively-written Bokmål. *(Effort signal received before any content.)* 2. Hero: "Systemutvikler · åtte års erfaring fra britisk offentlig sektor · bosatt i Tønsberg." *(Public-sector frame + local residence = risk questions answered.)* 3. Reads **Erfaring**: Warwickshire County Council role described in kommune-relatable terms (saksbehandlingssystemer, rapportering, drift). 4. Reads **Om meg**: photo, plain-spoken 3 paragraphs, "norsk B1, i aktiv utvikling", interests. *(Understated tone; janteloven-compatible.)* 5. Copies URL of `/no/prosjekter/jobtrack` into e-mail to her senior dev. *(Per-language, per-page URLs make forwarding work.)* **Exit quality: converted in Norwegian end-to-end; never saw English.** ## J4 · Engineer Priya — interview prep deep-read (target: 10+ min, accuracy critical) 1. Arrives directly on `/projects/jobtrack` (link from Martin). Reads whole case study top-to-bottom. 2. Mini-TOC lets her jump back to Architecture while reading Decisions. Screenshots are annotated so she can reference specific UI ("the Gmail import view"). 3. **What I'd improve next** gives her interview questions the candidate is *prepared for*. **Design requirement surfaced: every claim in case studies must be true and demoable.** ## J5 · Return visitor / language edge cases - **Language switch mid-page:** Anne's colleague (English-speaking) receives the `/no/...` link → header `EN` switch → lands on `/projects/jobtrack`, same scroll context (same page mapping, position preserved where feasible). - **Theme:** system default on first visit; manual toggle persists; no flash of wrong theme on load (Phase 2 must solve this; Phase 1 flags it as a perceived-quality requirement). - **404:** mistyped shared link → bilingual 404 with links to both homepages and projects index. Never a dead end for a recruiter. - **Slow connection (mobile, train to Oslo):** text renders first; screenshots lazy-load below fold with fixed aspect-ratio placeholders (no layout shift — see MOTION_GUIDELINES loading states). --- ## Journey-derived requirements checklist - [x] Locale-matched CV default with one-tap access anywhere (J1) - [x] Architecture diagram ≤ 2 clicks from entry (J2) - [x] Security/testing content in every case study (J2) - [x] Native Bokmål, public-sector framing (J3) - [x] Stable per-language deep links; switch maps page↔page (J3, J5) - [x] Honest, demoable case-study claims (J4) - [x] No auto-redirect on language; hint pattern only (J3, J5) - [x] Zero layout shift on image load (J5)