Strata — literary geography interface showing a world map with city pins and an open shelf panel displaying books mapped to New York
Role
Lead Product Designer: Systems, IA & Front-End
Type
Self-directed speculative product
Built With
Claude, HTML, CSS, Vanilla JS, Natural Earth GeoJSON.

A literary geography interface that maps world literature to the cities that produced it — across place, time, and perspective. Live product — 34 books, 27 cities, 6 continents, fully interactive.

Visit Strata
The Problem

Literature is organised by genre. It should be organised by place.

Cities shape the conditions of writing. The streets a novelist walks, the season a story is set in, the social texture of a neighbourhood at a particular historical moment — all of it enters the work. But no tool makes this spatial dimension of literature visible or navigable.

Existing entry points to world literature sit at two unhelpful extremes. Goodreads and genre sites organise by author, topic, and star rating — geography is an afterthought. Academic literary geography is rich with scholarship and empty of access: dense monographs that no one outside a seminar room navigates. Neither treats place as a primary organising principle.

Design question: How might we build an interface that treats city and era as the primary axes of literary discovery — not filters on top of a list, but the map itself?

How literature is usually browsed
By genre, author, or algorithm. Place is metadata — a tag in a sidebar, a location note in a blurb. The map never becomes the interface.
What Strata does differently
Geography is the primary navigation surface. You don't filter to a city — you start there. The map is the index.
Key Insight

Cities accumulate meaning across centuries. Literature makes that visible.

The conceptual spine of Strata is the palimpsest — the manuscript written over, imperfectly erased, still legible beneath. Cities are palimpsests. Each generation writes over the last. The Marais in 1880 is not the Marais in 1943 or 2005, yet all three moments share the same streets. Literature is the record of those layers.

This reframed the entire product. The interaction model isn't search — it's excavation. The map surface isn't a background — it's the primary document. The era filter isn't a refinement — it's a temporal axis that shifts the entire view.

Axis One — City
The literary site
Each city is a literary site — a place with a documented relationship to writing. Selection is intentional, not exhaustive. Cities are chosen because something significant happened in them.
Axis Two — Era
The temporal layer
Three periods — Pre-1920, Mid 20th Century, Contemporary — allow the same city to appear differently across time. The map pins shift. The shelf changes. The city remains.
Axis Three — Perspective
Who is speaking
Who is speaking from inside the city? The exile reads differently than the native. The expatriate carries different sight lines. Perspective is part of the archive, not a filter on top of it.

A city without its literature is a geography without a memory.

— Strata design brief, 2026

Strata world map view — SVG country map with city pins across Africa, Europe, Asia and the Americas, shelf panel open on the right showing Canada aggregate view

The map as primary document: 27 cities across 6 continents, each a literary site.

AI Collaboration

Built with AI. Every decision owned.

Strata was built entirely in collaboration with Claude — not as a shortcut, but as an extended design process. Every prompt was a brief. Every revision was a critique. The product's quality followed the clarity of the intent behind each exchange.

Claude — Concept
Framing, brief-writing, and system design
Used to develop the product concept, define the three-axis model, pressure-test the interaction logic, and write the editorial voice. The palimpsest metaphor emerged through dialogue, not in isolation.
Claude — Build
Front-end: HTML, CSS, and Vanilla JS
The entire codebase was built through directed prompting — custom SVG map projection, scale-invariant pins, country aggregate view, book expand interactions, era filter chips, and full responsive layout. Each feature was tested against design intent before proceeding.
Claude — Data
Dataset, synopses, and content curation
The 34-book dataset was structured with coordinates, era classification, genre, neighbourhood, synopsis, and quote — all written or verified through directed prompting. AI supported the curation; editorial judgment determined every inclusion.

The more specific the brief, the less revision required. AI fluency, at its core, is design fluency. Strata is a demonstration of that proposition.

Design Decisions

The map is the interface, not the header

Most products that use maps treat them as a visual accent — a decorative layer above the real content. Strata's two-panel fixed layout puts the map and shelf on equal footing. Neither collapses into the other. Clicking the map changes the shelf. The geography drives the reading, not the reverse.

