TTC.ca Redesign

Overview

Background

The Toronto Transit Commission (TTC) moves millions of people every single day, usually without issue. Customers depend on real-time data provided by the TTC to help their travel plans go smoothly, and to find alternative routes when service is disrupted.

Problem

My research shows that the TTC website is seen as the most authoritative source of transit information, above apps like Google or Apple Maps. However, the website includes several design elements that routinely undermine rider confidence, especially when service disruptions occur.

Let’s get TTC.ca back on track by improving clarity and organization through realistic, incremental changes.

Outcomes

• Used card sorting to bring the site’s information architecture more in line with users’ pre-existing mental models.
• Optimized for mobile devices based on more typical user workflows.
• Created Figma mockups of the new design and developed quantitative measures to assess outcomes.
• More than doubled average user confidence, and improved successful task completion by 27%.
• See final product.

Investigating the train-wreck

Despite a major UI change in late 2021, the TTC website still suffers from usability problems that undermine rider confidence. I have sorted these into three broad categories.

Information is inconsistent

Each route has its own page that can be found using the search bar under “Routes & schedules”. Route pages include a list of stops and a stop map, and you can (usually) expect to find active service disruptions clearly indicated at the top. For example, this “505 Dundas” page indicates that a detour is in effect:

Unfortunately, there are two major issues present in this example:

1. The service alert at the top of the page isn’t very descriptive; it only makes sense if the user already has a fairly detailed mental map of the streets involved.

   • For example, if the user intends to get to Spadina, they would need to know that it is east of Bathurst, south of College, and west of Bay in order to know that the streetcar won’t stop at Spadina.

2. There is another service disruption that isn’t being shown at all, even though it affects specifically the 505 route. To know about this, the user needs to:

   1. Navigate to the TTC homepage

   2. Don’t take the obvious route of searching for “505 Dundas” under “Routes & schedules”

   3. Instead, tap on “Service advisories” in the top bar

   4. Tap on “Service Changes” OR “Streetcar Service Changes”

   5. Search for “505 Dundas” ¹

   6. Tap on “505 Dundas – Temporary route change due to track renewal”

   This separate page shows a detour between Parliament St. and Broadview Ave. Fortunately, the page includes a map of the modified route, but it still does not indicate exactly which stops are affected.

The fact that the “505 Dundas” page did include a service alert suggests that if there were any other alerts, they would also appear in the same place, creating a situation that is arguably worse than having no information at all. Instead of being unsure about whether there are disruptions, the user is led into being confidently incorrect!

Information is redundant

TTC.ca provides several “shortcuts” for what I assume are the most common task flows (hopefully supported by analytics). But these often lead to redundant or incomplete information.

For example, the site includes a link to both “Service Changes” and “Streetcar Service Changes,” but instead of the latter being a filtered view of the former, the two pages are completely separate. This is made worse by the fact that “Streetcar Service Changes”:

• Takes considerably longer to load
• Lacks the search bar from “Service Changes”
• Contains less detailed descriptions of each change (e.g., the duration of each service change has been removed)

So not only has the information been duplicated in multiple places (increasing the risk of data inconsistency), but the functionality has also been degraded.

Other redundancy issues include:

• Links that have different names, but lead to the same place.
  • e.g., “Projects” and “Projects and Plans”
• Links that have the similar names, but lead to different places.
  • e.g., “Service Changes” and “Service advisories” (both found on the homepage)
• Duplicate information found on different pages in different parts of the site hierarchy.
  • e.g., “Broadview Station bus service changes” and “100|8|87|62 Broadview Station - track renewal”

Information doesn’t trickle down

One of the main reasons to use TTC.ca over traditional navigation apps is that each stop page includes estimated vehicle arrival times and occupancy information. This is useful if you want to properly time your walk to the bus stop or avoid crowded vehicles.

If there was an issue on the route that the stop belongs to, you’d probably expect there to be a notice posted on the stop’s page. In essence, all alerts and updates should “trickle down” from the parent route to the individual stops, just like the accessibility alert. Unfortunately, this is not what happens:

To make matters worse, this particular stop, Queen Street West, is directly affected by the diversion, which means it is currently not being served! The next bus won’t ever arrive, never mind in 7 or 24 minutes! Additionally, sometimes the stop pages do show alerts from the route, which may be even worse than never including them.²

Details matter

Here are few other small but critical usability problems I’ve noticed throughout my use and research of the TTC website:

Research methods

