PFD audit brendan-russo.com · 2026-04-30
View rebuild →
Perception-First Design audit · Brendan Russo · interaction designer · By Stefan / Aurochs · 2026-04-30

An interaction designer's portfolio is the highest-stakes interaction they ship.

Hey Brendan, ran a Perception-First audit on brendan-russo.com and built the rebuild alongside it. This doc walks through what I saw, why it matters at the perception layer, and what the rebuild changes. Written peer-to-peer, no marketing fluff. The whole thing lives at the rebuild URL; this is just the rationale.

TL;DR

Your headless CMS is doing job #1 (you can update content without redeploys). The diagnosis isn't the build pipeline. It's the rendered interaction surface.

For an interaction designer, the layer that markets you is the layer that moves, responds, and demonstrates. That layer hasn't shipped.

Three other levers under-serve the work: a 2023 footer + missing 2024–2026 work reads as recency-truncation; museum-tier credibility (Bluecadet) and K-12 scale (Newsela ~47M learners) sit below the fold; and the H1 ("I am passionate about crafting digital experiences that are both beautiful and functional") reads as positioning that any portfolio could carry.

Estimated PFD score: 62 → 89 (rebuild). Itemized below. Rebuild is at /.

The framework, briefly

Perception-First Design is a 5-layer dependency stack. Each layer is a different cognitive constraint, biological, attentional, fluency, social, mnemonic, and each one constrains the layer above it. You can't fix L3 (positioning) if L1 (first-pass anchor) is broken, because the visitor never gets that far. The scoring isn't taste; it's whether the page satisfies the constraint that layer represents.

Treat what follows as the operating manual. If anything in here is useful for your day-job, for arguing a hero rewrite, for explaining why a wireframe doesn't work, for reading a comp at the perception layer instead of the visual layer, that's the win. The methodology is what I'm offering as much as the rebuild.

L0Sensory load

Can the eye tolerate this page for 30 seconds without effort?

Contrast, type rhythm, color tonal alignment, scroll comfort. The biological layer. Below threshold and the visitor leaves before any other layer fires.

Mechanism: foveal acuity, contrast-sensitivity function (Pelli & Bex 2013); processing-fluency, pages that feel easier to read are judged as more credible (Reber et al. 2004).

Cool lime #6CF542 sits on a wrong tonal axis vs. warm cream #EDECE8. Minor sensory stutter.
L1First-pass attention

What does the visitor anchor on in the first 50ms?

The 50ms window processes color, layout, hierarchy, and hook, not detailed text. A paragraph-length H1 forces serial reading before the visual system can land. Either the H1 anchors a position fast or the visitor's already deciding to leave.

Mechanism: Lindgaard et al. (2006), aesthetic judgment forms in 50ms, with high reliability against subsequent slower judgments.

"I am passionate about crafting digital experiences..." anchors a feeling, not a position. Bluecadet/Newsela are below the fold.
L2Processing fluency

Does the page feel like what it claims to be?

Type discipline, axis alignment, motion grammar, color harmony. The fluency layer is where deliberate work shows at the perception level. Visitors don't notice it explicitly. They read it as "considered" or "off."

Mechanism: Bargh on mere exposure / fluency-as-trust; Reber et al. on processing fluency predicting credibility judgments. Designed to be unconscious.

An interaction designer's site with one scroll-fade plugin and a static rendered surface. Experiential self-contradiction.
L3Perception bias

Are the borrowed authority signals reaching the visitor?

Positioning, authority halo, third-party signals, decision architecture. Visitors don't trust you; they trust the institutions you've worked with, the dates you've worked through, the specificity of your claims. This layer is where context-borrowing happens or doesn't.

Mechanism: Cialdini (2009) on borrowed authority and association transfer. Spotlight Effect, designers consistently underestimate how much a credentialed name halos onto them.

Bluecadet (museum-tier) is invisible. Newsela (~47M learners) is invisible. Both are reachable only through LinkedIn.
L4Memory / time

