Eco Route — Recommended
Transit 6 + walk 3 + e-scooter 3 (last mile) · transfers: 1
24MIN
🌿 Lowest FootprintSelected ✓
EcoMove 2026 — FIFA World Cup Host-City Mobility
A simulated match-day dashboard and eco route planner that turns peak arrival chaos into faster, cheaper, lower-carbon decisions.
The command center
A simulated match-day operations console built around a single Toronto match window: gate queues swing from 6-min CLEAR to 30-min HEAVY, traffic on the Gardiner spikes, and 24,318 fans need a single, honest answer. Two screens, one source of truth — KPIs that match the scenario assumptions, a glowing traffic map with labeled road states, and a route planner that puts the eco option first and the car beside it, not below it.
−47%
Time saved
Door-to-gate time
Eco multimodal beat the car across every step of the door-to-gate chain — switching to transit 6 + walk 3 + scooter 3 bypassed the Gardiner congestion layer entirely. Verified against the simulated congestion map.
45 min
→
24 min
−81%
Cost reduced
Trip cost vs driving
PRESTO-fare transit + shared scooter undercuts $18 parking + fuel for a solo fan. The route planner surfaces fare up front so cost is part of the decision, not a surprise at the gate.
$18.00
→
$3.50
1.8 kg
CO₂e avoided
Avoided per converted car trip
Per-trip delta between solo driving and the eco multimodal stack. Modeled with standard transit / micro-mobility emission factors and rolled up to 3.42 t across the simulated match-day cohort.
+4.2 kg
→
+2.4 kg
Overview
Role
Solo product designer covering research, design system, UX/UI, and the design-directed prototype build.
Tools
Figma · AI-assisted HTML/CSS implementation (design & prototyping human-led) · SVG data visualization · GitHub Pages
Scope
Simulated match-day ops dashboard + eco route planner for 16 host cities
EcoMove 2026 is a mobility-readiness platform for FIFA World Cup 2026 host cities: a simulated operations dashboard plus an eco route planner that turn static transit data into decisions fans and operators can act on. Designed end-to-end and shipped as a live prototype, from tokens to GitHub Pages. Toronto and BMO Field are the demonstration case (Match 14), and the method was checked at planning level against two US venues, MetLife and Lumen Field, to make sure it transfers.
Project Visuals
Ten frames from the EcoMove 2026 prototype — the match-day command dashboard, live network map, eco route planner, transit pass and the design system behind it. Swipe or use the arrows to walk through the build.
01 · COMMANDDASHBOARD
EcoMove 2026FIFA Mobility OS
LIVE · Match 14 · Group Stage
⚠ SIMULATED FEED
LOCAL --:--:--
Toronto // Live Match-Day Operations
Toronto — Match-Day Mobility Command
Real-time congestion around BMO Field and the city's eco-transport response. Simulated match-day data refreshes every 5 seconds.
02 · TELEMETRYUPDATED 4S AGO
CO₂ Saved Today 🌱
3.42 t
▲ +12.4% vs Match 12 vs all-car baseline
modeled · upper-bound case
Transit Adoption 🚌
68%
of fans on green modes
scenario assumption
Active Eco-Fans ⚡
24,318
modeled
Congestion Index 🚦
7.2 /10
Heavy near Gate C
modeled
03 · NETWORKSYNCED 4S
Congestion 7.2 · synced 4s
Heavy
Moderate
Clear
Transit
Shuttle
Bikes
Fan zone
04 · IMPACTTODAY
Sustainability Impact
TODAY
g CO₂ / fan-km →CAR 171gSHUTTLE 41gTRANSIT 28gBIKE 0g
Simulated Network Feed
● streaming- 19:42🚇
Line 1 headway shortened to 3 min 30 s
- 19:38🚌
ES-4 shuttle dispatched from City Hall hub
- 19:33🌱
+412 fans redeemed the Green Transit Pass
- 19:29⚠️
Gardiner Expy delay growing near Gate C
- 19:24🚲
Fleet St dock restocked — 19 e-scooters added
05 · ECO-ROUTE PLANNERMATCH DAY
Trip Setup
MATCH DAY · JUN 1806 · WHY GO GREEN?THIS FIXTURE
Why go green?
THIS FIXTURE🚗 One car trip to the stadium ≈ +4.2 kg CO₂ + parking risk.
🚇 The eco-route avoids 1.8 kg CO₂e vs driving per fan (modeled).
🎟️ Green-mode fans earn 2× Fan Points redeemable at fan zones.
07 · ROUTING3 OPTIONS
Fast Express Shuttle
Dedicated match-day bus ES-4 · non-stop
20MIN
⚡ Fastest Green OptionView details →
Standard Drive / Rideshare
Via Gardiner Expy · includes parking queue
45MIN
⚠️ High Delay RiskView details →
08 · STADIUMROUTE DETAILS
Transit + Walk + E-Scooter
🌿 Lowest Footprint-
Walk to transit stop3 min · 300 m · step-free
-
Transit (GO rail / streetcar)6 min · nearest regional stop
-
E-scooter — last mile3 min · ~1.2 km stop→gate
-
Arrive at Gate BSecurity wait ≈ 4 min
- Total duration24 min
- Fare$3.50
- CO₂ impact+2.4 kg CO₂e · 1.8 avoided vs driving
- Depart by18:00 · Kickoff 19:30
- Crowd forecastLow
Digital Fan Pass
One QR for transit + shuttle + docks. Scan at any gate.
Times include security gate wait at the selected match-clock state. Eco fare = bundled illustrative fare. The shuttle is faster but costs ~43% more and avoids 0.7 kg less CO₂e. Timeline is illustrative; segment durations are scenario parameters, not timetable values.
09 · COMPONENT LIBRARYALL STATES
Buttons
Status chips & badges
Clear
Moderate
Heavy
🌿 Lowest Footprint
⚡ Fastest Green
LIVE
Toggle switch
Input · search
Stat tile
CO₂ Saved
3.42 t
▲ +12.4%
10 · DESIGN SYSTEM v1.0HANDOFF
Move fans green.
DISPLAY / HERO — PLUS JAKARTA SANS · 800
44px · LH 1.1 · LS −0.03em
44px · LH 1.1 · LS −0.03em
Get to the match, minus the footprint.
H2 / SECTION — PLUS JAKARTA SANS · 600
24px · LH 1.25 · LS −0.01em
24px · LH 1.25 · LS −0.01em
Fast Express Shuttle
H3 / CARD — PLUS JAKARTA SANS · 700
16px · LH 1.3
16px · LH 1.3
Real-time congestion around BMO Field and the city's eco-transport response.
BODY / UI — INTER · 400/500
13–13.5px · LH 1.55
13–13.5px · LH 1.55
3.42 t ▲
DATA / KPI VALUE — JETBRAINS MONO · 700
22–32px · tabular numerals
22–32px · tabular numerals
LIVE METRICS · UPDATED 4S AGO
LABEL / KICKER — JETBRAINS MONO · 600
10–11px · LS 0.2em · uppercase
10–11px · LS 0.2em · uppercase
:root {
/* color */
--bg: #0B0E14; --surface: #101624; --line: rgba(148,163,184,.14);
--eco: #10B981; --transit: #06B6D4; --ai: #8B5CF6;
--heavy: #EF4444; --moderate: #F59E0B; --ink: #E8EDF6; --muted: #8B96AB;
/* radius · shadow */
--r-s: 8px; --r-m: 12px; --r-l: 18px; --sh: 0 12px 34px rgba(2,6,16,.5);
}
01 / 10
How It Works
Watch the simulated match-day flow — from gate congestion to green navigation in three steps. Times below are scenario parameters for the Match 14 BMO Field window, not timetable values.
1 · Select Gate
2 · Compare Routes
3 · Eco Choice
Gate A 4 min (Clear)
Gate B 9 min (Moderate)
Gate C 17 min (Heavy)
Gate D 6 min (Clear)
Choose your entry gate — simulated security waits shown across match clock.
Problem
Mega-events push millions of fans onto the same routes at the same hour. Stations pack, arterials clog, and security queues swing from a 6-min CLEAR to a 30-min HEAVY within minutes, while cities sit on static baseline data that fans can't act on in the moment.
In my Match 14 scenario (BMO Field, Toronto), gate queues shift with the match clock: 6-min CLEAR in quiet hours, 14-min MODERATE mid-afternoon, and 17 to 30-min HEAVY as kickoff approaches. The Gardiner Expy gets heavily congested, and the default car trip costs a fan 45 minutes, $18, and +4.2 kg CO₂e. A private car emits about 171 g CO₂ per fan-km on this corridor — versus 41 g for the express shuttle, 28 g for transit, and 0 g for bikes and scooters. The mode split on a typical match day lands around 32% private car, 34% transit, 18% e-shuttle, 12% bike or scooter, 4% walking. Cities have the baseline data; they don't have an actionable, in-the-moment decision surface.
Action
Design system first
7 semantic color tokens, 3 type families (Plus Jakarta Sans for headings, Inter for body, JetBrains Mono for live data), and 100% token coverage across both screens. With the system in place, the second screen was assembly instead of redesign, so nothing drifted visually at hackathon speed. Spacing, radius and motion are all token-driven (4 to 32px scale, 8/12/18 radius, micro 150ms to ambient 2.6–12s loop), and every component ships with default, hover, selected, and disabled states documented.
Match-day dashboard
Simulated KPIs (3.42 t CO₂ saved as the upper-bound case, 68% transit adoption as a scenario assumption, 24,318 active fans, 7.2/10 congestion index, each labeled modeled on its tile), a glowing SVG traffic map with labeled road states ("GARDINER EXPY · HEAVY", "DUFFERIN · SLOW", "KING ST · FLOWING"), gate-level security waits that update across CLEAR / MODERATE / HEAVY (HEAVY at 17 min and above), and toggleable layers (transit lines, shuttle routes, micro-mobility, fan zones, traffic heatmap). Designed to stay useful at both ends of the match day: a quiet afternoon, and the peak window when every gate goes HEAVY. A live simulated network feed streams events — headway updates, shuttle dispatches, dock restocks, parking capacity warnings — so the operator can react in seconds, not hours.
Honest route planner
3 options compared on time, CO₂e and cost, with the car included and never hidden, plus a multimodal timeline (transit 6, walk 3, scooter 3, an illustrative 12-min pre-gate sequence) and a QR Digital Fan Pass. No negative-carbon claims anywhere: the eco route shows +2.4 kg CO₂e and 1.8 kg avoided vs driving. Trip setup accepts origin, destination and arrival time; the eco-routing engine surfaces the lowest-footprint option first, with the fastest green option beside it, and the drive baseline always visible. Each card shows a timeline of segments, a fare total, a CO₂ figure, and the step-by-step leg with icons (walk, metro, e-scooter, shuttle, car, gate). The user can start navigation or add the Fan Pass to wallet with one tap.
Design-directed build
I used AI as a coding partner to translate my Figma frames into dependency-free HTML/CSS. I wrote the specs, tokens and correction checklists, and every iteration had to match the design pixel-for-pixel. Shipped live on GitHub Pages during the hackathon, running on a simulated data layer with the backend endpoints documented for replacement. The codebase is three files (dashboard, planner, design system) sharing one stylesheet, one script, and one set of design tokens, so a future engineer can swap the simulated data layer for real APIs without touching the UI layer.
Result
- −47% door-to-gate time vs driving (45 to 24 min)
- −81% trip cost per fan ($18 to $3.50)
- 1.8 kg CO₂e avoided per converted car trip (+4.2 to +2.4 kg), no negative emissions claimed
- Modeled match-day impact: about 1.2 t CO₂e avoided and about $9.4K traveler savings under the mode-shift scenario; 3.42 t dashboard KPI as the upper-bound case; 68% transit adoption as a scenario assumption
- Designed two full screens with a complete design system and shipped a live, framework-free pure HTML/CSS prototype during the hackathon
- Kept one source of truth across Figma, prototype and write-up: sourced vs illustrative data split documented, and the method checked at planning level against MetLife and Lumen Field
| Metric | Car Baseline | Eco Route | Impact |
|---|---|---|---|
| Door-to-gate time | 45 min | 24 min | −47% |
| Trip cost | $18.00 | $3.50 | −81% |
| CO₂e per fan | +4.2 kg CO₂e | +2.4 kg CO₂e | 1.8 kg avoided |
| Match-day scale | Baseline (72% car) | 38% car share (646 converted) | ~1.2 t avoided · $9.4K saved (3.42 t upper-bound) |
What's next
Real-time GTFS-Realtime feeds and a proper transferability pass across the 11 US host cities, with a pilot in Seattle or New York/NJ. Predictive bottleneck modeling so operators act before the crowd builds, post-match egress modeling, accessibility-aware routing and non-scooter alternatives, and a mobile PWA with a wallet-based Fan Pass, built to outlive the tournament as lasting urban infrastructure.