Product design

Two products,
one question

How I designed two versions of (re)Route – each a different answer to the same problem, each teaching me something about what it means to build with AI.

← V1.0 – The smarter map V2.0 – Side quests →
What would walking be like, if it wasn't just "optimised" time?

Navigation apps treat journeys as dead time between A and B. But the people I interviewed didn't want faster routes – they wanted a reason to look up. This question drove both versions of (re)Route, and the pivot between them.

1.0
The smarter map · rerouted.vercel.app

A map that understands intent

My first instinct was to build a better Google Maps. Instead of just "fastest route," what if the app understood why you were walking?

UX decision: Three entry points, not one search bar

Google Maps has one paradigm: search → route → follow. User research showed three distinct walking intentions that needed different interfaces:

GO
"I know where"
Destination-driven
Search bar + autocomplete. But instead of one route, the AI generates 2–3 alternatives scored by mood (calm, scenic, lively) using 119k street segments. The user chooses the vibe, not just the speed.
EXPLORE
"Help me decide"
Mood-driven
Natural language input: "artsy date night" or "calm walk by the beach." An LLM orchestrator classifies the query into 6 action types, then routes to specialised executors, each with a tailored UI pipeline.
WANDER
"Just walking"
Screen-minimal
No search bar, no destination. A compass-oriented map showing curated POIs within 300m, refreshing as you move. Mood filters (calm, discover, scenic, nature, lively) shape what appears. The first seed of screen-minimal design.
Wander mode — compass map with nearby POIs
Design logic

Three entry points reduce decision paralysis. Instead of an empty search bar that triggers the Google Maps mental model, users self-select their intention level. This guides both the UI they see and the AI pipeline that runs.

AI decision: LLM as orchestrator, not chatbot

The AI doesn't talk to the user. It classifies their query into one of 6 action types and returns structured parameters that drive a deterministic UI pipeline. One GPT-4o-mini call decides the action; specialised executors handle the rest.

6 action types

ActionTrigger
generate_walk"calm 30 min walk," "get lost"
dest_route"walk to Sagrada Familia"
search_places"best vermut," "laptop-friendly cafe"
plan_experience"artsy date night," "vermut trail"
themed_walk"Gaudi walk," "gothic quarter"
explore_area"explore Gracia," "waterfront"

Tiered search strategy

The orchestrator also classifies which search pipeline to use:

  • Standard – Google Places keyword search. For "tapas near me."
  • Reasoning – GPT-4o generates 5–6 candidates by name + reasoning. For "artsy date spot."
  • Web-grounded – GPT-4o + web search tool. For "underground bars" or "new cafes."

All reasoning/web candidates pass through a hallucination filter: cross-checked against Google Places. If the place doesn't exist, it's dropped.

Data decision: Mood-weighted street scoring

119,000 street segments scored across 5 dimensions (noise, greenery, cleanliness, cultural richness, liveliness) from Barcelona Open Data. Each mood applies different weights to generate distinct route alternatives from the same origin/destination.

119k
Street segments scored
372
Curated POIs (hand-verified)
5
Scoring dimensions
6
Mood profiles
What made it different from Google Maps

Barcelona Open Data Street quality scoring that Google doesn't have.

372 synthetic POIs Places that don't exist in Google Places.

User-centred pipelines Different UX flows per query type.

UI experiment: Where AI output surfaces

The key UI challenge: AI does a lot of work behind the scenes, but how does that intelligence appear to the user? Every AI output needed a visual home that felt earned, not generic.

Search verification
Generated tags & descriptions
Search "laptop-friendly cafe" – the LLM scans reviews for evidence. Confirmed? ✓ COZY ATMOSPHERE FOR WORK in green.
Verification tags
Route summary
Verified labels & vibe summary
Same origin/destination, 2–3 route alternatives. Each card: AI-generated label to add nuance.
Route cards with mood labels
Discovery
Point-of-Interest toasts
Walk within 50m of a curated POI – a toast slides up with a story. AI surfaces knowledge at the moment you can act on it.
POI proximity toast
Intent matching
Multi-step experience planning
"Artsy date night" → GPT-4o decomposes into steps: Gallery → Dinner → Drinks. Each step gets its own search strategy.
Error handling
Responses with personality
Every error state has a contextual, personality-driven message instead of generic fallbacks.
Personality in error messages

