Re-Designing wayfinding on TTC buses in a 4 day design sprint
The TTC installed LCD screens to replace their dot-matrix displays in 2018. The purpose of these displays were to notify the rider of the upcoming stop, and if a stop has been requested. This was an excellent idea by the TTC, as it has potential to improve the wayfinding for its customers while on the bus.
Role
User Research, Experience Design, Interface Design
Tools Used
Figma
Timeline
4 Days
(Existing Screen)
Problem
There was a lot of screen real
estate that could be taken advantage of on the current LCD Screens. This is what led me to conduct a 4 day design sprint to explore this problem and a potential solution to it.
Understanding the Issue
PACT Analysis
To reflect on the kind of users I would interview and attempt to understand them better, I conducted a PACT analysis, highlighting people, activities, content, and technologies.
P
People
People who don’t have cellular data won’t have access to directions easily
People who are new to the city
People who aren’t from Toronto
A
Activities
The main activity this device will deliver is to direct passengers to their destination and notify them if a stop is requested
C
Content
The device will be viewed by every passenger on the bus in both the front and the back
When the user requests a stop it will be displayed on the device for all passengers to see
T
Technology
Output: LCD Screen w/speakers
Screen Size: 27 inches
Communication: Occurs during the passengers ride
Content: Upcoming stop, stop requested
User Interviews
I conducted brief interviews to understand how people currently use the TTC. I asked them about their experience from before they get on the bus to after they get off and what they feel is missing or could be improved. Below are some key quotes from my interviews.
User 1
“Because I don't have data, I will usually prepare ahead and attempt to memorize where the stop is, as well as the stop prior to, so I know where to get off in advance.”
User 2
“When I’m on my way to work, I stare at the LCD screen so I don’t miss my stop.”
User 3
“A real-time GPS or Map on the main screen would be helpful as it can provide an idea of where you are without the need of opening your phone”
Persona
After reviewing the information from my user interviews, I combined the collective identities and ideas into one persona to refer to with my design solution.
![]()
MoSCoW Method
To determine the scope of my project, I drafted a MoSCow list to identify what were the essential components this project needed to have to be considered successful.
MUST HAVE
Information on the next stop
Information that a stop has been requested
Displaying multiple pieces of information at the same time
Information on the next stop
Information that a stop has been requested
Displaying multiple pieces of information at the same time
SHOULD HAVE
Information on the upcoming stop beyond the next stop
Information on service delays on the route
Identifying bus routes you pass
Information on the upcoming stop beyond the next stop
Information on service delays on the route
Identifying bus routes you pass
COULD HAVE
Mobile app fare integration to send you GPS data to your phone for your current route
Information on service delays on the bus routes you pass
Mobile app fare integration to send you GPS data to your phone for your current route
Information on service delays on the bus routes you pass
WON’T HAVE
Information regarding subways and LRT’s
Information regarding subways and LRT’s
Design Challenge
To create a passenger information screen that effectively communicates the TTC bus service.
Journey Map
Before I went and sketched out low-fidelity wireframes, I wanted to identify and understand the typical flow of a passenger using public transit buses. Below is a journey map of the experience.
![]()
Sketches
My first step in the design was to brainstorm possible layouts for the new screen by sketching them on a pen and paper. I borrowed elements from existing transit wayfinding solutions, from the subways, to GO Buses, to the GO Train service maps.
Mid-Fidelity Prototypes
For my mid-fidelity prototypes, I wanted to highlight the functionality of the screen’s features by highlighting each element on the display.
To demonstrate the feature of showing upcoming stops beyond the immediate one, I designed a service map that would update during the buses journey. The Style 2 drew elements from the existing screen and kept the Next Stop display to notify the passenger of the immediate upcoming stop.
Service delays were reserved to the right side of the screen, updating during the journey to reflect the upcoming stops.
Requesting a stop has now become its own partition on the screen rather than utilizing the same space as the Next Stop display, like the current TTC screens do.
To demonstrate the feature of showing upcoming stops beyond the immediate one, I designed a service map that would update during the buses journey. The Style 2 drew elements from the existing screen and kept the Next Stop display to notify the passenger of the immediate upcoming stop.
Service delays were reserved to the right side of the screen, updating during the journey to reflect the upcoming stops.
Requesting a stop has now become its own partition on the screen rather than utilizing the same space as the Next Stop display, like the current TTC screens do.
Focus Group
To get a grasp on the efficacy of these new screens, I sent the prototypes to a few participants willing to help me test them out. They gave me essential feedback that helped me narrow down my design decisions to create a prototype that would serve the passengers of the bus better. Below are a few quotes from my participants.
I think its really important to keep it minimal, to be seen even from the end of the bus.
I feel the first one has way too much information on it
You should consider removing the delays notifications, it feels hard to read and you’re squishing too much
Yeah I like the TTC logo being static, but then the service delays become too small
Revisions
The biggest issue that was raised in my focus group was that the Service Delays section was taking up too much space on the screen and was using a font that was too small to be read from varying distances on the bus. To eliminate that issue, as well as coming to the realization that there are times where delays aren’t present, I decided to incorporate the service delays into the same section as the Welcome Message.
In the event of a service delay, the section will alternate between showing the logo and showing the upcoming service delays.
In the event of a service delay, the section will alternate between showing the logo and showing the upcoming service delays.
Inspiration
To get an idea of the visual style I wanted to execute in the high-fidelity prototype, I took a look at how other designers showed wayfinding, both digitally and physically. Below is a few of the images that I found on Behance that helped me pick a visual direction.
High-Fidelity Prototype
For my final prototype, I went back to my focus group results which mentioned an overload of information. I tried to reduce as much visual clutter as possible by retaining the most key elements on the screen. This led to me to contain the Stop Request feature in the Next Stop bar, making it be illuminated red whenever a stop is requested.
Key Takeaways
As passionate as I was to this topic, at the end of the day, its meant
to service much more than just me. Getting the insight from prospective
users/passengers allowed me to understand what common issues
are currently in place with how they use buses, and what could be done
better. People really are the most valuable resource.
to service much more than just me. Getting the insight from prospective
users/passengers allowed me to understand what common issues
are currently in place with how they use buses, and what could be done
better. People really are the most valuable resource.