What does the visitor remember a week later?

Recency cues, follow-through, decay-on-purpose. A page that doesn't update telegraphs disengagement; a page that surfaces what happened recently telegraphs activity. This is the layer that handles the asymmetric cost of "is this person still in this work?"

Mechanism: availability heuristic (Tversky & Kahneman); Tulving on recency bias in memory retrieval. Decay is exponential and asymmetric.

Footer says 2023. Newsela isn't mentioned. Recency-truncation reads as "designer was active until 2023, isn't now."

Scorecard

Layer
What it measures
Live
Rebuild
Δ
L0
Sensory load · contrast, rhythm, eye comfort
74
88
+14
L1
First-pass attention · 50ms anchor, hierarchy, hook
52
90
+38
L2
Processing fluency · type, motion, axis-alignment
62
91
+29
L3
Perception bias · positioning, authority, scarcity
58
88
+30
L4
Memory / value-in-time · recency, decay, follow-through
54
87
+33
All
Weighted overall
62
89
+27

Scores are external estimates based on the live page only, analytics, on-site traffic, or behavioral signals would tighten them. The methodology is repeatable; treat the deltas as directional.

The four findings that matter most

Skipping the long tail. These are the levers that, if pulled, change the page's perception trajectory the most. Severity is calibrated against impact for an interaction designer's portfolio specifically, not generic UX.

F-01 · L2 / L3
The interaction surface is silent on a page selling interaction design.
Major
What's there

The site uses Gatsby + a headless CMS (good for content velocity), with a sal-based scroll-fade animation library and Bootstrap-style grid. The rendered surface offers: hero video autoplay, two scroll-fade reveals, project tile hover, and a portrait. That's the full motion vocabulary.

Why it matters

The portfolio's job is to argue that you can ship interaction design. Visitors process the medium as evidence before they read the copy, an interaction designer with a CMS-output page that moves at the level of a "scroll-fade plugin" has an experiential-self-contradiction problem (PFD Learning #15). The CMS architecture solves a content problem that visitors don't experience, and leaves untouched the rendering problem they do.

In the rebuild

Variable type kinetics on the H1 (Fraunces wght axis breathes ±25 over 8s, subtle, alive, demonstrates axis control), custom magnetic cursor, depth-tilt project cards, blur-reveal scroll observer, palette-tween theme toggle, scroll-progress accent dot. Every motion has a reason. Reduced-motion stripped clean. The page itself is the strongest argument that you ship interaction design.

Cited: Lindgaard et al. (2006) on 50ms aesthetic judgment as the System-1 anchor; Bargh on processing-fluency-as-trust.

F-02 · L4
The footer says 2023. Newsela isn't mentioned. Recency-truncation says this designer isn't active.
Major
What's there

The page footer reads "Brendan Russo, 2023". The most recent project listed is the 2022 Defy redesign. There's no mention of Newsela, the role you've been in for >1 year, on a platform serving roughly 47 million learners.

Why it matters

This is a recency-truncation read. The brain extrapolates "designer was active until 2023, isn't now."

The cost is asymmetric. A visitor who notices the gap doesn't ask "is the site stale?"; they leave with a bias that you might be too. Worse for an interaction designer specifically, because a non-maintained portfolio implies non-current work. (For a therapist, a 2023 footer reads as "stable practice." For you, it reads as silence.)

In the rebuild

Header: "Available 2026" eyebrow, live-state lime indicator. Hero: "Currently · Newsela" rail caption with pulsing live dot. Work grid: Newsela is the first card, marked LIVE in lime; everything else is ARCHIVED in bronze (visual encoding of past vs present without saying so in copy). Footer: 2026 with self-incrementing JS-friendly date pattern. Experience timeline: Newsela now-pulse, six-step thread back through Defy / Bluecadet / Cohere / SETVI / Drexel.

