GoT.O Transit App
Design a product that helps newcomers effortlessly navigate and explore Toronto.
The Challenge
Using the “5 planes of UX” methodology, I was tasked with solving a problem surrounding transportation in Toronto.
Despite the city’s seemingly simple grid layout and public transit infrastructure, newcomers and tourists often find themselves frustrated and lost while navigating Toronto and using the TTC. Inspired by my own personal experience as a non-Toronto native, I decided to design a mobile app that helps people to navigate and explore more easily. Because no one likes exiting a subway station only to discover they went the wrong way.
01. Strategy
For the first stage, I needed to define the purpose of the product and why people would use it; aka the user needs and business objectives.
User Needs & Personas
I gathered user opinions and insights through one-on-one interviews, social media channels, and a Google survey. The data I collected from these allowed me to formulate 3 User Personas and understand the most prevalent pain points.
Jake (27), Physiotherapist
Traits:
Friendly, organized, money conscious, patient, curious
User Story:
Jake grew up and lives in a small town in Eastern Canada where there is no public transportation. He lives a 10-minute drive from work and has a very active social life within the small community. He has never really traveled out-of-province before and is visiting his brother and a few friends in Toronto for the first time.
Frustrations:
-
Unfamiliar with all the intricacies of mass transit; things that seem obvious to Torontonians are unknown to him
-
Has trouble orienting himself when getting on/off, and when transferring or changing platforms (north, south, east, west)
-
Finds the fast pace and large crowds distracting and makes navigation hard
Goals:
-
Enjoy exploring Toronto’s various neighborhoods hassle-free during solo-trips when his brother is at work
-
Navigate to his friends’ houses or meeting points, often on tight timelines, who may live in lesser known areas of the city
-
Being able to plan each journey ahead of time – For ex: getting to and from the airport, friend’s house, tourist attractions
Alex (23), New Graduate / Job Seeking
Traits:
Independent, eager, hopeful, cautious, stressed
User Story:
Alex has just moved to Toronto from Winnipeg. She is a new graduate with a degree in Marketing Communications and is looking to start her career in Toronto. She is currently staying with a family member in North York, and will be going to time-sensitive appointments for apartment viewings and interviews, relying on TTC to get her there. She is also looking forward to exploring hidden corners of the city’s many diverse neighborhoods.
Frustrations:
-
Unfamiliar with Toronto, and is always getting turned around or going the wrong direction on TTC
-
Sudden or unknown delays and detours on TTC causing her to be late
-
People in Toronto and on TTC can seem rude or unapproachable
Goals:
-
Get to all her appointments on time without the stress of getting lost. Quickly and easily find the right route if she gets lost
-
Be aware of any delays ahead of time, or quickly finding an alternative route when there is a delay med-journey
-
Explore all of Toronto’s trendy spots and neighbourhoods, and get to know the city and landscape better in general.
Sung-min (33), Software Engineer / Father
Traits:
Polite, busy, smart, protective, efficient
User Story:
Sung-Min and his young family are on vacation visiting a few of Canada’s major cities, including Toronto. Originally from Seoul, Sung-min is used to a large metropolitan area with a robust transit system. Sung-min is proficient in English and will be the primary person responsible for communicating and navigating while he and his family are on their trip. They are staying in an Airbnb and therefore do not have the luxury of getting suggestions or help from a concierge. Sung-min and his family want to enjoy their week in Toronto exploring the city, seeing the sights and doing some shopping.
Frustrations:
- Unfamiliar with Toronto’s landscape and neighborhoods, difficulty orienting direction
-
Getting around via the TTC with a 2-year-old and stroller can be stressful
-
Some language barriers and Toronto metro customs he is unfamiliar with such as transferring, signage and payment
Goals:
-
Visit all of Toronto’s main/best tourist attractions and shopping spots
-
To not get overwhelmed or confused when navigating to and from places, wants the best and easiest route
-
Not having to rely on data or wifi to navigate
02. Scope
Through user research, we can define the scope of the product, including the features and content. I found that newcomers and tourists generally have 3 major pain-points, and I designed the UX and UI to help solve these issues:
1. Orientation
The biggest issue for people by far is getting confused as to what direction they’re facing (North, South, East, West). The city is laid out in a fairly simple grid structure, but until someone familiarizes and orients themselves within the landscape and TTC system, it can be difficult to know which direction you’re facing. Other map apps are not always helpful in figuring this out because the map UI does not orient itself to the direction the user is facing. A major feature of my app’s UI will be a self-orienting map that rectifies this problem.
2. Discovery
Locals often get asked where the popular neighborhoods, landmarks, and attractions are and how to get there. In designing this app, a feature will be to allow the user to discover Toronto in a fun and interactive way by displaying points of interest, landmarks, and neighborhoods on the map itself, as well as through filtered exploration within the menu.
3. Unfamiliarity
Many people coming to Toronto have never experienced mass transit before and don’t know or understand the basics or etiquette of using it. Integrating an FAQ on Toronto and TTC etiquette will be helpful in solving this issue. Detailed instructions displayed during the journey process will also help with clarification for anyone unfamiliar with Toronto’s transit and landscape.
03. Structure
03. Skeleton
In order to determine the visual arrangement of all the elements involved in the app, I sketched rapid prototypes. These were important in order to do user testing and figure out how someone interacts with and moves around the app. Something that I worked on in this stage was having only the necessary information on the screen at one time, so the user doesn’t get decision paralysis.
05. Surface
UI Decisions
The home-screen of GoT.O opens onto a large, in-perspective map view of the user’s current location, pointing in the same direction the user is facing. As the user moves and faces different directions, the view of the map in front of them follows along. The upper-right compass element acts as a guide to inform the user which direction they’re facing in real-time, while the lower-right “map-view” icon can change the map to top-down if that is preferred. This type of perspective map is designed to be easier for the user to orient themselves within the landscape around them, and can be zoomed in an out for further exploration.
The large rounded input field at the bottom of the home screen acts as the main CTA so that the user immediately knows where to start, and can focus on the task of navigating to their destination.
Icon location markers in red show the user where the nearest transit stops are located, while indigo location markers point to popular places of interest. These places of interest can be explored further by tapping on them to bring up a window with information.
The streamlined UI and flow aims to simplify the experience of navigation by showing the user one section of their journey at a time. This concept continues as the app only displays the best possible route to the user, and only the necessary information. The sections of the journey deliver clear and detailed instruction on where they need to go and what they need to do.
The hamburger menu icon in the top right from the home screen gives the user the opportunity to either explore the city’s attractions or to collect more information via FAQ on Toronto and the TTC.
Branding & Visual Design
GoT.O uses a clean indigo and green color palette, with a hint of red. The palette is meant to be reflective of Toronto, with the indigo being inspired by Toronto’s symbolic teams, the Blue Jays and the Toronto Maple Leafs, while the green is used to naturally reflect the landscape. The accent of red is used sparingly to represent the TTC’s brand color and any alerts.