Trade-off: The fixed layout demands viewport real estate. On mobile the panels stack — map on top, shelf below — preserving the hierarchy without sacrificing the relationship.

Country click shows all cities in that country

Clicking France surfaces Paris and Marseille together — an aggregate shelf grouped by city, each group a drill-down point. This was the highest-leverage interaction decision: it changes the shelf from a city-level tool into a region-level one, making multi-city countries navigable without added UI.

Trade-off: Single-city countries skip the aggregate view entirely and go directly to city view — so the pattern doesn't add friction where it adds no value.

Era as chips, not a slider

An early build used a continuous era slider. It was removed because it introduced false precision — a continuous axis implies gradation where the data is actually categorical. Three pill chips (Pre-1920, Mid 20th C., Contemporary) are faster to use, visually clear, and honest about how the underlying data is structured.

Trade-off: The slider was more expressive as an aesthetic object. The chips are more correct as an information design choice.

Pin labels hidden until hover

On the world view with 27 cities, always-visible labels create overlapping text noise that competes with the cartographic surface. Labels are hidden by default and fade in on hover — the city name appears as an act of discovery. The map becomes a constellation of dots, readable as density without being readable as clutter.

Trade-off: New users need to learn that the dots are interactive. The hover affordance is standard for cartographic interfaces, so the learning cost is low.

Editorial restraint as a design constraint

The palette — near-monochrome, lavender-grey accent, Neue Haas Unica at weight 300–600 — was chosen to let the content carry visual weight rather than competing with it. Every element was tested against the question: does this earn its presence? Cards, shadows, and ornamental UI were rejected. Spacing, dividers, and typographic hierarchy do all the structural work.

Trade-off: The restrained palette requires stronger typographic hierarchy to compensate. Small errors in type scale or weight are more visible than they would be in a colourful UI.

Visit the live product
Strata shelf panel — city view showing book list with expand interaction open, displaying synopsis and quote for a selected title

The shelf: each book opens to reveal a place-focused synopsis and literary quote.

Outcome

A live literary geography interface — 34 books, 27 cities, 6 continents.

Strata is hosted and fully interactive. The dataset covers Africa, Asia, Europe, North America, South America, and Oceania — each city chosen because something literarily significant happened there, not merely because writers passed through.

Every book entry carries coordinates, era classification, neighbourhood, a 2-sentence place-focused synopsis, and an in-text quote. The map renders from Natural Earth GeoJSON with a custom equirectangular projection — no mapping library, full visual control.

The product demonstrates that literary geography — underbuilt as a field of public access — can be made navigable without sacrificing intellectual rigour. It also demonstrates that directing AI through a design process produces different results than using it as an autocomplete: the quality of output follows the quality of the brief.

Strata Africa continent view — zoomed map showing African country outlines with city pins for Abidjan, Akure, Algiers, Bujumbura, Ibadan, Kigali, and Thebes

Africa continent view: seven cities, seven literary traditions, one surface.

Reflection

What building a map taught me about information architecture.

Strata began as a concept and became a product through iteration. The most important design decisions weren't visual — they were structural. What is the primary axis of navigation? What happens when a country has multiple cities? How does the shelf behave when no era filter is applied? Each of these required a clear answer before a single line of CSS was written.

Working with Claude throughout the build also clarified something about the design process itself. Prompting an AI is not different in kind from briefing a collaborator. The clearer the design intent, the more precise the output. The more ambiguous the instruction, the more revision required. AI didn't replace the thinking — it made the quality of the thinking visible faster.

If the project continues, the next layer of work would include:

  • User-contributed city and book entries with editorial moderation
  • Neighbourhood-level filtering — drilling from city to district
  • Reading list mechanic — save and export a personal literary itinerary
  • City portrait photography replacing the current placeholder slots
  • Supabase backend to support real-time data and scale to 500+ books

Longer term: expanding the dataset to make literary geography a genuinely global tool — one that surfaces traditions underrepresented in English-language canon.