Transit Toronto
A local transit app for the Greater Toronto Area.
Overview
BrainStation Toronto
This project was done as part of the UX course taken at BrainStation Toronto. The students are required to complete a final project, which focuses on creating a highly usable and functional design solution for a digital experience in any digital product format. The final project aims to demonstrate an application of the concepts taught within the course.
Problem Space
The public transit app is not clear enough and doesn’t provide all the meaningful information required by the traveller. Moreover, others app aren’t localized and don’t provide information needed by a new transit user.
Project Description
Roles
UX Researcher, UX Designer, UI Designer
Project Duration
5 weeks
Tools Used
Sketch, Marvel App, Invision, Adobe Photoshop
Process
- Project Brief
- User Research
- Information Architecture
- Wireframing
- User Testing
- User Interface Design
User Interviews
I conducted interviews with 12 individuals who used the transit on a regular basis. My goal was to identify what their goals were when taking the transit, what challenges they were facing, and what essential information was not available to them while taking the transit.
Although the interviews were very open-ended and did go off on to different tangents which were very insightful in itself, but just to stay focused, I followed the script below to ensure I was revealing the user’s motivations, pain points and behaviours during the interviews.
Demographics of Interview Participants
- 6 Men
- 6 Women
- 18-30 year old
Interview Questions
Why do you take the transit?
What are some of the apps you use?
Tell me about the last time you rode transit.
What could be improved or enhanced about your typical transit experience?
What resources do you use to find information on transit routes, alerts and schedules?
When do you need to use a transit app?
How do you find out about delays and closures on snow days/construction season?
Where are all the different places that you usually use a transit app?
Tell me about your experience the very first time you were using transit in the Greater Toronto Area.
Tell me about an experience where you were going to a completely new place using transit.
Tell me about your experience the very first time you were using transit in the Greater Toronto Area.
Tell me about an experience where you were going to a completely new place using transit.
Organizing the insights
At the time of working on this project I had to borrow a large wall at home to gather the insights. This helped me identify any major themes. The few categories that emerged were real-time updates, Presto, schedules, and saving favourites.
Interview Findings
Real-time Information and Alerts
The biggest issue people seemed to have was that the real-time information they received on the current apps did not seem to be accurate and hence could not be relied on. Moreover, they did not get alerted in time if a particular line was delayed, or cancelled because of weather conditions, construction or any other reasons.
Presto
People found the Presto card to be really confusing. In some transit lines you have to tap at the stop, in some lines you have to only tap when getting on and in other buses, you have to both tap on and off. This was extremely confusing.
Direction
For people who were in an unfamiliar place, they couldn’t tell from their current transit app, which side of the road they had to get on the bus.
Overcrowded Buses
People did not like getting on overcrowded buses. If their commute was long, they did not want to stand through out their journey. Not having their personal space violated was also one of people’s top concerns.
Missed Transfers
People would see their buses passing from the other side of the road, but couldn’t get it to stop hence missing their bus and then waiting up to 20-30 minutes for the next one.
Which Transit Company?
People going to or coming from the suburban parts of Toronto had trouble identifying from their app as to which line the bus belonged to. Because every region has a different transit company working there, people had trouble identifying what the bus would look like, if they were not familiar with the area.
User Personas
I created 3 different personas to represent the different users that use transit in Toronto. Each persona contains details on their needs, challenges, motivations and how they would interact with a transit app. These personas helped me stay focused on the user’s need throughout the project.
The Solution
A mobile app localised for the Greater Toronto Area, that also integrates with the Presto card system allowing users to pay from within the app. The app will also tell you how and where to pay. The user will have the ability to create an account, subscribe to different routes to their favorite places such as home, work, gym etc. The app will also have a Request Stop feature which will allow you to request a stop if you’re within a 100m radius of the bus.
Mapping the User Journeys
To help visualize the journey of the user through the different stages of the transit process, I created user journey maps for my personas. This allowed me to get a better handle on the users thoughts and emotions through the different phases of taking the transit.
User Stories
User stories were created and used as a reference throughout the project to maintain focus on what the actual problems are and to maintain clarity on what design features are relevant and why. For this app, the key experience was being able to look for a relevant route, know how to pay, and start a trip.
The structure I used was:
“As a [persona], I [want to], [so that I can].”
User Story 1
As a new person in the city, I want to know how and where I have to tap my Presto card, so that I don’t get into trouble with the fare inspector.
User Story 2
As a new person in the city, I want to know which side of the street to wait for my bus, so that I don’t end up missing it.
User Story 3
As a regular transit user, I want to know if there are any delays in the transit lines I have to take, so that I am not late for work or any other appointments.
User Story 4
As a regular transit user, I want to know how crowded my bus is, so that I don’t have to go cramped with other people and leave accordingly to catch another one.
Task Flows
I created task based user flows to identify the steps for some of the main tasks that a user would have to go through when taking transit in Toronto. I’ve included a few of those journeys here.
1. Onboarding & Setting up Commute
1. Login / Sign Up
The first screen in the onboarding process, which will allow the users to login if they already have an account, sign up if they don’t, or login using either Google or Facebook to skip the sign up process.
2. Connect Presto
One of the features of the app would be the ability to connect your Presto card account with the app, so the user is able to do Presto related tasks, such as payment, topping up, setting autoload etc. from within the app. At this stage, the user will be able to connect their Presto account.
3. Set Home & Work
As part of setting up their daily commute, the user can set up the locations for their home and work, which will allow for easy navigation to these two most frequently visited locations.
4. Set Commute Times
The user can set up the times they have to be at work by, and when they leave work. They can also choose which days they have to work. Doing this would allow the app to recommend the best route for their commute based on these timings, and send alerts when something is unusual with those routes.
5. Set Commute Routes
This step will list down all the routes available at the commute times of the user. The user will get information about cheapest, fastest and the routes with the least transfers. The user can then choose which route they prefer and will be subscribed to all alerts pertaining to those routes on those given times.
2. Searching for a destination and starting a trip
1. Home
This is the screen the user will see after the initial onboarding. This will feature the user’s current location on a map, nearby bus routes and a search bar to search for destinations.
2. Route Options
Once the user searches for their destination, the app will list down multiple route options with indicators of duration, busyness and fare.
3. Route Details
When the user taps on one of the routes, they can take a look at the details of the route, i.e. the transfers, how many stops they’ll have to ride and individual indicators of duration, busyness and fare, for each transfer. They will also be able to start the trip from this screen.
4. Start Trip
When the user starts the trip, the map will zoom in to the place where they need to get on the bus, including the stop number. It will also place an indicator on the side of the road they need to get on.
5. Payment
The user will have the ability to pay from within the app using their Presto account. A notification will tell them how to pay and their card will display with a barcode that they can tap onto the Presto machine.
3. Loading funds in Presto Card
1. Card Details
This is the home of the Presto section displaying the details and recent transactions for the selected Presto card. From here, people can quickly top up preset amounts, or also add custom amounts of their own choice.
2. Select Amount
When people click the ‘add custom amount’ option, they come to this screen where they can enter the amount they need to top up.
3. Select Payment Method
At this step, they can choose their payment method, either an existing credit card they have saved earlier, or add details for a new one.
4. Thank you
Once their payment is approved, they see a thank you screen with the option of going back to the Presto home screen.
Information Architecture
Once I had a basic tasks that the app will achieve, I decided to organize it and put together the information architecture or sitemap of the app. During this phase, my focus was to establish a structure, and develop the terminology that is easiest for transit users in Toronto to understand.
Sketches & Paper Prototyping
Expanding on the basic flows explored, I sketched out numerous low-fidelity prototype possibilities onto paper, adding in more steps to each flow to add more clarity. I transferred these sketches onto the Marvel App, a platform for quick prototyping and testing. I presented this initial, low-fidelity prototype to a few stakeholders for initial feedback.
Wireframes
From the paper prototypes, people understood the basic flow of the app, and also made a few recommendations about adding some more steps in each process for clarity. Taking that initial feedback, I refined those sketches into medium-fidelity wireframes to include more specific key details of the interface, such as user interactions, placement of interface feature and icons and other details that were important to test.
1. Onboarding & Setting up Commute
2. Searching for a destination and starting a trip
3. Loading funds in Presto Card
User Testing
I conducted usability tests with 8 people, who were between 18-32 years old and who used transit in Toronto and various transit apps every day. Participants were informed what the goal of the test was, and they were asked to perform the tasks within the app.
To ensure participants felt comfortable and were providing the honest feedback, they were reminded that I was testing the app and not them and that there was no right or wrong answer. With permission, I took notes of the verbal feedback they provided and also noted the time it took for each participant to complete a task. I also looked for any expressions or behaviour that could indicate a potentially positive or negative experience.
USER TEST FINDING # 1
Onboarding
In the wireframes, there was no ability to skip through the onboarding process where you had to connect your Presto, set up commute. If people did not want to do it right away, they wanted to be able to skip it.
Some users just wanted to get to the main app and have the ability to set up these things later.
Recommendation
Add a ‘Skip’ or ‘Do it later’ button right under the ‘Continue’ button.
USER TEST FINDING # 2
Home Page / Search
- It shows both arrows and users found it confusing as to which direction was relevant to them.
- The numbers listed under the Nearby section, it wasn’t clear that they denoted bus numbers.
Recommendations
- Only show one arrow that corresponds to the route direction listed below in the Nearby section. If the list shows the westbound route, only show the arrow for westbound direction.
- Add icons for bus/train/subway next to the numbers listed under the Nearby section, to make it clear what these are.
USER TEST FINDING # 3
Route Options
On the Route Options screen, people weren’t clear on what the icon next to the number meant. While it as meant to be the logo of the line a particular bus belonged to, people who hadn’t seen those logos could not understand that, that’s what it was.
Recommendations
- Indicate the transit company only using the color of the bar. For example, if it’s a TTC, the bar would have TTC colors.
- Instead of the logos of the transit company, use icons to indicate whether it’s a bus, train or subway route.
USER TEST FINDING # 4
Route Details
Some people indicated that they should have the ability to add a route to their favorites or ‘My Routes’, if it’s something that they take on a regular basis.
Recommendations
Add a ‘Add to Favorites’ button on the screen next to the ‘Start Trip’ button.
USER TEST FINDING # 5
Request Stop
It’s not clear at first glance what the number on the dialog denotes, specially so when the dialog appears by itself, on the screen.
Recommendations
- Add an icon next to the number to denote if it’s a bus or train.
- Add the full logo of the transit company that the bus belongs to, on top of the dialog.
USER TEST FINDING # 6
Loading Funds to Presto
One of the users indicated adding more security to loading funds for Presto, i.e. when the user hits the Process Payment button, it should ask for some kind of authentication before proceeding to process the payment.
Recommendation
Add a step for biometric or FaceID verification, when the user hits the Process Payment button.
Designing the User Interface
Eventually, I got to a point where I felt that testing my iterations was producing no new information, so from there, I began to start exploring where I wanted to take this visually.
