Trail Sections
The way we fix urban trails needs fixing
My role: Solo Designer/Researcher
Duration: 4 weeks.
Scope: Mobile website prototype
Tools: Figma, Adobe CC, Miro
Deliverables: Prototypes, user flows, research plan & synthesis
Published: 09/10/25
The project
Trail Sections was a 4‑week project that helps people find detours during closures to the Lower Don Valley Trail during accessibility upgrades. The project takes a broken system of municipal documents and turns them into a website that can get you back on track in 3 taps in under 12 seconds.
Hero section of the home screen of the Trail Sections website.
Summary & introduction
The project's context
Problem statement
Trail users feel overwhelmed by disorganized and inconsistent information sources—both online and on‑site—during the closure. Current solutions fail to balance informational value with usability, detracting from the natural experience.
Objectives
Present the information in a highly scannable way
Reduce time on task for finding a detour
Maintain a sense of discovery and exploration for newer trail users.
The solution at a glance
The project resulted in a prototype that aligns navigation to familiar landmarks and major entry points and employs audio directions for inclusive, eyes-free navigation that reduces on-trail screen time.
Data Collection & Analysis
Building a foundation in data
To address the problem, I gathered data on the trail closure from government sources and social media posts to understand the situation. This information was compiled into a report to identify trends and gauge user sentiments. Additionally, I conducted interviews with trail users to understand their needs and how they navigated the closures. Analysis was conducted using Miro and Google Sheets. Miro facilitated open‑ended exploration through a flexible, visual interface. Google Sheets structured the data for visualisation and insight extraction.
An image of the current solution at trail entrances. Note the lack of signage and information regarding detours.
Key takeaways
Lack of usable information at trail‑closure sites led to trail abandonment and detour avoidance. Available information did not match user needs and failed to improve the experience. Users preferred high‑level information over granular status updates. Their main concerns were: “Where can I access the trail?” and “Is it a paved or a nature trail?”
Google Sheets consolidated data to analyze detour impact and identify trends. Insights, such as correlations between bridges, user images, and trail distances, informed data chunking based on user mental models.
Bridging navigation gaps
Initial user testing revealed that bridges were the most recognizable landmarks on the trail, leading to a bridge-focused design for the first version of the navigation system. At first, traditional maps were deemed unnecessary due to the trail's linear nature, with users orienting themselves by proximity to the next bridge. However, subsequent testing showed this approach was insufficient for finding trail entry points and detours. This led to a quick redesign that incorporated traditional map elements, creating a more holistic solution that served users from the moment they began seeking the trail.
Turning insights into outcomes
From scattered sources to usable flows
Research confirmed that closure information was buried across multiple municipal documents, social posts, and maps. Initial prototypes tested a data-visualisation model with charts showing trail conditions and access points. While this approach worked for experienced users on-trail, it failed newcomers who couldn’t locate detours in the first place.
Left: The original OCAD U class prototype helped frequent trail users, but testing revealed gaps: detours were hard to find from a closed entry point, and colour-only communication limited accessibility.
Right: The updated flow started with finding detours first, then guiding users into a map view. Switching to a satellite map with clear labels improved comprehension for new users while removing accessibility barriers. Incorporating Google MDS components sped up prototyping and ensured consistency.
A more holistic solution
When revisiting the first iteration a new approach was taken. Using the insights from this version and revising the flows to start with finding the detour before bring the user to the trail map, and then opting for a satelite image map over the diagram to comunicate the inrformation on trail makeup it allowed for the experience sof new users, as well as removing accessibility issues surrounding the intial version in which color as used to communicate information excludsively.
Roughly 12 seconds to find a detour and get moving again
3 taps instead of 10+ screens across multiple sites
1 site centralising closure info, entry points, and detours
More information on testing and outcomes can be provided upon request.
Design refinements
Better meeting the users’ needs
When familiarity is better than novelty
Initial testing revealed that the first iteration's novel data visualization approach was in fact, less effective in real-world use than a traditional map. Users preferred a general overview of green space between bridges rather than the detailed breakdown provided by the new chart.
The unannotated trail map composited from Google Maps.
The curb‑cut effect in action
Initially an accessibility feature for low/no vision users, audio proved crucial in achieving the project's goal of a screen-free, natural experience. Inspired by Strava and Google Maps audio updates, this feature enhanced functionality, aligning better with the project's objectives.
The playback controls of the audio navigation feature.
Leveraging MDS & AI for speed
Move fast, stay consistent
To deliver a rapid redesign, I customised Google’s Material Design System (MDS) to translate wireframes into a working UI quickly while ensuring edge states and accessibility needs were covered. The result, a pragmatic, map-first interface with audio guidance shipped in days—not weeks—without sacrificing usability or inclusivity.
Tokens, components, and state logic were adapted rather than adapted. This freed time to focus on flows, content clarity, and accessibility.
The prototype
Finding a detour
This video shows the user flow for finding the Bayview Ave detour from the closure at the Riverdale Park Viaduct. It is designed to limit the needed interactions and provide the user with sufficient information as quickly as possible. Considerations to note include:
"Finding a detour" preview animation with an optional skip button
Satellite map view under the "Trail Map" portion of the prototype
Images for quick recall when displaying detours
Transcripts for quick review on the "Audio" screen
Flow shown: Home Page → Find a detour → Bayview Detour → Directions
Accessibility considerations
Baked in, not bolted on
The project focused on accessibility, implementing features like optional audio directions and reduced screen reliance for low-vision users, and non-colour signifiers and clear labels for colour-blind users. Other priorities included scannable copy, WCAG-compliant contrast, and mobility cues. Future plans involve formal usability testing with low-vision participants, screen-reader analysis, and expanded audio cues for better routing and labeling.
Learning and outcomes
By the numbers
12 sec median time‑to‑detour from home to actionable directions (on‑trail pilot tests).
3 taps to reach a usable detour (down from 10+ screens across two sites).
1 site centralising closure info, access points, and detours.
What I delivered
Research synthesis across municipal notices and social posts; 1:1 user interviews.
Information architecture, task/flow diagrams, and an interactive Figma prototype.
Bridge‑based sectioning model aligned to major entry points.
Satellite map UI using customised MDS components; design tokens and UI states.
Audio direction scripts and a basic voice‑guidance prototype.
What I’d do next
Connect to a live closures feed or lightweight CMS for timely updates.
Tag sections on trail map with surface/grade/width to support wheelchair routing and filters.
Localise copy (EN/FR) and expand to additional Toronto ravine corridors.
Run formal usability sessions with low‑vision participants; quantify time‑to‑detour at scale.
Impact & reflection
The solution is implementation-ready with minor adjustments to Toronto’s municipal branding and a simple data pipeline.
Key lesson
Novel visuals can be powerful for insight, but familiar patterns—maps, concise labels, audio—win for speed and inclusion. This project sharpened my ability to pivot quickly, test assumptions, and balance accessibility with real-world usability.
Thanks for reading, let's connect!
info@gregmccarthystudios.com