Cited: Tversky & Kahneman on availability heuristic; Tulving on recency bias in memory retrieval.

F-03 · L1 / L3
Bluecadet (museum-tier) and Newsela (~47M learners) are buried.
Major
What's there

The hero is a personal-brand statement ("I am passionate about crafting digital experiences..."). The four featured projects are Defy, Talkdrop, SETVI, Brinker. Bluecadet appears nowhere on the homepage; Newsela appears nowhere on the site. Both are reachable only via the LinkedIn link.

Why it matters

Bluecadet is the shortest path to "this designer ships at museum / cultural-institution caliber", the agency's clients include the Met, MIT Museum, Folger Shakespeare, Cleveland Museum of Art, NASA's Data Lens. Newsela is the shortest path to "this designer works at scale" (47M learners, 4M teachers, 90% of US schools). Both are borrowed authority signals (Cialdini): the kind of credibility that a visitor halos onto you the instant they see the institution. Hiding them on a portfolio site is the L3 equivalent of standing in front of a gallery with the gallery name behind your back.

In the rebuild

Hero subhead: "Five years across museum-tier interactives at Bluecadet, an AR installation at Drexel, an iOS design system at SETVI, agency web at Defy, and ed-tech at K-12 scale at Newsela." Both Bluecadet and Newsela appear in the first 200ms of attention, italicized to read as proper nouns. Selected work grid leads with Newsela (live). Bluecadet's third card lists the museum clients verbatim so the halo doesn't depend on visitor-side recognition.

Cited: Cialdini (2009) on borrowed authority; the Spotlight Effect literature on self-other asymmetry in credibility self-perception.

F-04 · L1
The H1 doesn't anchor a position. It anchors a feeling.
Major
What's there

"I am passionate about crafting digital experiences that are both beautiful and functional.", that exact sentence, or a near-cousin, runs on roughly any portfolio for an interaction designer. It functions as warm-paragraph filler, not as a 50ms System-1 anchor.

Why it matters

Lindgaard 2006: visitors form an aesthetic judgment within 50ms; that judgment includes hierarchy and hook, not detailed text. A paragraph-length sentence forces serial reading before the visual system can anchor, which means by the time the visitor's System 2 catches up, they've already decided whether to keep scrolling. Worse, a generic positioning hook is interchangeable: it triggers no category placement, so the rest of the page has to rebuild context the H1 should have set.

The actual range you have, AR installation + museum-tier frontend + iOS design system + agency web + K-12 ed-tech, is unusual enough to be the hook. That polymath profile is your differentiator from any other "I do UX/UI/dev" portfolio.

In the rebuild

H1: "Working between rooms and screens." Six words. Variable-axis Fraunces with rooms in italic, screens at slightly heavier weight (the seam-tension rendered typographically). Below it, a single editorial subhead does the credentialing. The "seam" framing carries through: between rooms and screens, systems and stories, design intent and rendered behavior. That's a position, not a feeling, and it's true to your work.

Cited: Lindgaard et al. (2006); Pinker on language-as-thought (the difference between a position and a sentiment).

Second-tier findings (still worth a pass)

Pulled this back to keep the doc honest. These are the next eight perception-level reads. They'd each move the needle, but only after the four above are fixed.

F-05 · L0
Cool lime #6CF542 on warm cream #EDECE8 sits on the wrong tonal axis.
Minor
What's there

Brand mask-icon color is bright cool-green; background is warm-cream. The two read as belonging to different palette systems, visible as a slight tonal "stutter" when both are in frame.

In the rebuild

Background warmed slightly to #f5f1e6 (more paper, less digital-cream). Lime kept verbatim as the live-state accent. Bronze #b88955 added as the non-now sibling so historical projects have a tonal home that's cousin to the cream, not cousin to the lime. Both palettes harmonized in dark mode (graphite base, brightened lime, warm-bronze).

