PDPixe Design.
All work

Case study 01 · Product design · Self-initiated · 2026

This portfolio, treated as a product

A hiring-focused portfolio designed around how reviewers actually decide: a thirty-second scan, then a five-minute test of the designer's reasoning.

Live build · You are using it now.

Role
Product design, interaction design, visual design, front-end implementation
Challenge
Make a reviewer's decision to read on easy in thirty seconds, and reward a five-minute deep read, without inventing any evidence.
Type
Self-initiated product
Stack
Next.js, React, TypeScript, Tailwind CSS
Status
Live, iterating

01 · What is it, who is it for, and why does it matter?

Conducted

Overview

A portfolio is often the first design artefact a hiring manager reviews, so it is judged as a product as well as a collection of work. This project applies the same discipline to the portfolio itself that I would apply to any product.

Its users are hiring managers, design leads, recruiters and founders. They arrive with limited time and a specific question: should I talk to this person?

02 · What problem is being solved?

Conducted

The challenge

Reviewers want to answer a handful of questions quickly: who is this, what do they work on, how strong is their thinking, how refined is their craft, and how do I get in touch.

Portfolios typically answer with adjectives. The design problem is to replace claims with structure that makes evidence easy to find and quick to judge.

03 · What shaped the boundaries?

Conducted

Context and constraints

One designer, one build, no client assets supplied at the time of writing. That last constraint shaped the strategy more than any other.

  • No fabricated proof

    No invented clients, metrics, testimonials or research. Anything unverified is labelled as such.

  • Fast by default

    Static pages, self-hosted fonts and no raster imagery, so the first view is quick on ordinary hardware.

  • Accessible by default

    Semantic structure, keyboard access and reduced-motion support were requirements, not enhancements.

04 · What evidence informed the design?

Hypothesis

Research and discovery

No interviews or observation sessions with reviewers were run for this project. The design rests on working assumptions about how portfolios are reviewed: that reviewers scan before they read, that they look for proof of reasoning, and that friction on the way to contact costs interviews.

These are treated as hypotheses to test, which is why the outcomes section is explicit about what has not been measured.

05 · Which needs matter most?

Conducted

Problem definition

The problem was framed as two jobs a reviewer is trying to get done, on very different timescales.

  • In 30 seconds

    Decide whether this person is relevant and worth reading on: identity, specialism, quality signal, strongest work, how to reach them.

  • In 5 minutes

    Test whether the reasoning holds: can this designer frame a problem, justify decisions and be honest about limits?

06 · How did that shape priorities?

Conducted

Product strategy

Priority one was proof before promises: work appears directly after the hero, and the strongest case study is linked from the hero itself.

Priority two was honesty as a feature. Each case-study section carries an evidence label, so a reader can see at a glance what was conducted, what is a hypothesis, and what was not done.

Priority three was restraint. Motion, colour and decoration are budgeted so they direct attention rather than compete with the content.

07 · How is it organised?

Conducted

Information architecture

A single narrative page for scanning, and dedicated case-study pages for depth. Every page keeps a route to contact within one action.

  1. 01

    Hero

    Identity, value, two CTAs

  2. 02

    Selected work

    Covers state problem, role, evidence

  3. 03

    Case study

    Reasoning with evidence labels

  4. 04

    Process & capabilities

    How and what, in context

  5. 05

    Contact

    Email, copy, CV, LinkedIn

Header navigation and the contact button persist on every page.

Fig. — Site flow. Every node keeps a path to contact within one action.

08 · How does it behave when things go wrong?

Conducted

Interaction design

Interaction effort went into the states a visitor rarely thinks about but always notices.

  • Copy email

    Gives immediate confirmation, announces it to screen readers, and falls back to selecting the address if the clipboard is unavailable.

  • Optional content

    CV, LinkedIn and experience appear only when supplied. Empty states explain what is available instead of showing broken links.

  • Motion

    Reveals are progressive enhancement. With JavaScript off or reduced motion on, everything is visible and static.

ElementState AState BFailure / edge
Copy emailIdleCopied (announced to screen readers)Clipboard blocked: address shown and selected
CV / LinkedInNot supplied: link hiddenSupplied: link shownCV section falls back to a request-by-email action
MotionReduced motion: static, fully visibleDefault: reveals on scrollNo JavaScript: content visible
Fig. — State inventory for the interactive pieces.

09 · What does the system look like?

Conducted

Visual design

An editorial voice: a high-contrast serif for argument, a precise sans for interface and a monospace for annotations, on warm paper with a single signal colour. The accent is used for direction and status, never as decoration.

Display · Fraunces

Aa Aa

Interface · Instrument Sans

Clear, calm and legible at small sizes.

Annotation · JetBrains Mono

01 / evidence: conducted

  • Paper

    #F3EFE6

    Ink on paper 16.2:1

  • Ink

    #14130F

    Paper on ink 16.2:1

  • Muted

    #57534A

    Secondary text 6.7:1

  • Accent

    #C23A18

    Accent text 4.7:1

  • Signal

    #FF6A3D

    On ink 6.5:1

  • Sage

    #2E4A3E

    Status, 8.5:1

Fig. — Type pairing and colour tokens, with measured contrast.

10 · Has it been tested with people?

Not yet done

Prototyping and validation

Not yet. Automated and manual accessibility checks were run against the build, but no usability sessions with real reviewers have taken place.

The plan below defines the lightest tests that would answer the most important questions.

QuestionLightest methodEvidence that would answer it
Can a reviewer find who, what and how to contact within 30 seconds?Moderated first-click and 30-second recall test, 5 reviewersCorrect recall; time to first relevant click
Does the evidence labelling build or erode trust?Think-aloud on a case study, then a short interviewReviewers can restate what is proven versus assumed
Do visitors reach a contact action?Privacy-friendly analytics on CTA clicksContact actions per visit; drop-off by section
Fig. — What would need to be true, and how it would be checked. Nothing below has been run.

11 · How do decisions translate into a build?

Conducted

Collaboration and implementation

Design tokens for colour, type and spacing are defined once as CSS variables and consumed by components, so design intent and implementation share a vocabulary.

Case-study content is typed data rather than hand-written pages, which keeps every case study consistent and makes adding the next one a content task.

12 · What happened, and what is next?

Conducted

Outcomes and reflection

The build meets its accessibility and performance intentions, but its main hypothesis, that this structure helps reviewers decide faster, is untested.

Next: run short moderated sessions with hiring managers, add real client or employer case studies as they become shareable, and measure whether visitors reach a contact action.

Outcomes, stated honestly

What is known, and what isn't.

  • Verified

    Shipped as a static, accessible, responsive site with keyboard navigation, visible focus states and reduced-motion support.

  • Verified

    Contrast checked against WCAG: body text 16.2:1, secondary text 6.7:1, accent text 4.7:1 on the paper background.

  • Not measured

    No usability sessions, analytics or conversion data exist yet, so none are claimed. The validation plan below lists what would be needed.