# DESIGN_RESEARCH.md
Portfolio Redesign — Phase 1 Research
Connor Babbington · cesnimda.co.uk · July 2026

---

## 1. Audit of the existing site

**Current state:** WordPress + Avada (Fusion Builder) single-page site. Sections: Hero → About → Proficiencies → Experience → Projects → CV downloads → Contact form.

### What works
- The content skeleton is correct: summary, skills, experience, projects, CV, contact — everything a recruiter needs exists somewhere.
- Clear availability statement ("open to remote, hybrid, on-site") in the first viewport.
- Both CV languages are downloadable from the hero.

### What fails against the goal ("decide to interview me")
| Problem | Evidence | Impact |
|---|---|---|
| **Generic template look** | Avada theme, stock section headings ("About.", "Let's Talk.") | A hiring manager evaluating a *software engineer* sees a page-builder site — it signals "assembled", not "engineered". The single strongest negative signal on the current site. |
| **No proof, only claims** | Skills are bare word-lists; experience is one paragraph; projects have no screenshots, no links, no architecture, no outcomes | Recruiters can't verify; engineers can't assess depth. Nothing differentiates from 10,000 similar CVs. |
| **Projects undersold** | Job Tracker gets 2 sentences; InboxIntel absent entirely | These two projects are the *strongest* seniority evidence available (multi-service architecture, OAuth, AI integration, Docker, testing, security hardening) and they're invisible. |
| **English only** | `lang="en-GB"`, no Norwegian content | Candidate lives in Tønsberg targeting the Norwegian market; a Norwegian hiring manager gets zero accommodation. Bokmål content is also a trust and effort signal ("aktiv språkutvikling" made visible). |
| **Heavy, slow stack** | WP + Avada + W3TC minified bundles, lazyload shims | Poor Core Web Vitals undercut the "production-level thinking" message. The site itself should be a work sample. |
| **No dark mode, no motion design, no personality** | Static template sections | Feels dated next to any modern product site. |
| **Weak SEO/meta** | Empty `og:title`, description is a raw text dump of the hero | Sloppy details on the most detail-oriented artifact a developer publishes. |

**Conclusion:** the redesign is not a reskin — the site must *become the work sample*: fast, precise, bilingual, with projects presented as engineering case studies.

---

## 2. What makes engineer portfolios convincing (pattern research)

Synthesised from high-performing engineer portfolios (e.g. the genre exemplified by Brittany Chiang, Lee Robinson, Josh Comeau, Rauno Freiberg) and product marketing sites (Stripe, Linear, Vercel, Notion, Framer):

### Convincing signals
1. **Specificity beats adjectives.** "Reduced manual spreadsheet workflows for a county council" beats "passionate problem-solver". Numbers, stack names, and constraints read as experience.
2. **Case studies, not thumbnails.** Portfolios that convert treat projects like product launches: problem → approach → architecture → decisions/trade-offs → outcome → screenshots. Engineers hiring engineers read the *trade-offs* section first.
3. **The site itself is evidence.** Fast load, keyboard access, tasteful motion, working dark mode, correct typography — hiring managers notice these subconsciously; senior ones notice consciously.
4. **Restraint reads as seniority.** Junior portfolios over-animate. The Linear/Stripe lesson: one or two signature moves, executed perfectly, on a quiet base.
5. **Low-friction verification.** CV download, LinkedIn, e-mail, code links reachable within one interaction from anywhere on the page.
6. **A human face.** A real photo near the top measurably increases trust and recall; recruiters match the site to the LinkedIn profile.

### What makes visitors leave
- Walls of unscannable text (recruiters scan, engineers skim then deep-read).
- "Skills: HTML, CSS, JavaScript…" laundry lists with no context or proficiency framing.
- Broken/missing project links, placeholder content, lorem-tier copy.
- Slow first paint; janky scroll-hijacking; autoplaying anything.
- No way to answer "can this person do *my* job?" within ~30 seconds.