Card sorting

Participants (n = 6) were asked to sort 20 cards (taken from existing parts of the TTC website) into groups. I also included a questionnaire to better understand their choices. I analyzed the results using a dendrogram, which shows the proportion of participants that agreed with particular groupings:

There were only two multi-card groupings that >80% of participants agreed on:

• The first grouping, highlighted in blue, can already be found on the TTC.ca homepage under the “Current service” heading and within the “Live service alerts” popup menu.

  • The current design does not display service “changes” (i.e., planned disruptions) on route and stop pages, but it does display service “alerts”.
  • Questionnaire responses showed some uncertainty regarding these two terms. Nevertheless, users’ groupings suggest that both changes and alerts should be found in the same place. The new design will reflect this finding.

• The second grouping, highlighted in red, brings together most of the route-related information.

  • Although this is mostly supported by the existing design, the grouping also includes “System map,” which currently can only be found in a PDF under “Routes & schedules.”
  • One way to better integrate these features is to provide an interactive map on each route’s page which highlights the route, while also allowing the user to zoom out and see surrounding lines. This would be particularly useful for planning trips that require multiple lines and transfer points.

Another interesting result is that “Stop/station search” and “Route search” were grouped together by less than half of participants. This suggests that the new design should allow users to search for routes and stops separately.

Usability testing

To directly compare the original design to the redesign, I relied on two quantitative metrics:

1. User accuracy, measured using a simplified simulation of real-world scenarios.

   Details

   • Participants were presented with a series of screenshots in random order.

   • Ten screenshots were taken the current TTC website, five of which were kept as-is (Group A). The other five were reconstructed in Figma following the new design (Group B).

   • Each screenshot was accompanied by a yes or no question (e.g., “Is the Dunfield Ave stop affected by the detour indicated at the top of the page?”).

   • Answers were marked as pass or fail. The number of correct answers for Group A and Group B were recorded separately, then compared.

2. Overall confidence in transit info, measured using a series of five-point Likert scales.

   Details

   The following items were rated by participants from “Strongly disagree” (0) to “Strongly agree” (4) after viewing the original design and the redesign.

   1. If a route page contains no service alert, I am confident that the route has normal service.

   2. If a stop page contains no service alert, I am confident that the parent route has normal service.

   3. When a detour is in effect, I am confident in my ability to know whether my stop is affected.

   4. When a stop is not in service, I am confident in my ability to know where the closest in-service stop is.

   Item scores were averaged across participants to determine a “confidence score.” These scores were compared for the original design and redesign.

My redesign

Finding routes, stops, and stations

Most user flows will begin with searching for a stop, station, or route, so my first goal was to revamp the “Find schedules” page to make this process easier.

Empty space has been reduced to improve usability on mobile devices. Users can now search for nearby stops, making it easier to navigate in unfamiliar places.

When entering a search query, the new design allows users to filter results by type (i.e., stop, station, route). The direction of travel is indicated on stops to disambiguate stops with the same name.

Routes and detours

Users have the option to search for either stops or routes from the “Find schedules” page. The route page should give an overview of all stops and clearly indicate any disruptions or detours along the route.

The new design visually communicates which stops are affected by the current detour. Hyperlinks have been made more recognizable, the redundant route icon is gone, and the service alert is clearly demarcated from the rest of the page.

Stop/Station page

If a user is more concerned with service at a particular stop (e.g., viewing estimated arrival times for transit vehicles), they can navigate to the stop or station page. These pages are accessible directly from search and from the parent route page.

• Service changes from the route page propagate to all affected stops. The misleading arrival times have been replaced with a service notice, which includes a helpful shortcut to the closest in-service stop.

• To improve user confidence and eliminate ambiguity, the new design indicates both the presence and the lack of a service disruption.

• The addition of a Switch Direction shortcut on the stop page makes it convenient to jump to the corresponding stop on the other side of the street. Similarly, a button is provided to navigate to the parent route.

• Travellers can also easily View All Arrivals for all routes that serve the stop. This is helpful when multiple routes will get you to your destination, and you just want to get on the earliest vehicle.

• Whitespace and layout have been adjusted using the Gestalt principle of proximity to improve readability and screen utilization on mobile devices.

Results

Average user confidence and task completion accuracy increased as a result of the changes included in the redesign.

Note: These specific percentages should be taken with a large grain of salt! The sample size was small (n = 10) and I did not perform any significance testing. Raw data and analysis can be found here.