Tracklines
A sound you follow down a mountain trail to a story

- Client
- Banff New Media Institute, with Parks Canada
- Year
- 2006–07
- Role
- Interaction designer; graphic and animation design
- Tools
- After Effects, Illustrator and the rest of the Adobe suite, Nokia N70, Bluetooth GPS, Mobile Experience Engine (J2ME)
01 The idea
Tracklines was a walk with stories in it. Hikers on the Hoodoo Trail in Banff National Park carried a Nokia N70 phone and a Bluetooth GPS unit on a velcro armband, and the trail was seeded with story points. Our 2007 treatment called it a "walkumentary": closer to a museum audio tour or a sound walk than a game. It also put the whole interaction in one image: the trail flooded with "a responsive musical fluid of different densities trapped inside the shapes of mapped polygons". You find a story by hearing it get warmer. One trail could carry several walks at once, stacked "like invisible stratigraphy" and picked from a Layer Selector; the first, Geology: A Walk Through Time, was co-authored with Parks Canada.
Banff New Media Institute, ART Mobile Lab, March 2006 to March 2007, as part of the Mobile Digital Commons Network, funded by Canadian Culture Online. Parks Canada's Banff EcoIntegrity Project co-authored the geology walk: six story points on the Hoodoo Trail.
02 What the phone showed
Each story point is a set of nested rings. Walk into the outer ring and an ambient sound and a drawing start on the phone; closer in, both build. At the centre a short "hook" sound plays and the screen resolves into a menu: Play Story or Move On. Move On asks once more; after the story, Play Again or Move On. Walk away past the reset zone and the point re-arms. The phone could stay clipped to your belt the whole time: the screen was there for people who wanted it. These are the Limestone point's screens, in order, from the schematic.
The rings, per the 2007 schematic: region 3 at 60 m, region 2 at 40 m, region 1 at 20 m, and a reset zone 15 m beyond.
- a0 · the map, between story points
- Region 3, 60 m · ambient sound, and the drawing starts
- Region 2, 40 m · louder, and it grows
- Region 1, 20 m · the hook, then Play Story / Move On
- Move On asks once more: Play Story / Skip It
- The story plays
- After the story: Play Again / Move On
- A boundary hotspot: off the story zone, or a side path
03 Why there's no demo here
I built a version of the walk for this page, a map you could drag a hiker across, and took it out. Tracklines was designed as an added layer over surroundings that were already majestic: the Hoodoos, the Bow River, Tunnel Mountain above you, the sound arriving while you walked. The phone was never meant to be the point. Recreating that in a web page is somewhat futile, so this page shows the work that went into it instead: the screens, the animations, the documents.
04 One story, as it played
The Limestone story as the phone played it when you chose Play Story: the drawing grows in, then the narration.
05 My part
I was the interaction designer. I designed how the phone behaves around a story point: the rings, the menus and their second chances, the fail-safes for a hiker who walks off in the middle of a story, and the controls. I made all the graphics and animation for the geology walk, and the Tracklines poster and logo art. And I drew the technical schematic and flowcharts the engineer built from: every screen, every asset name, every state.
The control rules, from the schematic: the joystick works left and right only, "to minimize accidental button presses". "0" always opens the Layer Selector and "#" goes back. The application starts by itself when the phone powers on.
06 Concentric navigation: a concept test
A navigation clue, tested as a motion study in June 2006 (by the file dates). Far from a story point the rings look random: loose, broken, out of register. The closer you get, the more concentric they become, until they lock into one target at the hotspot: an abstract, game-like compass. The test carries on past that point, the target tilting back, stacking into layers and falling through the centre. The walk we shipped used growing drawings on the screen instead, but nested rings stayed the model for every story point.
07 The concept, frame by frame
Eight frames from the same test, at the phone's screen size: random when you're far away, more concentric as you close in, locked into a target at the hotspot; then the target tilts back, stacks and falls through.
- 0:00 · far away: random
- 0:07
- 0:11 · getting closer
- 0:16 · at the hotspot: concentric
- 0:27
- 0:32 · tilting back
- 0:36 · stacking
- 0:52 · falling through
08 The intro movie
Pick the geology walk and the phone plays its intro first: what the walk is about and how to wear the kit. The treatment calls it "essentially a pre-hike tutorial". The animation is mine; the sound is Davide Di Saro's with Geoffrey Shea, and the narration is by Emily Paige, Davide Di Saro and Angus Leech.
Intentionally kitsch!
09 The drawings grow
Each story point had its own drawing, labelled like a plate in a field guide, and I animated each one drawing itself: the line work builds, then the detail arrives. The treatment notes that video at each hotspot "exceeded the memory capacity of the mobile phones", so on the phone the rings show stills: stages of these drawings growing in.
- fig.01 · crinoid with fish · Limestone
- fig.02 · orographic clouds with airplane · Water
- fig.03 · douglas fir with ravens · Douglas Fir
- fig.04 · fold with fir tree · Mountain Building
- fig.05 · hoodoo with red sun · Erosion
- fig.06 · hoar frost with ice insect · Glacier
10 One drawing, five days
The Water drawing across five working days, from the dated files: December 18, 19, 20 and 21, then January 7, when the clouds got their colour.
- Dec 18, 2006
- Dec 19
- Dec 20
- Dec 21
- Jan 7, 2007
11 The schematic
Fourteen pages, March 2007. The file directory, the phone controls, the Layer Selector, the hotspot locations with their GPS coordinates, both flowcharts, the media key, and a screen-by-screen spec of every asset, ending with the boundaries. Open a page and use the arrow keys to read through.
- p.1 Cover
- p.2 File directory
- p.3 Phone controls
- p.4 Layer Selector: architecture
- p.5 Layer Selector: specifications
- p.6 Hotspot locations, Hoodoo Trail
- p.7 Flowchart: startup
- p.8 Flowchart: hotspot
- p.9 Reference: the media descriptor
- p.10 Reference: legend and region sizes
- p.11 Autostart and Layer Selector phase
- p.12 Hotspot interaction graphic
- p.13 Hotspot interaction specifications
- p.14 Boundary interaction specifications
12 What the trail taught us
We tested it on the trail with volunteer hikers, using participant observation and other ethnographic methods with Concordia's EMU group and OCAD. The rings worked, but hikers almost never left the path to chase a sound. Story points placed off the trail, or only brushing it with their outer rings, were "almost universally overlooked": people heard the clues build and fade and kept walking. So the points went onto the path itself, into "bottlenecks" where they "can't be missed". The treatment called that section "Loaded Breadcrumbs".
The 2007 treatment calls Tracklines "the first fully operational mobile phone and GPS-based mediascape to be developed in Canada specifically for a wilderness trail environment", and Parks Canada's first venture into locative media.
From our 2007 design treatment
Ultimately, the design of Tracklines aims at providing hikers with a secondary enhancement or augmentation to their experience – never at becoming the main point of the hike itself.
13 Related
Gallery · 16 items
Geology: A Walk Through Time screens © Parks Canada / Banff National Park; Tracklines © Banff New Media Institute. Shown for portfolio purposes.
Credits · as the 2007 treatment lists them
Tracklines application · ART Mobile Lab
- Lead Artist / Producer
- Angus Leech
- Mobile Applications Engineer
- Rupinder Deol
- Interaction Designer
- Christopher Quine
- Audio Designer
- Davide Di Saro
- Original Tracklines Concept
- Angus Leech with Greg Judelman
Tracklines logo
- Original Concept
- Davide Di Saro
- Graphic and Animation Design
- Christopher Quine
Geology: A Walk Through Time
- Concept and Script
- Sarah Hoyt and Angus Leech
- Lead Experience Designer / Producer
- Angus Leech
- Graphic, Animation, and Interaction Design
- Christopher Quine
- Audio Design
- Davide Di Saro with Geoffrey Shea
- Engineering / Site Implementation
- Rupinder Deol
- Voice Narration
- Emily Paige, Davide Di Saro, Angus Leech
Banff New Media Institute
- Director and Executive Producer
- Susan Kennard