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 operations console and multimodal eco-routing engine designed to manage peak arrival traffic across 16 tournament host cities.
Match-day command center
A simulated operations console modeled on a peak Toronto match window (Match 14 at BMO Field). When security gate queues swing from 6 to 30 minutes and arterial roads back up, operators and fans need clear, synchronized information. The platform pairs live network telemetry with an eco-routing engine that evaluates public transit and shared micro-mobility directly against driving.
−47%
Time saved
Door-to-gate travel time
Multimodal green routing (transit + walking + last-mile scooter) bypassed Gardiner Expressway congestion, reducing peak travel time from 45 to 24 minutes.
45 min
→
24 min
−81%
Cost reduced
Trip expense vs driving
Standard regional transit fare plus shared micro-mobility totaled $3.50, compared to $18.00 for stadium parking and fuel. Costs surface up front during route comparison.
$18.00
→
$3.50
1.8 kg
CO₂e avoided
Avoided per converted car trip
Modeled per-trip delta between solo driving and multimodal transit, calculated using standard transit and micro-mobility emission factors across the match-day cohort.
+4.2 kg
→
+2.4 kg
Overview
Role
Lead product designer covering UX research, design systems, UI design, and web prototyping.
Tools
Figma, design token systems, SVG data visualization, HTML/CSS web prototyping, GitHub Pages
Scope
Simulated match-day ops console and multimodal eco-route planner for 16 host cities
EcoMove 2026 is a mobility management platform designed for FIFA World Cup 2026 host cities. It connects real-time transit telemetry with an eco-aware route planner to help operators manage crowd surges and help fans choose lower-carbon travel options. Built and tested as a live web prototype using Match 14 at BMO Field (Toronto) as the primary scenario, with planning frameworks cross-checked against MetLife Stadium and Lumen Field.
Project Visuals
Ten screens and design artifacts from the EcoMove 2026 build: the match-day operations console, live transit network map, multimodal route comparisons, digital ticketing pass, and design system tokens.
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
A simulated match-day flow from security gate monitoring to multimodal routing and digital ticketing. Times shown are scenario parameters for the Match 14 BMO Field window.
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)
Select an entry gate to inspect modeled security queue delays across the match clock.
Problem
Mega-events funnel tens of thousands of attendees onto identical transport corridors simultaneously. Station platforms crowd, arterial highways back up, and stadium security queues fluctuate rapidly between quiet hours and kickoff windows. Traditional municipal transport tools rely on static schedule tables that cannot guide fans through real-time operational shifts.
In the Toronto BMO Field scenario (Match 14), gate queues shift from 6 minutes during early arrival to 14 minutes mid-afternoon and 17 to 30 minutes in peak pre-match windows. Congestion along the Gardiner Expressway inflates solo driving trips to 45 minutes, $18 in costs, and +4.2 kg CO₂e per attendee. A single-occupancy vehicle emits roughly 171 g CO₂ per fan-km on this corridor, compared to 41 g for express shuttles, 28 g for regional rail, and 0 g for micromobility. Cities have baseline transport data, but lack an integrated interface to actively balance traffic across green modes during peak loads.
Action
Design system architecture
Established 7 semantic color tokens, 3 typography families (Plus Jakarta Sans for display, Inter for UI, JetBrains Mono for telemetry), and 100% token coverage across both screens. Tokenizing spacing (4–32px scale), corner radiuses (8/12/18px), and animation timings allowed assembling subsequent screens quickly while maintaining strict visual consistency.
Match-day operations console
Designed a real-time command dashboard featuring core telemetry tiles, an SVG road network heatmap with corridor state indicators, live security gate queue monitors (CLEAR, MODERATE, HEAVY), and toggleable transit layers. A live network feed logs headways, shuttle dispatches, and hub inventory so operators can make tactical adjustments in real time.
Multimodal route planner
Created an eco-first route comparison interface comparing transit options against a driving baseline on travel duration, carbon emissions, and total fare. Built around full transparency: the lowest-carbon route displays positive net emissions (+2.4 kg CO₂e) and explicitly states avoided emissions (1.8 kg avoided vs driving) rather than claiming zero-carbon transit.
Interactive prototype build
Translated Figma specifications into framework-free, accessible HTML/CSS/JS deployed to GitHub Pages. Structured the codebase with modular files sharing unified tokens and simulated data hooks, enabling straightforward replacement with production GTFS-Realtime APIs.
Result
- −47% door-to-gate travel time compared to driving (45 min down to 24 min)
- −81% per-attendee trip cost ($18.00 down to $3.50)
- 1.8 kg CO₂e avoided per converted car trip (+4.2 kg down to +2.4 kg)
- Modeled match-day cohort impact: ~1.2 t CO₂e avoided and ~$9.4K traveler savings under the mode-shift scenario
- Shipped two full product surfaces with a design token system as a live, dependency-free prototype
- Validated scenario assumptions against Toronto BMO Field data and verified transferability to 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 attendee | +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 |
What's next
Integration with live GTFS-Realtime feeds, predictive egress modeling for post-match surges, accessible routing pathways for mobility-impaired passengers, and progressive web app (PWA) wallet integration for unified multi-operator digital passes.