Inspiration

A city can become a checklist: find a landmark, take a photo, move on. The interesting details often sit between the landmarks—a tiled wall, a doorway, the way a street opens onto the river.

Footlore asks a different question: what would you notice if you took the long way? Its name brings together footsteps and the stories a place carries, with a nod to the road less travelled.

What it does

Footlore is a responsive walking-story prototype that connects real places, mapped walking routes, and short stories. The catalogue contains eight sample walks and 24 source-linked stories, with Global and India editions.

The central journey is deliberately small:

  1. Choose a walk. Explore by city, story, or theme. See its stops, estimated visit time, distance, and terrain before starting.
  2. Choose a stop. The selected map pin, route segment, photograph, and story stay connected. In Lisbon, selecting Santa Luzia changes the experience from cathedral stone to tiles and river light.
  3. Read or listen. Every story has a transcript and optional English computer narration. An observation prompt turns attention back to the place.
  4. Keep a field note. Record the detail you would otherwise forget. Notes save automatically in the browser.
  5. Return to your journey. Saved walks and the current stop make it easy to continue later.

Creator profiles connect stories to their curators. Creator Studio lets someone choose a place and prepare a local recording/transcript draft through a clear, five-step workflow. Seeded profiles are explicitly marked Demo.

How we designed and built it

The interface uses warm paper, forest green, restrained ochre, and editorial typography. That visual language supports slower discovery, while the application opens directly into a usable workspace rather than a marketing page.

On desktop, the map, story, and ordered stops sit together. On a phone, Map, Stops, Story, and Details become focused views with persistent navigation. Keyboard controls, visible focus, semantic structure, reading alternatives, and reduced-motion styling are included in the implementation.

The app is built with HTML, CSS, and vanilla JavaScript. Leaflet renders OpenStreetMap street tiles and an Esri satellite option. Cached FOSSGIS OSRM pedestrian geometry follows the street network instead of drawing a decorative line between landmarks. The Web Speech API provides optional narration; localStorage holds saved walks, progress, notes, and draft text. Remotion and TypeScript were used separately to produce the 68-second demo.

Challenges we ran into

Making the map part of the story. A plausible-looking map was not enough. Stop selection needed to update the pin, walking segment, photograph, and story together. We replaced the illustrative treatment with geographic maps and generated pedestrian routes.

Keeping exploration separate from progress. Previewing another route should not overwrite an active walk. The interface distinguishes previewing from starting, and completion is an explicit action rather than a claim that we detected a physical visit.

Making the phone experience feel intentional. Shrinking the desktop columns produced too much competing information. Focused mobile views preserve the same journey with fewer simultaneous decisions.

Accomplishments and what we learned

The strongest result is a complete interaction: choose a place, understand its story, keep an observation, and return to it. Maps, reading, listening, notes, and saved progress support that loop instead of becoming disconnected features.

This build reinforced that clarity often comes from removing ambiguity: distinguish preview from progress, computer speech from human narration, and sample content from a live creator community. The interface includes accessibility features, but we are not claiming a formal accessibility audit or field-validated routes.

What's next

Test the journey with walkers and local storytellers, improve route/access information, add permissioned human recordings, and develop a moderated publishing workflow. Cross-device accounts, offline downloads, and live GPS navigation are future work.

Submission scope

This entry is the newly built Footlore frontend prototype, developed from an earlier walking-story concept: a new identity, interface, Global/India sample catalogue, connected map/story interactions, and local creator workflow.

The submitted video and screenshots demonstrate the local build. The app remains on localhost; the demo does not imply a public deployment. Routes are generated pedestrian paths, not recorded GPS tracks, and prototype notes/drafts stay in the browser. Destination photographs are used under their credited licenses; source/attribution links accompany the demo video.

Share this project:

Updates

Submission history