The default display state with a unified background for the next stop zone.
"NEXT STOP" label appears directly above the stop name with time on the right.
Next Stop
Baldoon Road
Neilson Road
Blackbird Gate
Morningside Ave
Design Improvements
Unified background for next stop zone (no confusion)
"NEXT STOP" label positioned above stop name
Time positioned on right side of label row
Clear visual hierarchy: label → stop name
Next stop at 80px bold 17:1
Upcoming stops differentiated by background color
State 2: Stop Requested
When a passenger requests a stop, the "NEXT STOP" label transforms into "STOP REQUESTED" —
the stop name appears only once, eliminating redundancy. The label change provides clear feedback.
Stop Requested
Baldoon Road
Neilson Road
Blackbird Gate
Morningside Ave
Stop Requested Features
Full zone background changes to TTC Red
"NEXT STOP" label transforms to "STOP REQUESTED"
Label size remains consistent (24px)
Stop name appears only ONCE (no redundancy)
Instant state change (0ms transition)
Remains until bus departs the stop
State 3: High Priority Alert
When a relevant service disruption exists, the route zone transforms into an alert banner.
Only one alert is shown at a time, prioritized by relevance to the journey.
Next Stop
Kennedy Station
Midland Ave
Brimley Road
McCowan Road
Alert Display Features
Amber/gold background replaces route zone
Route info temporarily hidden during alert
Warning icon + text (not color-dependent)
Only one alert shown at a time
Persists until resolved or no longer relevant
All 3 upcoming stops remain visible
State 4: Critical Alert (This Vehicle)
When the current bus route is directly affected (detour, short-turn, express bypass),
the entire route zone becomes an alert banner to ensure passengers don't miss critical information.
Next Stop
Midland Ave
Brimley Road
McCowan Road
Markham Road
Critical Alert Features
Full route zone takeover for maximum visibility
TTC Red background for urgency
"THIS BUS:" prefix makes relevance clear
24px bold white text 5.6:1
Persists until resolved
Actionable information only
State 5: Emergency
For safety-critical emergencies, the entire display is taken over with a clear,
unmissable message. This state supersedes all other content.
EMERGENCY
Please exit at next stop
Baldoon Road
Emergency Display Features
Full screen takeover
Center-aligned for maximum visibility
Simple, clear instruction
"EMERGENCY" at 56px bold
Action message at 40px
Stop name at 56px bold for orientation
State 6: With Advertisement (Optional)
If advertisements must be included, they are limited to a 15% bottom strip that only displays
when no alerts are active and not during stop announcements. Static images only, no animation.
Next Stop
Rosewood Crescent
Cedar Lane
Maple Drive
Oak Street
Advertisement Constraints (Per Report)
Maximum 15% of screen, bottom strip only
Static image only — no animation, no video
Only when no alerts active
Not during stop announcements
Lower contrast than transit information
Clearly labeled as "Ad"
State 7: With Estimated Time to Destination
Shows the estimated time to reach the final destination, providing useful journey information
for passengers unfamiliar with the route. Simple and actionable.
Next Stop
Kennedy Station
Midland Ave
Brimley Road
McCowan Road
Enhanced UX Features
Shows estimated time to final destination
Simple, actionable information
Useful for unfamiliar routes
Clock icon for quick recognition
"~" prefix indicates estimate
Non-essential — gracefully degrades
State 8: Long Stop Names
Demonstrates how the display handles lengthy stop names. Font size automatically adjusts
to fit within the available space while maintaining readability.
Next Stop
Scarborough Town Centre Station
Progress Ave at Centennial College
Ellesmere Rd at Military Trail
University of Toronto Scarborough
Long Name Handling
Next stop: reduced to 60px to fit longer names
Upcoming stops: reduced to 32px for multi-word names
Route name: truncated with ellipsis if too long
No horizontal scrolling or marquee effects
Names should be abbreviated in source data if needed
Minimum 48px for next stop per WCAG guidelines
State 9: Transition Animation (State 1 → State 2)
Accessible animated transition from Normal Operation to Stop Requested state.
Click the button to trigger the transition. Respects prefers-reduced-motion.
Next StopStop Requested
Baldoon Road
Neilson Road
Morningside Avenue
Scarborough Centre
Accessibility Guidelines for Transitions (WCAG 2.3.3)
Duration: 300ms — fast enough to feel responsive, not jarring