A printed workbook, rebuilt into a field tool that runs.
Three personas, four lenses each, one workshop day. An opportunity matrix to argue with, an empathy map per practitioner, a session summary that captures everything before the room moves. In 2017 that load traveled on a printed 23-page workbook. Nine years later, I scaled that workbook into a 23-screen field tool, using Claude as a parsing and scaffolding partner, so the same workshop choreography could now run room to room — without a refresh, without a stall.
The 2017 work landed on two surfaces — a partnership microsite and a workshop environment, in Chicago and Bangalore. The Field Guide app is the third surface, retroactively built in 2026 from the original workbook. Same motion grammar across all three; same sense that the technology shows up only as long as it serves.
I led the work end to end — interaction model, motion choreography, visual language, and editorial voice across all three surfaces. Every transition was tuned by feel, then written into a stack a product engineer could fork.
The insight was structural. Each of the seven service pillars maps directly to a Mondelēz product line — color-coded, named, and tuned so a complex partnership commitment can be read at a glance. The framework above is the spine the rest of the work hangs on: same palette in the microsite, same color-codes in the field tool, same vocabulary in the room.
A framework you can taste.
The partnership has had a home since 2017. The microsite frames the brand identity, the seven-product framework, the strategic commitments, and the full story of the Bangalore site visit. Maintained and updated in the years since, the site keeps reflecting where the relationship stands. The same care for typography, motion, and craft shows up in the field tool.
A document opens once.
An environment stays open.
A rangoli spelled out Mondelēz in flower petals at the lobby. A traditional Indian art form, hand-laid, impermanent by nature. The peacock illustration anchoring the environmental graphics was rendered from the teardrop forms of the Mondelēz logo itself, binding the brand mark to the cultural symbol in a single shape. Inside, every engineer carried a trading card with their role, their experience, and their favorite Mondelēz product. Tarun: Oreo. Mainak: Cadbury 5 Star.
Eleven engineers on the welcome board.
Hundreds more in a card in their pocket.
Three people. Three realities. One framework. The Field Guide app turns the original IBM Design Thinking session into twenty-three screens — empathy mapping, journey, opportunity matrix, session summary, all built to be used on your feet, room to room. Each screen has its own URL so a teammate can jump to Smita’s matrix or Nirmal’s journey in one click. The 2017 site visit ran on print; the app is that 23-page workbook scaled into a working tool.
Twenty-three screens.
One motion language.
Three qualities, applied across every surface. Things settle quietly when they change in place. Taps and arrivals land with a small spring. Slower moments glide. The system feels intentional throughout — built once, used everywhere. The matrix tab is where the language lands hardest. Drop an opportunity into a quadrant and it settles with a small spring, the zone answering back. And when the room asks Claude for help, the wait never reads as a wait — a sweep crosses the tray to absorb it, and the suggestions arrive one at a time, each landing like a decision made, not a result returned.
Settle, spring, glide.
Tap any moment to feel its curve. The matrix snap lands with a small spring; the AI wait sweep ticks at a steady pace; the suggestions arrive with a slow glide. Below, all three stacked on the same axis.
Tap an opportunity, then tap a quadrant — the dot springs in with a small overshoot, then settles. The receiving zone glows once to ratify the placement. The spring reads as physical material; the action stamps as deliberate, not incidental.
Open Rajiv’s matrixWhen the room asks Claude for help, the call takes a couple of seconds. A diagonal light-bar travels across the tray to absorb the wait — work happening, not a stalled UI. The curve underneath glides; the sweep itself ticks at a steady pace, so the rhythm reads as constant labor.
AI features offline in the public copyAfter Claude returns, each suggestion flies into its quadrant in turn — staggered 90ms apart so the verdict reads as a series of decisions, not a flash of new content. The earlier dots simply land; the final one springs in and its quadrant pulses once. Three rhythms in one beat.
Open Nirmal’s matrixThe prototype is the spec. Plain HTML, CSS, and JavaScript — no framework, no build step. The motion choices live in the same place as the comments that explain them, so a developer reading the page can take in the whole system at a glance. Every one of the twenty-three screens has its own URL — useful in a workshop, where a teammate can jump straight to Rajiv’s empathy map or Nirmal’s opportunity grid in one click. The handoff is the repo.
From persona selection through session summary — every state captured. Each tile opens the rendered screen.
Every screen, one click away.
Same six-tab system, three distinct work realities — Rajiv on Change Governance, Smita on Skill Management, Nirmal on Demand Forecasting.
The architecture flexes per practitioner, the motion grammar holds.
I made every choice; AI sharpened many of them. The starting point was a 23-page printed workbook from the 2017 engagement — three personas, thirteen journey stages, forty-two empathy quotes, the seven-product framework, four AI-era provocations. Claude read the PDF into a structured outline, proposed how the screens should connect, and laid in a first pass. I shaped the architecture, tuned the motion, and wrote every line of the build. 23 pages in, 23 screens out, 320+ data points carried. The AI suggestion sequence went through three iterations before the timing felt right; Claude noticed the suggestion was landing too abruptly, and I rebuilt it so the verdict reads as a decision arriving, beat by beat. AI as the design partner you brief on intent and review for craft — accelerant, not author.
A workbook, made interactive.