Design principle

AI output should answer the specific question asked, not display generic data. The verification tag tells you why this place fits your query. The route description tells you what the streets feel like. The proximity toast tells you what's next to you right now. Every AI surface is scoped to a moment of decision.

What 1.0 revealed

"4 out of 5 users still used it exactly like Google Maps."
User testing insight

Places search, keyword-based, no nuance. The tool wasn't the problem. The paradigm was. Even people who said they wanted to explore more defaulted to "tapas near me."

Diary study insight

"For me, that's all the problem of motivation to explore rather than knowing where to go once you are in the mood to explore."

* People don't need more directions. They need more inspiration.

The pivot

From routes to quests

The search → route → follow loop is single-use and screen-heavy. Quests create a repeatable gameplay loop with progression, and they give people the reason to go outside that the map never could.

2.0
Side quests · the city as a game

A game master, not a map

V1 built a smarter map. V2 asks: what if the app didn't show you a map at all? What if it gave you a reason to walk, and a camera to prove you did?

UX decision: The core loop

1
Accept
Choose a quest from the deck. AI generates them from weather, time, location, events, and your taste profile.
→
2
Walk
Navigate by compass, not polyline. A direction, not a path. Get lost and find your way whenever.
→
3
Snap
Photograph what the quest asks you to notice. The camera is the interaction, not the screen.
→
4
Verify
AI judges your snap against the quest's vibe. Strict enough to be a game. Loose enough to reward noticing.

Design logic

