How I designed this site

My portfolio, treated as a UX problem.

The user and their goal

The user is a hiring manager with a few minutes between other things. Their goal is to decide whether to talk to me. Mine is to make that decision easy, whichever way it goes.

What they need first

The problem, what I did, the trade-off and what changed. So every case study opens with a short summary before any process. The process comes after, for anyone who wants the reasoning: the options, the trade-offs and what I would do differently.

What I cut

I moved off Behance, where some viewers hit a login screen before they see any work. I also built a home page of large cards that scrolled sideways, and removed it the same day. It showed one project at a time and took over the scroll wheel, which hid the work it was meant to show. The site has no decorative animation. Anything that moves does so because you did something: tracing the example on the home page, or trying the problem at the top of two case studies.

The diagrams are part of the page, drawn in the same ink as everything else, so they stay sharp on any screen.

The test every screen had to pass

I read each screen aloud as if to someone outside design, and changed anything I could not explain in a sentence. That took a jargon phrase off every case study tile, renamed a section nobody would have understood and added a way back from the prototype.

One look for the site, its own look for each concept

The site has a small design system of its own: one tokens file, in the Design Tokens Community Group format, that holds every colour, the typeface and the frame. The stylesheet is built from it, and the build fails if a colour turns up anywhere else, so the site cannot drift as it changes. It has one theme on purpose. Navy ink on white is the paper the work is drawn on.

Kerbside and On Behalf each have their own tokens and their own look, because each designs a product that is not this site: a phone app used at the kerb at night, and a kit that sits inside other companies’ apps. Keeping the site plain is what lets them stand out as designs.

What it does not show

Screens from my employed work stay confidential, so those case studies show the decisions instead.

How it was built

Plain HTML, CSS and a little JavaScript, generated from one text file per case study, so a new project drops in without touching the design. Before any version goes live, it is checked with automated WCAG 2.2 AA tests, keyboard and phone-screen tests and a check for broken links. I built it with AI assistance. It costs nothing to host.