UX Design

A TTC App Prototype User Experience Case Study

A Brief Introduction

In January of 2019, I took the User Experience Design course at BrainStation Toronto. With design and tech advancing so quickly, and user interaction now a big part of the entire design process, I felt the need to update my own knowledge as well. This app prototype was my final project submission.

The Problem: Where’s My Presto Card?

Oftentimes we misplace our Presto card. We’re left looking all over the place trying to remember the last place we could have placed it. Which coat pocket it could have been in. Which pair of pants we last wore. And sometimes, we end up being late for work or class because of this.

Presto Card

The Solution: The TTC Rapid Transit App

The TTC Rapid Transit App is meant to help streamline the commuting experience. Users of this app will be able to link the app to their Presto account, and tap and pay with their smartphone as they board buses, streetcars, and go past station turnstiles.

People may misplace their Presto card, but they always have their smartphone with them.

smartphone with Rapid Transip app

User Research

user research

Interviews were conducted with 3 individuals with varying degrees of transit usage. A female art director at a large corporation, a male video editor at a post-production house, and a male production manager at a tech company.

Questions asked mainly pertained to what their main interactions with the TTC is like, followed by questions on how likely they would use an app with integrated payment ability.

Each interviewee uses the TTC based on their own life-style and work situation. Insights gained are as follows:

  1. For the most part, users of the TTC don’t have any major complaints about the service, but wish communications about delays and route changes were better
  2. Presto seems to be a small point of contention. Though nothing major, users wish it was a smoother experience end-to-end.
  3. Users all feel that using the TTC is cheaper than using a car due to gas prices, but frequency of usage depends on personal circumstances
  4. Overall feelings about the TTC is that it’s OK, but could be better.

These interviews would result in the creation of two user personas.

User Personas

Persona: Fiona

Persona 1: Fiona

Name: Fiona
Age: 27-32
Occupation: Marketing Account Manager at an Advertising Agency
Lifestyle: Active (likes to jog and hike)


Lives between the Danforth and the Beaches with easy access to subways and buses. Enjoys hiking, travelling, and exploring her neighbourhood, visiting various cafes, restaurants, and dessert shops. Active social life and new to the neighbourhood.

Experience with TTC:

Uses it as her main mode of transportation across the city, but if possible, prefers to walk. Does not own a car. Uses the TTC almost daily to commute to work and social engagements. Does not like Uber because of price and worries about safety as a female. Does not find too many issues with the system aside from notifications when there are delays. Thinks the Presto Card is an annoyance. If travelling across the city, being able to plan routes would be great (routes, points of transfer, etc).

Persona: Eric

Persona 2: Eric

Name: Eric
Age: 30-35
Occupation: Project Manager at a New Technology Start-up
Lifestyle: Young Urban Professional


Lives in downtown Toronto and is within walking distance to most places, including work and most social hot spots. Occasionally takes the TTC if his social gathering is outside his immediate area or if visiting family in North York.

Experience with TTC:

Walks to most places, but in bad weather or if destination is outside the downtown core, he will take the streetcar or subway. Rarely uses buses as he rarely strays too far from anywhere accessible by either streetcar or subway. Tends to use pay-per-use/cash fare rather than a monthly/weekly pass since it doesn’t make economical sense. Thinks Presto Card is a minor annoyance, but willing to put up with the convenience of being able to tap and go, but would like something more convenient.

User Journey Flows

Not everyone will use the app in the same way. Below are the user journey flows of some of the more common ways I envision users of the app will interact with it.

User Journey Flow: Fare Payment

The user simply wants to pay their fare with the app.

UX User Flow - Fare Payment

User Journey Flow: Checking Route and Schedule Information

The user is still waiting for their bus/streetcar and wants to check route information.

UX User Flow - Route Information

User Journey Flow: Add Funds or Purchase Pass

The user wants to add funds or purchase a new pass.

UX User Flow - Purchase New Pass or Add Funds

User Journey Flow: Linking a Presto Card

The user wants to link their Presto card with their Rapid Transit App account.