F-06 · L2
Hero video autoplay competes with the H1 for first-pass attention.
Minor
What's there

Autoplay video alongside the name and role text. Both elements pull the eye in the first 200ms; neither wins decisively. (See brendanrusso_portfolio_video.mp4 in /static.)

In the rebuild

Removed the hero video. The H1 is the hero. Variable-axis breathing (8-second cycle, ±25 wght units) gives it just enough motion to read as alive without dragging attention. If you want to bring back a moving image later, the right slot is a dedicated showcase section with the video as primary content, not background to type.

F-07 · L1
Project tiles all weigh the same, no live/archive visual hierarchy.
Minor
What's there

Four project tiles on the homepage, equal visual weight. No date sorting visible; visitors can't tell which is current vs which is the 2019 senior thesis without reading the case studies.

In the rebuild

Six work cards, sorted recency-first. Live cards (Newsela) carry a lime accent stripe + LIVE pulse tag; archive cards (Defy/Bluecadet/Talkdrop/SETVI/Brinker) carry bronze stripe + agency name as an archive tag. Visitor knows the temporal order without reading.

F-08 · L2
Custom font kit (Swiss 721 / Neue Montreal) loaded but no hierarchy contrast.
Minor
What's there

Two custom fonts via Typekit (kits nrn2zoj + prl4uby); both read as similar-weight neutral sans. No display/body distinction; no italic register. Fonts cost ~120KB combined and don't pay for themselves typographically.

In the rebuild

Three-font system that pays its weight: Fraunces (variable serif, opsz, wght, SOFT axes) for editorial display + italic register; Inter for body (free, fast, designer-default); JetBrains Mono for labels and metadata (museum-caption feel). All three are Google Fonts, no auth, ~140KB total but variable-Fraunces alone gives ~40 weight increments without separate files.

F-09 · L4
Gatsby 2.32.13 (2021) ships in a 2026 portfolio. Tech-debt halo on a frontend-developer claim.
Minor
What's there

Page generator meta: Gatsby 2.32.13. Gatsby v2 was deprecated in 2022. The build pipeline is fine for static-site output, but the version string is visible in DevTools and reads as a stale-stack signal to any engineer who looks.

In the rebuild

The rebuild itself is a single static HTML file (no framework dependency at all) with vanilla JS for the interaction layer. Drops in beside any deployment pipeline. If you stay on Gatsby with the headless CMS, an upgrade to v5 (or a port to Astro / Next App Router) costs less than it looks and removes the version-string risk.

F-10 · L1
No theme toggle. Designers expect dark mode in 2026.
Info
What's there

Light-only. theme-color meta is hardcoded to #EDECE8; no color-scheme declaration; no system-preference response.

In the rebuild

Light/dark with color-scheme meta, system-preference fallback, explicit toggle in header (cycles light ↔ dark ↔ system), localStorage-persisted choice with anti-flash inline script before first paint. Both palettes harmonized in the same hue family (cream/graphite + lime/bronze) so the toggle reads as "dawn vs night," not two unrelated palettes.

F-11 · L3
No social proof or third-party signals beyond LinkedIn.
Info
What's there

Email link + LinkedIn link. No press, no AWWWARDS / SOTD nominations, no client logos, no testimonials, no Drexel / Bluecadet alumni network signal.

In the rebuild

I didn't fabricate signals you don't have. I did add a "Range" facts list that does some of the same work: where the work has been, what the toolkit is, what domains you've shipped in. If you have any media coverage or AWWWARDS for Defy, that's the right slot. Otherwise the Bluecadet client list (Met / MIT / Smithsonian / etc.) is doing borrowed-authority work and that's enough.

F-12 · L2
Page title is empty (<title data-react-helmet></title>); meta description is generic.
Info
What's there

The <title> tag in the source HTML is empty (filled at runtime via React Helmet, but visible as empty in initial response). Meta description: "Portfolio for designer and developer Brendan Russo." Functional, but doesn't carry the polymath profile.