### SaaS landing-page techniques worth borrowing (not copying)
| Site | Technique to adapt |
|---|---|
| **Stripe** | Dense-but-calm information design; gradient used as a single identity moment, not everywhere; impeccable code-adjacent typography. |
| **Linear** | Dark-first palette; short declarative sentences; motion only on state change; keyboard-first affordances. |
| **Vercel** | Monochrome + one accent; triangle-precision spacing; "proof strip" (logos/metrics) directly under the hero. |
| **Notion** | Friendly humanity inside a rigid grid; illustration used sparingly to soften. |
| **Framer** | Scroll-linked reveals that never block reading; hero that demonstrates the product (here: the site demonstrates the engineer). |

---

## 3. Recruiter & hiring-manager evidence base

(Expanded in RECRUITER_BEHAVIOUR_ANALYSIS.md.)

- **Time budget:** eye-tracking studies of recruiters (Ladders, 2018) put initial CV scan at **~7.4 seconds**. A portfolio gets slightly more — roughly 20–50 seconds before a stay/leave decision — but the first viewport carries the decision.
- **Scan pattern:** F-pattern / layered scanning (Nielsen Norman Group): name → title → location/availability → most recent role → skills. Layout must place these on the F.
- **What they screen for:** role fit keywords, seniority, location/work-permit, availability, red flags (gaps, vagueness). The hero must answer: *who, what level, what stack, where, available?*
- **Two-audience problem:** recruiters (non-technical, 30s, checklist-driven) and engineering managers/CTOs (technical, 3–10 min, depth-driven) visit the same URL. The IA must serve a **fast lane** (scannable hero + skills + CV button) and a **deep lane** (case studies, architecture, decisions) without either blocking the other.
- **Norway-specific:** Norwegian hiring culture values understatement, concrete competence claims (jf. *janteloven* — avoid grandiosity), and language effort. "Norsk A2/B1, i aktiv utvikling" stated plainly is a positive signal, not a weakness to hide. Work-permit clarity ("gyldig oppholdstillatelse") removes the #1 recruiter objection for foreign candidates.

---

## 4. Accessibility baseline (non-negotiable, also a seniority signal)

- WCAG 2.2 AA: contrast ≥ 4.5:1 body text (≥ 3:1 large text/UI), visible focus states, target size ≥ 24px.
- Full keyboard operability including the language switch and theme toggle.
- `prefers-reduced-motion` honoured by *every* animation (motion system must define reduced variants, not just "off").
- Semantic landmark structure; skip-link; alt text strategy for project screenshots.
- Language correctness: `lang` per locale, `hreflang` alternates — this doubles as SEO.

---

## 5. Strategic conclusions → design brief

1. **Reposition the site as a product.** Name the artefact: it is "Connor Babbington — systems developer" presented with the craft of a SaaS launch page.
2. **Projects become the centre of gravity.** Two full case studies (JobTrack, InboxIntel) + an infrastructure/homelab capability page. Each with architecture diagram, screenshots, decisions, and honest "what I'd improve".
3. **Two-lane IA.** 30-second lane: hero → proof strip → skills → CV. 10-minute lane: case studies → experience → about.
4. **Bilingual as a feature, not a toggle afterthought.** Norwegian content is written (not machine-mirrored), the switch is visible in the header, and URLs are language-scoped.
5. **Honest seniority framing.** The CV says "mid-level, 8 years". The site should not claim "senior" in a title; it should *demonstrate* senior judgement (trade-off writing, production thinking, security notes) and use the framing "systems developer, 8+ years". Evidence over adjectives — this is also the safest posture for the Norwegian market.
6. **Performance is part of the design.** The visual system is deliberately light: system-adjacent type stacks, no hero video, SVG-first graphics, motion via transform/opacity only.
7. **The design direction is defined in DESIGN_SYSTEM.md as "Kontrollrom / Quiet Console"** — a Nordic-restrained, dark-first engineering aesthetic with a single aurora-teal accent and monospace metadata as its identity move. Unique, ownable, and cheap to render.