Letting the coin re-color the whole site
The flip was going to change the palette and the typeface on every page, not just the opener. It seemed like the strongest version of the theme: a site actually made of chance rather than a site about it.
It went because the site then had no fixed identity. Every visitor would have seen a different portfolio and none of them would have been mine. Sealing the chance into one room makes the same point and leaves the rest of the site free to argue the opposite.
Asking what you were hiring someone to fix
Six cards above the work, each naming a problem — three teams solving the same thing three ways, no PM and it still has to move, nobody can tell whether design is working. Choosing one lit whichever case studies answered it. I wanted it because a portfolio that knows something about its reader is rare.
It went on arithmetic. A full screen ahead of the work, six cards and twelve hand-written lines to keep current, and the entire payoff was lighting one of three items.
Two typefaces instead of one
Instrument Serif for the headings, Inter for everything else. A safe pairing, and it looked fine.
It went when the alternative turned out to be stronger: one family used as a coordinate system, where width and weight together produce faces as different from each other as two families would be. That is Frutiger’s argument for Univers, and it costs one font file instead of two.
Giving each palette its own typeface
Big Shoulders for the Corbusier blues, Jost for Niemeyer, Bitter for the Eames red — a face from each palette’s own period, so the type cited the same source as the color. The cruder version of the same instinct was to skip the citation and just throw the headline at a random corner of the width and weight matrix on every flip.
Both went. Six citations collapsed onto four families, two of which anyone who knows type would call wrong, and it meant loading three extra families for one section of one page. The random version cost nothing and meant nothing. What the opener does now is the third answer: one family, and each palette owns a fixed coordinate in it, so the type arrives with the color instead of alongside it.
Filing each case study under the job it came from
The work history has a line down its side with the dates hung off it. The next move was to hang the case studies off the same line, each one filed under the job it came out of, so the whole page read as a single spine from the first job to the last.
It went because those are not the same list. The jobs are where I was; the case studies are what I decided. All three of them came out of the same employer, so the spine would have been one job carrying everything and three jobs carrying nothing — and filing work under a company reads as a duty of that job rather than a choice I made inside it.
Drawing the case study figures in WebGL
The three drawings that introduce the case studies — the pachinko floor for the records portal, the reels for the design system, the magnifying glass for the measurement work — built in three.js, with real depth and a light source, the coins catching it as they turned. Something close to this.
It went on weight. Around 600KB of library to draw three small diagrams, on a site whose argument is that it is quick and made of real materials. The versions that shipped are flat, about 19KB of JavaScript for all three, and they say the same thing.
A plinko board for the public records case
One disc released at the top, bouncing down a triangle of pegs into a bin at the bottom.
It went because that is a picture of a single decision, and the case is about volume — thousands of requests arriving continuously, a third of which never needed a person at all. A pachinko floor says that: a stream, a field that scatters it, and dishes that take some of it out partway down.
One wide bucket at the bottom of the pachinko floor
Coins were wedging in the corners of the first pachinko build, and the obvious fix was to give them somewhere to end up: a single bucket across the bottom that caught everything that fell.
It lasted a day. A bucket that catches everything draws the opposite of the case. Semicircle dishes hung partway down take some of the stream out and let the rest keep falling, which is the deflection number, drawn. The corner problem turned out to be a physics bug and not a shape problem at all.
Piggy banks filling up for the measurement case
Three versions of a budget animation, coins moving between containers as spending moved between teams. One of them was already wired into the page.
All three went because a magnifying glass passing over a half-loaded screen, turning gray placeholder bars into money, says the same thing in one gesture and needs nothing explained.
Spinning the impact numbers like a slot machine
The metrics under each case study rolling into place when you reached them. It fit the theme and it was satisfying to build.
It went because there was already enough motion on the page — and then the numbers followed it off the cards entirely. They are on the case studies now, where somebody has asked for them.
Holding the nine beliefs like a hand of cards
Nine cards fanned from a pivot, overlapping, each one lifting out when you pointed at it. It came from the same set of forms as the coin, and it is the best-looking thing on this page.
I built it before arguing about it, and it lost on its own numbers. At playing-card proportion every one of the nine bodies ran past the bottom edge — cut by 15 to 89 pixels at desktop width, 89 to 205 on a laptop. The only part of each card you could point at was a sliver about 5rem wide. And it put the most persuasive writing on the site behind an interaction, nine separate times.
The same cards, turned on their side
The fan rotated ninety degrees into a stack, so every title stayed readable and no text was clipped. It fixed both of the measured problems with the fan.
It went anyway. A grid shows all nine at once and asks nobody to do anything.
Dealing the beliefs onto the page
The nine cards arriving one after another as you reached them, each settling out of a degree or two of rotation. All of the card feeling and none of the hiding.
Built, liked, cut. The grid did not need it, and it was the last piece of motion on the page that was not saying something.
A supporting line under each section heading
“…and that’s why I make my own luck.” set at the size of the opener, with a smaller line underneath doing the explaining — analytics and research at three companies, and something like it for every other section.
It went the next day, when I asked what the smaller line was for. The three case study titles sitting right under it already said what the work was, in more specific words, and they were the thing I wanted read. The supporting line was the same claim one size down.
Stating the wager at the top of each case study
Three lines above each one: the bet, the odds, if wrong. It tied the case studies back to the coin and put the stakes first.
It went because it read as a device rather than as information, and because those three facts are in the opening paragraph anyway.