ResumeSite/docs/design/01-research/DESIGN_RESEARCH.md

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.