No Road Block

UX, brand & build · Case study

No Road Block, a community-reported trail-status site. Self-initiated; live since 07/09/26.

Live status for closures on Toronto's Lower Don Trail.

01 The brief

Simply shut out.

Stretches of Toronto's Lower Don Trail were fenced off for construction, with no useful information provided for over 3 years. The notices online did not reflect reality and the signs on site said less. People stand at a barricade, guess, and turn back.

No Road Block began as a four-week research sprint into how people navigate those closures. The findings became a tested prototype, then a five-day build that shipped as a live product: a community-reported status site with its own identity, map theme and print system.

Project
No Road Block (Self-initiated)
Role
Solo: research, UX, prototyping, brand, front-end, backend, print
Duration
Four-week research sprint; five-day production build
Delivered
noroadblock.com, brand identity, map theme, QR sticker system, Figma prototype, research synthesis
Stack
HTML, CSS and JavaScript
Live
07/09/26
Published
09/09/26
4 Weeks of research: municipal notices, social posts, interviews on the trail.
5 Days from validated concept to a shipped site: brand, map, backend, print.
5 Access points, each with its own sticker and its own live status page.

Scan at the gate. See the trail. A sticker at every access point links to that spot's live status. No app, no account.

02 The research

At the fence, one question: can I get through?

Four weeks of municipal notices, social posts and interviews on the trail. What people wanted was a plain answer, whether they could get on and whether it was paved, and they wanted it where they were standing, not at home planning a route. Everything the product does traces back to that.

People think in bridges, not section names.

It was the lack of usable information at the closure itself that sent people home. And they orient by bridges, in stretches of trail between access points rather than the city's section names. That became the product's information architecture.

A fenced-off section of the Lower Don Trail: a red Trail Closed Ahead sign, a Danger notice, a construction poster covered in graffiti, an abandoned shopping cart in the weeds

The problem, as it still looks: a closed section of the Lower Don. Danger, closed ahead, a notice nobody reads. Nothing about where to go.

03 The prototype

Find the detour first. Then show the map.

The first prototype opened on a data visualisation, a tile for every stretch of trail. Frequent users could read it; newcomers couldn't find a detour at all. So the flow was rebuilt to start from the closed gate and end at directions, and the tiles gave way to a real map with the bridges people orient by. Familiar beat novel.

  1. Home
  2. Find a detour
  3. Bayview detour
  4. Directions
Three prototype screens side by side: the Trail Sections home reading Broken things need fixing, the Your Detours card for Bayview Avenue at the Via Rail bridge, and the Bayview detour path preview on a map

The validated flow in three screens: a detour-first home, the closest access point with its detour card, the Bayview path preview. Click to enlarge.

From a closed gate to a detour in twelve seconds. Measured in usability testing of the Figma prototype. Small sessions, directional numbers; the product's own came later.

04 Prototype to product

Closure information was difficult to find.

The prototype rested on an assumption: that timely closure data would exist to feed it. It doesn't. Municipal notices lag reality by days; conditions on the trail change by the hour.

The research already held the answer. The question at a barricade, can I get through, is one the people already on the trail answer better than any document. So the product inverts the model: walkers report what they see, clear, on foot only or blocked, and the majority of the last 24 hours becomes the status the next walker sees.

  1. Scan at the barrier
  2. See the live status
  3. Report in one tap
  4. The next walker knows

The broken signage became the distribution channel.

Stickers at the five access points link straight to that spot's status page, each headed with the question a walker is already asking there. Straight black on weatherproof vinyl: in full sun, scan contrast beats brand purity.

Production sticker artwork asking Can I use the trail at Pottery Road? with a black dotted QR code, the URL www.noroadblock.com and the hazard badge

The production sticker for Pottery Road. Each access point gets its own question; the hazard badge signs off. Click to enlarge.

A No Road Block sticker asking Am I stuck down here at Riverdale? on a yellow bollard beside a wooden pole
A No Road Block sticker on a trail wayfinding pillar listing Pottery Road 200 m, Riverdale 3 km and Queen Street 4 km

In the field, 07/14/26. The Riverdale question on a bollard at the foot of the stairs; the Pottery Road sticker riding the city's own wayfinding pillar.

One tap, and the next walker knows. No account, no app, no free text to moderate. Reports are anonymous and rate-limited; the majority of the last 24 hours wins.

05 The brand

Borrowed from the barricade.

The identity was drawn inside the same five days as the product, playfully reworking temporary road signage. Organi letterforms dotted with the circles reminiencent of bolt holes on a roadside sign or the dots on the map.