In the rebuild

Title: "Brendan Russo, Interaction Designer · Between rooms and screens". Meta description: a 1-sentence summary of the range with named clients (Bluecadet, Drexel, SETVI, Defy, Newsela). LinkedIn / Twitter previews now carry the position, not just the name.

A few side-by-sides

Specific copy diffs. Read in pairs.

H1
From feeling to position.
Hero
Live (today)

"I am passionate about crafting digital experiences that are both beautiful and functional."

Rebuild

"Working between rooms and screens." (variable-axis Fraunces; rooms italic, screens heavier weight)

SUB
Subhead does the credentialing.
Hero
Live (today)

"5 years delivering digital experiences. Combines design and technology for innovative solutions. Focuses on user-centered design and problem-solving."

Rebuild

"Five years of interaction design across museum-tier interactives at Bluecadet, an AR installation at Drexel, an iOS design system at SETVI, agency web at Defy, and ed-tech at K-12 scale at Newsela."

CTA
Action hierarchy.
Footer / Hero
Live (today)

"Let's get in touch." + "Email Me" / "LinkedIn"

Rebuild

Hero CTA: "See selected work" (primary) + "Get in touch" (ghost). Contact section CTA: [email protected] rendered as the button itself + LinkedIn (ghost). The CTA matches the visitor's decision state, a designer scanning your page wants to see the work first, not email a stranger.

What the rebuild ships, technically

For the part of you that wants to know what the file actually does. Single static HTML, ~1500 lines. No framework, no build step. Drops into any deploy.

Scope notes (honest list)

Where I made educated guesses, where I didn't, what I'd want from you to tighten:

The actual offer

The rebuild is the artifact. The framework is the offer.

One way to read this whole doc: a thinking exercise on a peer's portfolio, the kind of thing designers do to keep our edges sharp. That's a real read, you can take the rebuild, edit dates, ship it, and we're square.

Another way: the methodology I just walked through (the L0–L4 stack, the citation-grounded predictions, the per-layer scoring) is something you could be running on every comp at Newsela. On every wireframe before it goes to dev. On every redesign argument before the politics gets weird. The framework is portable. It's not a deliverable; it's a lens.

For your day-job

"This wireframe doesn't satisfy L1 because the H1 forces serial reading" is a sentence that wins a design review. So is "L3 says the borrowed-authority signals aren't reaching." Reads as rigor, not vibes.

For comps and reviews

Per-layer scoring (0–100, weighted) gives you a defensible delta to ship. Not "I think this is better"; "this lifts L1 from 52 to 90, here's the mechanism."

For internal arguments

The framework's citations are research-backed (Lindgaard 2006, Cialdini, Bargh, Reber). Engineering and PM don't argue with mechanism. They argue with taste.

For client work / consulting

Same audit format as this doc, scaled to whatever surface. The output reads as practitioner-grade, not "internet UX checklist." It's how Aurochs runs every PFD audit.

If any of this is useful at Newsela, in your side-work, or in conversation with the next agency you talk to: take it. It's a methodology, not a brand. I'm happy to walk through how it's structured if you want a longer conversation about applying it.

What I'd suggest, in order

If anything in here lands and you want to act:

  1. Take the rebuild as a starting point. The HTML file is at /, clone it, edit dates and any project credits, ship it.
  2. Or: pull just the four major findings (F-01 through F-04) into your CMS-driven Gatsby site, the H1 swap, the recency surfacing, the Bluecadet/Newsela hero subhead, the live/archive visual encoding. That's a 2-day edit, not a rebuild.
  3. Or: nothing. This is a thinking exercise on a peer's portfolio; not a pitch for work. If something's useful, take it; if not, delete the email and we're square.

If you want to talk through it, about any specific finding, the rebuild's interaction layer, or the PFD framework itself, I'm at [email protected]. The rebuild is at / on this same domain.

View the rebuild → Email me