Pixels in Motion:

Rethinking Real-Time Bus Displays

The Impact

Redesigned Hong Kong Citybus's in-bus screens in 3 weeks with no user testing — delivering two route-adaptive prototypes (urban commuter + airport/tourist), two brand-aligned accessibility-tested color systems, and a flexible template for future routes.

My Role
Freelance UI/UX Designer (Collaborating with Industrial & Software Engineers)

My Role
Hanover (UK) – Hong Kong Team

Timeline
3 weeks (February–March 2025)

Constraints
No user testing · Fixed 1920×540 landscape screens · Conflicting passenger and business priorities

The Objective

Modernize the in-bus screen interface, improve passenger engagement, and enhance real-time travel information — while staying on-brand. The screens had to serve daily commuters, tourists, and operators simultaneously, within rigid hardware and timeline limits.

Project Goals

  • Improve readability and engagement with a modern, clean UI

  • Maximize space for valuable additional info (transfers, fares, tourism, flight times)

  • Maintain essential real-time data (current stop, next stops, ETA)

  • Introduce new features: QR codes for mobile access, CCTV baggage-area footage, tourism highlights

The Challenge

Hong Kong Citybus needed a modern, functional redesign of their internal bus screens, but with three hard constraints:

  • No user testing — 3-week deadline

  • Fixed 1920×540 landscape screens — no flexibility on specs

  • Conflicting priorities — passengers needed clarity; the business needed ad space and tourism promotion

My role was to design a system that worked for both, without compromising usability.

What I Did?

1. Aligned rapidly with stakeholders.
With no time for research, I audited existing screens to identify pain points (cluttered transfer info, missed stops), collaborated with industrial engineers to ensure the design fit hardware limits, and pitched two color variations — brand-compliant but optimized for readability.

2. Designed for real-world use cases across three audiences.

  • Local commuters — transfer details, fare prices

  • Tourists — attractions, airport information

  • Drivers and operators — CCTV, real-time updates

3. Pushed for high-value additions within constraints.

  • QR codes as a safety net for missed information — for passengers who prefer their own device, or who cannot read the screen

  • Dynamic ad spaces that never obscure critical alerts — ads recede when more important information is prioritized

  • Glanceable icons for tourists (luggage rules, attractions)

4. Designed a system, not a single screen.
Two route prototypes show how the same system adapts:

  • High-frequency urban routes — information-dense, fast updates

  • Airport/tourist routes — leisure-focused, multilingual

Existing internal screen on Citybus

Reimagined design

The Results

In 3 weeks, I delivered:

  • 2 fully functional prototypes (commuter + airport routes)

  • 2 brand-aligned color systems, tested for accessibility and readability

  • A flexible template for future routes

Reflection

This project was a study in designing without the usual safety nets. No user testing, a fixed 3-week window, non-negotiable hardware specs, and stakeholders with genuinely opposing goals — passenger clarity versus ad revenue and tourism promotion. The work wasn't to argue those priorities away, but to design a hierarchy where they could coexist.

The QR code and the dynamic ad behavior are the two decisions I'd point to. Both came from accepting the constraint instead of fighting it: if you can't guarantee a passenger will see the screen in time, give them a way to retrieve the information later. If the business needs ad space, design it to yield to safety-critical information rather than compete with it. That's the trade-off work — not the visual design.

It also confirmed something about how I work best: fast, constraint-driven, and cross-functional. Coordinating with industrial and software engineers on fixed hardware forced decisions early and kept the design honest.