One base, and one compliment. Brand blue works across, wordmark, trail, codes, map linework, over off-white.

The hazard badge — the identity reduced to a sign face and its exclamation. It anchors the lockup and works alone at small sizes.
Stacked wordmark — the signature on phone screens, as it appears on the live home page.
Horizontal lockup — for wide surfaces, the badges bracketing the name. The cover makes the same stack-to-lockup swap as the live site.

The hazard badge, the stacked wordmark and the horizontal lockup. Bolt holes in every letter.

Set in Pilowlava.

The letters began as Pilowlava Atome, an open-source typeface from Velvetyne. An open face for a service built on free, community-reported information; the holes were already in it. The wordmark was then redrawn by hand as outlines.

Stop scrolling. Get outside.

Pilowlava Atome

Stop Scrolling. Get outside.

Pilowlava Regular

ABCDEFGHIJKLMNOPQRST
UVWXYZ 0123456789
ÀÁÂÃÄÅĀĂĄǍÆ ÇĆĊČ ĎĐÐ
ÈÉÊËĒĖĘĚ ĞĠĢ Ħ ÌÍÎÏĪİ
ĶĹĽŁ ÑŃŅŇŊ ÒÓÔÕÖØŌŐŒ
ŔŖŘ ŚŞŠȘ ŢŤŦȚÞ ß ŹŻŽ
ÙÚÛÜŪŮŰŲ ŴẀẂẄ ÝŶŸỲÿ
АБВГЃҐДЂЕЀЁЄЖ
ЗЅИЍІЇЙЈКЌЛЉМ
НЊОПРСТЋУЎФХЦ
ЧЏШЩЪЫЬЭЮЯ цшщ
.,:;!¡?¿… ‘’‚“”„ '" •·
()[]{} «»‹› –— - _ /\
@#%&* = ^ $£€ № °º

Pilowlava, by Anton Moglia and Jérémy Landes, with Maksym Kobuzan; Velvetyne Type Foundry, 2019, SIL Open Font License. Caps only, holes included.

The live No Road Block home screen: the stacked wordmark in white on brand blue, the tagline Live status for closures on the Lower Don Trail, a View map button and the Reports and Map tabs

The live home screen: the stacked wordmark, the tagline, the two tabs. The whole site in one ink.

06 The map

Drawn like a screenprint, built for one bar of signal.

The map is the product, so it got its own theme: the base map stripped back to what matters on foot, river, parkway, green space, trail, drawn in halftone screens at device pixels. Statuses are carried by label and icon as well as colour, and both themes follow the phone's setting.

The valley is a connectivity dead zone, so the engineering choices were design choices. The site is static, tiny and framework-free, with self-hosted tiles, a pre-rendered map when tiles can't load, and the phone's last-cached statuses when the API can't be reached.

The same map in night ink.

The live map around Pottery Road in the light theme: halftone greens on a paper ground, the trail in status green The same map view in the dark theme: night ink, black water, lit windows in the buildings Light Dark

Drag the handle. One tokens file paints both: the halftone greens go deep, the river turns to black water, the buildings become lit windows.

The glitch, promoted.

A smooth zoom smeared the halftones into moiré on every gesture. Instead of hiding the seam, every zoom pixelates the frame into a coarse mosaic, the map re-renders underneath while nothing legible is on screen, and the new view reassembles out of the pixels.

Zoom in, zoom out, pull back to the whole trail: the rendering seam is the transition, not something to hide.

07 Outcome

The first report came eight minutes after the stickers went up.

Most case studies end at the prototype. This one shipped, and the research held: high-level statuses over detail, answers at the gate, familiar patterns over novel ones. The biggest product decision, flipping from municipal data to community reports, came straight from a research insight.

Next: tag stretches with surface, grade and width for wheelchair routing; French copy; more of Toronto's ravine corridors; usability sessions with low-vision participants on the live site.

12 Seconds, median, from the home screen to a detour in prototype testing.
3 Taps to a usable detour in the prototype. One tap to report a status on the live site.
1 Site for closures, access points and detours, in place of two municipal ones.

What I'd carry forward.

  1. Ship the smallest thing that solves the researched problem. Audio guidance tested well and stayed out; navigation belongs to the tools people already carry.
  2. Treat constraints as design inputs. One bar of signal shaped the architecture; a rendering glitch became the signature.
  3. Let the research pick the data model. The walkers were the feed all along.
  4. Print is product. The sticker is the first screen.

Research, design, build and print — Greg McCarthy. Map data © OpenStreetMap contributors.

Check before you walk.