Every step reduces screen time. Accept is a swipe. Walk is compass-only. Snap uses the camera (you're looking at the world, not the phone). Verify is instant feedback. The phone becomes a camera, not a GPS.

Product decision: Three quest types

Each type tests a different kind of presence:

VISIT
GPS-verified proximity
Navigate to specific locations. The system auto-detects when you arrive within range. No snap, just being there counts.
WANDER
AI-verified snaps
Take photos matching a theme while walking freely. AI vision judges if your snap captures the quest's intention.
COLLECT
AI-verified + count target
With a target count and long-term progression. "Photograph 100 cats" becomes a persistent collection that unlocks badges over weeks.

AI decision: Five quest generation paths

Quests should never feel stale. Four sources with different refresh rates:

Live
Real-time triggers
Sunset windows, market hours, weather events. Ephemeral – disappears when the moment passes.
Cron 3×/day
Prompt “What’s happening today worth a quest?”
Daily
Community quest
One quest for everyone today. Shared experience, participation tracking. Filtered by weather and day of week.
Cron 06:00
Prompt “What’s today’s community quest?”
For You
Taste profile
Per-user quest shaped by what you notice. Learned from snaps, rebuilt nightly.
Nightly cron
Prompt “What should THIS user try?”
Chat
User-requested
Free text interpreted into a quest. The only path where the user explicitly asks for AI output.
On-demand — 3–5s
Prompt “What does the user want?”
Local
Unknown city
Lat/lng of any city. Web search finds real places on the fly. No pre-curated data needed.
On-demand — 5–7s
Prompt “What’s interesting HERE?”
Pre-cached = zero latency

Inside Barcelona: Live, Daily, and For You run on cron — users see instant results. Chat is on-demand. Outside Barcelona: all sources generate on-demand via web search. Loading UI: UNDERSTANDING… → SEARCHING… → WRITING…

AI decision: Two Agents for Grounded Creativity

Seperating facts from fiction is a delicate balance with LLMs. To create a safe space for the AI to be creative, I used the mental model from my time in advertising - and made my own team of two agents with different roles and configurations.

The Strategist decides the brief: what angle, which data, which real places. A Grounding Layer then enforces truth in two passes — code verifies every coordinate, and a bounded checker verifies every claim against its source (ambigious claims gets demoted to atmosphere). The Creative brings the verified brief to life: tone, game mechanic, storytelling.

Five prompts, one pipeline

Every source feeds the same three-stage chain. The input varies; the output format never does.

Live
“What’s happening today worth a quest?”
Daily
“What’s today’s community quest?”
For You
“What should THIS user try?”
Chat
“What does the user want?”
Library
Fallback / pre-generated
→
The Strategist
The Suit
  • Interprets input
  • Fetches data ↕
  • Selects places
  • Extracts what we know vs don’t know
► Live path
Finds a timely event and writes the brief directly. Falls back to recurring events or light windows if unavailable.
Temp 0.1 · gemini-2.5-flash-lite
↕
Database
Google Places LLM Web Search (blogs & reddit)
Barcelona only
Bloom API 372 POIs
QuestBrief (draft)
→
Grounding — bounded, call-per-claim, Temp 0
Grounding
L1 — Coordinates · No LLM
POI match → Nominatim → drop if unresolvable
L2 — Claims · bounded classifier
Entailment vs evidence. Unsupported → do_not_invent. Skipped for curated/bloom.
QuestBrief (verified)
→
The Creative
The Creative
  • Picks a seed (or invents angle)
  • Decides tone
  • Invents game mechanic
  • Writes title, intention, description
Temp 0.7–0.9 · gemini-2.5-flash
↓
Creative Toolkit
Seeds
Quest angles & samples
Tone
PlayfulPoeticOpinionatedWarmDaring
Quest card
in deck
→
Examples
What it produces
Live
Primavery Sounds
Daily
Secret Corners of Gracia
For You
Exiample's Modernist Secrets
Chat
Shop Front Stories

Model selection & cost

The Strategist
The Suit
Modelgemini-2.5-flash-lite
Outside BCNgemini-2.5-flash + search
ModeJSON, temp 0.1, thinking off
→
Two-layer verification
Grounding Layer
Layer 1 — Coordinates · No LLM
MethodPOI fuzzy match → Nominatim geocode
On faildropped, not faked
Timing~200ms, parallel
Layer 2 — Claims · bounded classifier
Modelgemini-2.5-flash-lite
Modetemp 0, thinking off, label-only
Checkeach claim vs its own evidence
On faildemoted to atmosphere, never stated as fact
→
The Creative
The Creative
Modelgemini-2.5-flash
ModeThinking enabled
Temp0.7–0.9
~$0.02
Max cost per quest
0ms
Pre-cached sources (Daily, Live, For You)
3–7s
On-demand sources (Chat)

UX decision: Compass replaces polyline

v1.0 Polyline
  • Eyes on screen
  • Follow the blue line
  • Turn-by-turn
  • Replicates Google Maps
v2.0 Compass
  • Glance and go
  • A direction, not a path
  • You choose the route
  • Feels like exploring
North star metric = Snap-to-navigation ratio

High snaps + few map interactions = the phone is a camera, not a GPS.

COMPASS
"Look up, not down"
Direction, not directions
The compass gives you a direction and a distance. Everything in between is yours to navigate. You look at the city, not the screen.
WATCH
"Phones down"
Wrist-first navigation
The watch companion takes this further. Request a quest, track and navigate with your wrist, phone stays in your pocket.

AI decision: SNAP as verification ritual

SNAP is the moment where AI and human presence meet. The user photographs something; the AI judges whether it matches the quest's intention. The calibration is critical:

VISIT
GPS proximity
No photo needed
System checks: are you within range of the location? Binary pass/fail. Locations logged and checked off the compass map.
WANDER
AI vision
"Does this capture the vibe?"
AI matches photo against quest intention. Strict enough to prevent gaming. Loose enough to reward genuine noticing.
COLLECT
AI vision + count
"Is this a [thing]?"
More generous: if you're on your 47th cat photo, the AI trusts you. Sustained collection over per-snap perfection.

AI decision: "Attention intelligence"

Your snaps teach the app what you notice. Over time, it reflects your attention back as quests designed for the way you see the city.

You snap photos
Every snap carries signal: what you pointed the camera at, when, where, for which quest
AI builds taste profile
Gemini analyses activity patterns into natural-language taste notes: "loves quiet courtyards," "drawn to colour on grey walls"
Taste shapes future quests
FOR YOU quests and CHAT responses use the profile. The more you walk, the more personal it gets.
Taste travels with you
Unlock a new city → your taste profile generates quests tailored to you in a place you've never been. This is the data moat.
Product strategy

The taste profile creates switching cost that no competitor has. Google has POI data. (re)Route knows what you notice. The profile is built for free in your home city – it becomes the reason tourists pay for city unlocks.

Gamification: Badges as motivation, not pressure

24
Achievement badges
Walking stats: streaks, time of day, distance
15
Collection badges
Snap themes: cats, doors, pigeons, murals
Design logic

You're collecting evidence of your own attention. The game is between you and the city – progress without pressure.

Badges screen 1
Auto-verified
Badges screen 2
No leaderboard
Badges screen 3
No competition

UI experiment: Where AI output surfaces in 2.0

In 2.0, AI is more present but more hidden. Every AI output is wrapped in game language and pixel art, so it never feels like "talking to an AI."

Quest cards
AI Storyteller
Each quest card displays AI-generated fields: titles, hooks, descriptions and POI stories. The contextual responsiveness makes AI text feel like it's augmenting reality.
AI-generated quest story
Snap verdict
AI Game Master
After snapping, a toast shows the AI's verdict (with room for creativity). A gamified ruling of whether quest objectives are met.
Snap verification verdict
Taste profile
AI as a Mirror
The AI's taste analysis appears as free-form text. Users can edit these notes and reflect on what they appreciate but don't realise they do.
Taste profile screen
Chat quests
Open-ended queries
"Give me something about street art" → Gemini responds as Re. Loading states: "asking the pigeons...", "consulting the tapas oracle...".
Chat with Re
Landscape
Responsive Landscape
Home screen responds to weather, time, season, and quest tags. Weather API + clock + conditional rendering. (Not AI, but makes the app feel alive.)
V1.0 vs V2.0: AI visibility

In 1.0, AI output appeared as data annotations layered on top of places and routes. In 2.0, AI output appears as game content wrapped in a visual identity.

But not everything that feels smart is AI. The responsive landscape, the countdown timers, Re's thought bubbles – these are deterministic design choices (weather APIs, cron jobs, conditional rendering) that create an ambient sense of awareness. They make the actual AI outputs land in a context that already feels alive.

What changed between versions and why

Decision 1.0 2.0 Why it changed
NavigationRoute polylines (ORS)Compass ring onlyPolylines replicate Google Maps. The compass forces you to navigate by looking at the city, not the screen.
Core loopSearch → route → followQuest → walk → snap → earnRoutes are single-use. Quests create a repeatable gameplay loop with progression.
AI roleGPT-4o-mini classifies intent, ORS generates pathGemini generates quests, validates snaps, builds taste profileShifted from routing intelligence to creative intelligence. AI writes the narrative and judges photos.
IdentityAnonymous, statelessDevice UUID, persistentQuest completion, badges, and taste memory require identity that persists across sessions.
CameraNot implementedFull snap system + AI validationSnaps turn walking into active noticing. The camera reframes exploration as attention.
DesignTailwind + monospace brutalismPixel art brutalism (Silkscreen + Space Mono)No rounded corners, hard shadows, pixel art landscape. The app should feel like a game, not a tool.
GamificationNone39 badges, streaks, taste profileExploration needs motivation loops. Badges create engagement without efficiency pressure.
ContentGoogle Places + curated POIsAI-generated quests + curated libraryPlaces are finite. Quests are infinite. AI generates fresh missions from the same city data.
SharingSave routes locallyPublic snap map + shareable collectionsUser snaps become the discovery layer for the next user. The product markets itself through content.

Design principles for building with AI

Lessons from designing two AI products – what worked, what didn't, and what I'd do again.

01
AI should be invisible
V1 leveraged AI as an orchestrator in an agentic flow. V2 wraps it in a smart gamified role. No prompts, no spinners. Just a better experience.
02
Design the output, not the input
V1 let users type freely – powerful but unpredictable. V2 designs the output instead: quest cards with specific verbs and targets.
03
Give AI a role, not a feature
V1 used AI as a smart assistant. V2 gives it a role: A game master who writes quests, judges photos, learns taste.
04
Hallucinations as creativity
In V1, hallucination meant fake places. In V2, it becomes the creative engine – AI invents quests within constraints.