UX User Flow - Linking a Presto Card

Information Architecture

TTC Rapid Transit App User Flow

TTC Rapid Transit App Information Architecture

Sketches and Pop Testing

The main screens of the app were sketched out and loaded into the Marvel Prototyping app to test some of the user flows. From this app, a round of user testing was done with my classmates where I took note of some of the feedback and shortcomings experienced when testing. These wireframe sketches would further evolve in the next iteration when I would begin to build them out from Moqups into a functional prototype.

Wireframe Sketches done by hand

Wireframes and Prototyping

From here, I am able to build a to-scale wireframe and prototype in Moqups of the entire app. This could also be done through other wireframing and prototyping applications such as Balsamiq, Adobe XD, Sketch, even Illustrator, and so forth. Which is used really comes down to personal preference, and what is available, depending on if you are using a Mac or PC. Below are a few of the wireframes for the app, which expand upon the sketches done in the notebook. Wireframing also lets me see issues that may not have been clearly apparent when viewing the app from a very high level.

View Full Wireframe Prototype

Wireframe - Login


Wireframe - User Registration

User Registration

Wireframe - Fare Payment

Fare Payment

Wireframe - Slide Menu

Slide Menu

Wireframe - Payment Information

Payment Information

Wireframe - Add Funds

Add Funds

Wireframe - Purchase Pass

Purchase Pass

Wireframe - Purchase Dropdown

Purchase Dropdown

Wireframe - Presto Link

Presto Link

Wireframe - Presto Link Confirmation

Presto Confirmation

Wireframe - Routes and Schedules

Route & Schedule

Wireframe - Routes Dropdown

Route Dropdown

Branding and UI

With the UI, I wanted to keep it simple and maintain the TTC branding having it prominantly in use, from brand colours, to font usage. Button styles I kept very simple, yellow for confirmation or to advance, and a grey button for cancel or close. Both the colours used came from existing TTC brand materials.

TTC Brand Colours

brand colours - red
brand colours - yellow
brand colours - grey
brand colours - black
brand colours - white


Font Usage

typography - Usage


typography - Futura PT Book
typography - Futura PT Bold
typography - Open Sans


Style 1


Style 2


High Fidelity Mock-ups & Prototype

With the wireframes and the simple style guide as my foundation, I then created a series of high fidelity mock-ups. With InVision, I then created a functional prototype that could easily demonstrate how the app works. The high fidelity screens were designed in Photoshop.

View Full High Fidelity Prototype

Rapid Transit - Login


Rapid Transit - User Registration

User Registration

Rapid Transit - Fare Payment

Fare Payment

Rapid Transit - Slide Menu

Slide Menu

Rapid Transit - Payment Info

Payment Info

Rapid Transit - Add Funds

Add Funds

Rapid Transit - Purchase Pass

Purchase Pass

Rapid Transit - Purchase Dropdown

Purchase Dropdown

Rapid Transit - Presto Link

Presto Link

Rapid Transit - Presto Link Confirmation

Presto Confirmation

Rapid Transit - Routes and Schedules

Route & Schedule

Rapid Transit - Routes Dropdown

Route Dropdown

Learning Outcomes

Through the process of working on this app, it is easy to see that all the steps inform the next. From the initial idea of the problem being defined, to the scripted interviews and the development of the personas, to creating scenarios with the personas to hypothesize user flow outcomes, and then to actually test those user flows with sketches and wireframe prototypes. It is a constant process of trial and error, and testing and re-testing, and iteration upon iteration with those learnings.

If this app were to continue, then there would need to be some research into how the Presto payment system works and how it’s back-end infrastructure works. One of the main concerns is how purchase of a pass or addition of funds does not show up in the account information until a day later. This could be a real problem for people who purchase a pass or add funds just minutes before boarding a bus or streetcar or entering a station and need to pass through a turnstile to access the subway. This may speak more to the Presto infrastructure, but if Starbucks can have an app that users can easily add funds to and pay immediately, then this problem we know is solvable.