docs: establish approved Phase 1 design + Phase 2 spec as project foundation
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
cesnimda
@@ -0,0 +1,91 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user