TTC Connect
UX/UI Design
2024
Methods:
User Research, Wireframe, UI Design,Usability Testing
Toolkit:
Figma, Photoshop
TTC Connect
UX/UI Design
2024
Methods:
User Research, Wireframe, UI Design,Usability Testing
Toolkit:
Figma, Photoshop
TTC Connect
UX/UI Design
2024
Methods:
User Research, Wireframe, UI Design,Usability Testing
Toolkit:
Figma, Photoshop
Service you can finally count on
Service you can finally count on
TTC Connect is a new line of communication between it’s consumer. My role was to research, design the structure and flows, and develop the UI.
TTC Connect is a new line of communication between its consumers. My role was researching, designing the structure and flows, and developing the UI.
Challenge:
Challenge:
My challenge was to increase communication between TTC and it’s consumers so that trust and perception of the TTC can improve.
Solution:
Solution:
TTC Connect is a mobile app that brings a modern and improved line of communication to it’s users.
TTC CONNECT
TTC CONNECT
Live transit locations and service updates
Live transit locations and service updates
Affinity Diagram
Affinity Diagram
Safety Concerns
Lack of
Communication
TTC is bad
Price
Issue at a stop and I have to take a transfer bus
Crime Rate is going up on TTC
The estimated arrival time is almost never right
The price keeps rising
The TTC is so unpredictable
I feel like im gonna get robbed
It feels like the TTC gets worse every year
Texting the stop is never accurate
Subway/Bus stops are dirty
The buses are never on time
No Longer an affordable option
I can’t hear the announcements on the TTC
I wish the schedule was more accurate
There is no way to tell how long left to transfer
I don’t know if a subway line is down
Subway/Bus seats are dirty/smell bad
No wifi/cell service
If I could afford a car I would drive
I wish I could see my bus/subway on a map
Elevators broken in “accessible” stations
I feel unsafe on the TTC
I don’t trust the TTC to get me to work on time
Uber/Lyft is more reliable for the price
I have to scroll through twitter to see service updates
There’s no one to help if something goes wrong
The Problem
The Problem
There's a missing line of communication between the TTC and it's riders. Finding service updates and accurate subway/streetcar/bus arrival times has become increasingly difficult leaving riders frustrated, disappointed, and searching for a new mode of transport.
There's a missing line of communication between the TTC and it's riders. Finding service updates and accurate subway/streetcar/bus arrival times has become increasingly difficult leaving riders frustrated, disappointed, and searching for a new mode of transport.
Journey Map
Journey Map
After mapping these out, we identified the “Wait at Stop” phase as the step with the most opportunity.
After mapping these out, we identified the “Wait at Stop” phase as the step with the most opportunity.
1
Find Route
Doing
Thinking
Feeling
Wait at Stop
Ride Transit
Arrive at Destination
2
3
4
Relieved
Thank god
Im glad that’s over
I wish I could afford a car
I should’ve ubered
I wish I had cell service
Unsatisfied
Disappointed
Bored
Annoyed
Confident
Curious
Searching on phone
Selecting a route
Is this the fastest route
I hope theres no delays
Im gonna be late
Finding a different route
Waiting
Frustrated by lack of updates
Trying to hear the service announcements
Trying to find a seat
Getting Off
Leaving the Station/Stop
Walking to destination from stop
Constantly Checking time
Where is the train/bus?
Why is it so hard to find delays online
I hope theres a seat
I hope I still have a free transfer
Stressed
Impatient
Frustrated
Frustrated
Anxious
Current Line of Communication
Current Line of Communication
Currently, the best way to stay up to date with TTC service is to search through the TTC Service Alert Twitter page and attempt to find the line/route you are taking in the ocean of unfiltered updates
Currently, the best way to stay up to date with TTC service is to search through the TTC Service Alert Twitter page and attempt to find the line/route you are taking in the ocean of unfiltered updates
USER RESEARCH
USER RESEARCH
Understanding Pain Points
Understanding Pain Points
I began with secondary research to collect information about commuting in Toronto. Only 25% of workers in Toronto commute by public transit, despite the city being ranked 25th in the world by the Urban Mobility Ranking.
I wanted to understand why cities ranked below Toronto had a more significant percentage of people commuting by public transit. I talked to 12 people between 22-30 years old. Four daily TTC commuters, four daily Uber/Lift commuters, and four daily car commuters.
Some key interview findings were how fed up daily TTC commuters were with the current state of the TTC and how Uber/Lift and Car commuters would be willing to take public transit if the system improved.
I began with secondary research to collect information about commuting in Toronto. Only 25% of workers in Toronto commute by public transit, despite the city being ranked 25th in the world by the Urban Mobility Ranking.
I wanted to understand why cities ranked below Toronto had a more significant percentage of people commuting by public transit. I talked to 12 people between 22-30 years old. Four daily TTC commuters, four daily Uber/Lift commuters, and four daily car commuters.
Some key interview findings were how fed up daily TTC commuters were with the current state of the TTC and how Uber/Lift and Car commuters would be willing to take public transit if the system improved.
IDEATE
IDEATE
User Flow
User Flow
I tackled three different flows for this project. Onboarding and signing up for the app, Checking service alerts and planning a ride, and submitting a suuport ticket.
I tackled three different flows for this project. Onboarding and signing up for the app, Checking service alerts and planning a ride, and submitting a suuport ticket.
Start
End
End
End
Onboarding
Planning a ride
Submitting support ticket
TTC Splash
Home
Home
Sign Up for Presto
Search
Login
Pick a route
Pick a route
Start
Start
Home
Check Service Alerts
Support
“911 in case of emergency”
Which Line
Report an issue
Next
Submit
Add photo/video
Next
Support
Email/Password
Destination
Existing User?
Service Alert on route
Bus/Streetcar or subway
Start
Anyways
Bus/Streetcar
Subway
Back
Wireframes
Wireframes
The wireframes were evaluated with a usability test with 5 representative users. Users were able to freely voice their thoughts as they walked through some typical user tasks.
The wireframes were evaluated with a usability test with 5 representative users. Users were able to freely voice their thoughts as they walked through some typical user tasks.
Log In
Lorem ipsum dolor consectetur.
Log In
Password
Lorem ipsum dolor consectetur.
Search
Service Alerts
Lorem ipsum dolor consectetur.
Lorem ipsum dolor consectetur.
Feature to show remaining time to transfer
Sort service alerts
by severity and
transit type
Icon showcasing
severity of
service updates
Service alerts and severity of alerts on the possible routes
Method of transports in selected route
Alert warning riders there is a service issue on the route they selected
Route Selection
Accessible route mode, does not recommend routes where elevators are down
Favourite/Set route as home
Flip Starting and Ending point
Slide-up to view all service alerts
Service Alerts
Lorem ipsum dolor consectetur.
Lorem ipsum dolor consectetur.
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet consectetur. Volutpat ultrices a integer felis tortor ut in purus.
Lorem ipsum dolor sit amet consectetur. Volutpat ultrices a integer felis tortor ut in purus.
Lorem ipsum dolor sit amet consectetur. Volutpat ultrices a integer felis tortor ut in purus.
Lorem ipsum dolor sit amet consectetur. Volutpat ultrices a integer felis tortor ut in purus.
Search
Routes
32 Min
36 Min
Service Alerts
Service Alerts
Bus-Subway-Walk
Walk-Subway-Walk
Lorem ipsum
Lorem ipsum
Starting Point
Destination
Directions
32 Min
Subway
Start
Bus
Walk
Service Alerts
Lorem ipsum
Starting Point
Destination
Directions
15 Min
Subway
Start
Walk
Walk
Service Alerts
Lorem ipsum
Starting Point
Destination
Service Alert on Selected Route
Change Route
Start Anyway
Lorem ipsum
Lorem ipsum dolor sit amet consectetur. Volutpat ultrices a integer felis tortor ut in purus.
Routes
32 Min
36 Min
Service Alerts
Service Alerts
Bus-Subway-Walk
Walk-Subway-Walk
Lorem ipsum
Lorem ipsum
Starting Point
Destination
Directions
36 Min
Subway
Start
Walk
Walk
Service Alerts
Lorem ipsum
Starting Point
Destination
Splash
Routes
Login/Signup
Start Route
Login
Service Alert
Home
Routes
Service Alerts
Start Route
PROTOTYPE
PROTOTYPE
High Fidelity Mock-Up
High Fidelity Mock-Up
Frames from each of the flows
Frames from each of the flows
Micro Interactions
Micro Interactions
Some of the Interactions taking place in each flow
Some of the Interactions taking place in each flow
REFLECTION
REFLECTION
Learning Outcomes
Learning Outcomes
I learned a lot through out this project, I gained insight into new user research methods like Affinity diagrams, I think it would've been a lot more fun if I had a team to do it with but none the less it was a great learning oppourtunity.
I learned a lot of usability testing and using a iterative design process, and I improved my skills in wireframing, prototyping, and creating micro interactions.
Additionally, I learned quite a bit putting this case study together. Animating micro interactions using Lottie and hosting JSON files on Github for example.
I learned a lot through out this project, I gained insight into new user research methods like Affinity diagrams, I think it would've been a lot more fun if I had a team to do it with but none the less it was a great learning oppourtunity.
I learned a lot of usability testing and using a iterative design process, and I improved my skills in wireframing, prototyping, and creating micro interactions.
Additionally, I learned quite a bit putting this case study together. Animating micro interactions using Lottie and hosting JSON files on Github for example.
This is the end of the project, but you can also check out:
This is the end of the project, but you can also check out: