Toronto Transportation (TTC) App

UX/UI | at HackerYou | 2018


Making transit comfortable, convenient, and accessible.
TTC app

Overview

As part of the HackerYou User Experience course, I was tasked to redesign some kind of transportation app. As an avid TTC rider, I immediately began to create a list of all of the problems transit riders face on any given day of TTC commutes. Ultimately, I decided to focus my efforts on providing helpful information to the user so they can have a safe, comfortable, and accessible commute on TTC.

Personas

TTC app personas

Goals

I wanted to create a simple experience for users to find the info they need about their daily TTC commute. This app provides information on a given streetcar’s capacity. This is important for users who either want seats to work on their commute, have a physical disability, or just want to relax on their way to a destination (see personas for more detailed information). 

With such a simple concept for the app, I also focused on improving the experience that apps like Rocketman, Transit, and Moovit provide. I find they are visually overwhelming or just overly complex in UX. Because my app is for the frequent TTC user, my target audience wants a quick and convenient experience, and I think that is what I have successfully provided.

Solution

The two main flows that are designed are 1) Viewing the route list with details about upcoming streetcars, and 2) Adding routes to the favourites list. The favourites list is important because it allows the user to see the upcoming cars from their usual stop without necessarily being there yet – so if they haven’t left their house for the stop they know when to be there!

The most important concerns for my users were how far away the next vehicle is and whether there are seats on the car – therefore helping the user decide if they should wait for the next car (to get a seat). They may also be in a time crunch but absolutely need a seat. In this case, the app provides an “Alternate Route” option where the user could order an Uber (or Lyft) to get to their work on time and with a seat.

Screens

TTC app screens
TTC app screens
TTC app screens

Style Guide

Colour Palette


TTC style guide

Iconography


TTC style guide

Typography


TTC style guide
Work
BioConnect website

Web Design

BioConnect website

Exhibit Design

transit app

UX/UI Design

Sparq website

UX/UI Design

SPARQ

Branding

Propeller

Brand Development & Marketing

VISU

Thesis Project

Habitat for Humanity rebrand

Branding