Design-thinking case study

The front door problem

Every other site in this collection had a client — real, adapted from a public RFQ, or fictional and labeled as such. This one's client is the hardest kind: the designer herself, with the least forgiving audience she'll ever have.

A real brief, for once entirely real

Hannah Kwakye — web designer and developer, seven years in development, AI Certified Consultant, based in Accra — needed the flagship personal portfolio that fronts a 26-site collection. This is the page most people will land on first, many of them arriving from a video seen by more than half a million people. It has one job with three audiences: clients deciding whether to write, peers deciding whether to respect the work, and the curious deciding whether the story — a designer directing a frontier AI model through twenty-six complete sites — is real.

The brief's hard requirements: present all twenty-five project sites with names, one-liners, technique tags and live links; carry her positioning and her two writing themes; name the services; tell the build story openly; and hold the collection's visual bar — every visual drawn in code, no photography, self-hosted everything.

Twenty-five voices, one room

The collection is deliberately heterogeneous — a couture house, a municipal assembly, a shader poem, a 3D configurator. A hub that imitates any one of them misrepresents the rest; a hub that averages them is beige. The page had to have its own confident identity while letting twenty-five other identities each get a true, palette-accurate moment. And it had to do this fast: a first-time visitor should understand the shape of the whole collection within one viewport and reach any site within two interactions.

What this page refused to be

• The screenshot reel. Full-bleed screenshots of each site in a scroll film. Rejected: raster screenshots violate the collection's code-drawn constraint, weigh megabytes, and go stale the day any site changes. Worse, they present finished surfaces instead of design thinking.
• The 3D archive hall. A WebGL gallery you walk through, posters on walls. Rejected: maximum spectacle, minimum utility — it buries links behind navigation novelty, punishes mobile and older machines, and competes with the sites it is supposed to serve.
• The single featured carousel. One project at a time, beautifully. Rejected: at 25 projects a carousel is a queue nobody finishes; it hides the collection's real headline, which is its breadth.
• Chosen — the index and the wall. An editorial numbered index (scan, expand, visit) and a poster wall (feel, browse, visit), toggled. The index respects readers; the wall rewards lookers; both are the same data, baked from the collection's registry. One signature — the ink thread — carries the identity without shouting over anyone.

Where the taste went

• Hand-authored posters over generated thumbnails. Twenty-five bespoke SVG miniatures cost real authoring time, but they let each project appear in its own palette and language — a colored rectangle would have flattened the collection's argument. This was the single largest investment on the page, and the most visible.
• Palette floods over uniform hovers. Each index row hovers into that site's colors, not the hub's. Trade-off: 25 palette pairs to check for contrast, individually. Worth it — the index becomes a color index of the whole collection.
• Registry baked at build, not fetched. The 25 projects are written into the HTML from registry.json rather than fetched client-side. No loading state, no JS dependency for content, works with scripting disabled. Trade-off: updating a one-liner means regenerating markup — acceptable for a curated collection.
• A rope on two canvases over a shader. The hero could have been WebGL; several collection sites already are. A 2D fixed-distance chain is 80 lines, degrades gracefully, renders a beautiful static frame under reduced motion, and — because it draws with ink-like decay — looks authored rather than generated.
• Ink and porcelain, moss used sparingly. The hub's own palette stays neutral-warm so the flooding rows and posters carry the color. The lime-moss appears as thread, label, and accent — never as a slab.
• Transparency as content. The build story — directed by Hannah, engineered with Fable 5 — sits in its own full section with the thesis set at display size, not in a footnote. If the method is the story, hiding it would be both dishonest and bad marketing.

Why the thread

The collection's implicit argument is that AI doesn't replace taste — it amplifies the designer who has it. The hub makes the argument physically: a single thread, drawn by code, guided by a hand (yours, when your cursor is in the hero), weaving through a name set in type older than the web. Machine motion, human direction. Every seam on the page repeats it quietly.

Goals, not claims

This page makes no invented traffic or conversion claims. It was designed against goals it can actually demonstrate:

• Comprehension in one viewport — name, discipline, positioning, and the scale of the collection ("25 sites, one thread") before any scrolling.
• Any site in two interactions — scan the index or the wall, click through; every project's live link is one hover and one click away.
• A frameable hero and a frameable wall — the two screenshots people share are the two views this page was composed around.
• Proof by existence — the page itself, with its guide open-sourcing every technique, is the demonstration of the services it sells: brand sites, product sites, AI-powered creative systems, and consulting on exactly this way of working.