Transit App
Project Focus: UI/UX
Year: 2019
Brainstation Project
Project Overview
I had the opportunity to take Brainstation’s UX Certificate course where I was tasked with conducting user research on TTC (Toronto Transit Commission) riders to discover their pain points and design a solution that would make their commutes easier and more efficient.
Featured In: Brainstation Blog
Project Focus & Timeline
UI/UX Design
5 weeks (5 classes) at Brainstation
Role & Responsibilities
UI/UX Designer
UX research, information architecture, visual design, usability testing, interaction design.
Tools Used
Adobe XD
Team & Year
Brainstation project
2019
Challenge
How might I improve the commute for transit riders in Toronto and make it easier for them to get to their destination on time?
Design Process
Assumptions
I used my own experience as a transit rider to form assumptions that would help me get started. My next step was to validate or disprove these assumptions, as well as uncover additional pain points.
My Assumptions
Real-time tracking of transit vehicles will allow users to plan ahead and will improve their journey.
Transit riders only want to receive notifications that relate to their frequent (saved) routes.
Transit riders want to know vehicle capacity before boarding.
UX Research
Further understanding the problem and uncovering potential solutions
To validate my assumptions and gain new insights into the problems transit riders are experiencing, I conducted 3 user interviews with candidates in their early 20s and 30s. Click here for the interview script.
Interview findings & common themes
Overcrowding is a big concern for TTC riders
Users want to know the transit vehicle capacity before boarding
Users want to know when the next transit vehicle will arrive
Users want the ability to save favourite routes and get notifications for only those routes
Personas
Better understanding my findings
To synthesize my findings and empathize with my interviewees, I created two personas based on the insights gained in the interview stage. The personas allowed me to combine the common themes into two distinct use cases which helped me to confidently ideate better solutions.
Persona 1
Tina is a frequent TTC rider who commutes from Etobicoke to Downtown Toronto, 5 days a week for school.
Persona 2
Marcus is an infrequent transit rider. Marcus walks from his Downtown condo to work 5 days a week when the weather is nice. He would use public transit more if his frustrations were mitigated.
Inspiration
An important part of the design process is taking inspiration from existing software so I can gather possible solutions without having to reinvent the wheel. I took inspiration from Google Maps, Go Transit, Toronto Transit Commission, the TTC Watch app and design platforms like Dribble and Pinterest for visual design inspiration.
Something I would do differently next time would be to draw inspiration from more sources, even if that source is not transit-related. I’ve learned the importance of taking inspiration from a wide range of sources to gather as many ideas as possible before narrowing them down through user research and usability testing.
Solution Hypothesis
I believe a mobile transit app that has real-time updates, capacity and notifications of delays with accurate transit vehicle locations and wait times will enhance the TTC ridership experience. I will know this to be true when I get positive feedback from users testing.
Information Architecture
Using insights gained in the research phase to formulate feature ideas, I did a card sorting session with my classmates to help understand what features belonged where. I made the initial decision to have just three parent pages to keep it simple. I then asked my classmates to list which features belonged under each parent page. I found it helpful to understand other perspectives before creating the site map you see below.
Task Flows
Two important task flows were identified in the site map. Users would need to search their destination to find the best route. They would also need the ability to save favourite routes, allowing them to receive notifications of delays and cancellations affecting their route.
Finding the best route to the user’s destination.
Saving a favourite route.
Exploration
Using the site map and task flows to inform what screens needed to be designed, I sketched multiple iterations of this transit app project. This was helpful to visualize the solutions identified in the research phase and get feedback from my classmates and professor using paper-prototyping to inform the next design iteration.
Initial Testing
Paper prototype testing
I used the POP app to upload my sketches and create hot spots so I could navigate through a simple clickable prototype at an early stage in the design process. This was helpful to share ideas in class, as well as to get valuable insights on the usability of my design from testers.
Things I learned
I was missing key buttons to navigate certain parts of the app
I realized closing the route once opened was confusing
I realized my primary search field was too small and difficult to click with the destination input and user location
inputs being combined
Refining
I refined the designs using the feedback I gathered in the paper prototyping session. I mocked up my sketches in a
low-fidelity grayscale prototype. This is useful because it allows me to make changes quickly and focus on the usability of the app without the distraction of colour.
If I had more time, I would do usability testing on this low-fi prototype. Testing earlier can reduce the number of changes to the high-fidelity design and limit rework.
Task Flow: The user enters a destination to find the best route/line to get to their end destination efficiently.
Mistakes I’ve learned from
I realized having the save route button positioned at the top of the directions screen might not be the best position. I assume users might frequently look up one-time destinations that wouldn’t require saving their route. With this in mind, I decided to move the save route button to the bottom of the destinations screen. Looking back on this project, I would have done more UX research by creating a survey to determine how often transit riders would want to save their routes.
This would allow me to make an informed decision about where this feature belongs.
Visual Design
The visual design elements were created using a red hue that emulates the TTC (Toronto Transit Commission) colours. I wanted to keep the colours loosely tied to the TTC because of how the colour red is associated with transit in Toronto.
Usability Testing
I created a high-fidelity prototype using Adobe XD to help me (and my team if this were a real project) visualize how the app could look and feel. My next step was to conduct a usability test with 3-5 participants to identify where improvements can be made and discover if it solves the pain points transit riders face. I achieved this by screening qualified participants and listing a series of tasks for testers to perform within the prototype.
Click here for the usability test script
Usability Test Findings
2/3 participants thought the orange highlighted route options meant that route would be faster. It was intended to indicate a delay.
2/3 of participants mentioned wanting to see the cost of each transit type. They thought this would be particularly useful if you are from out of town.
2/3 of participants didn’t realize that the directions screen was scrollable.
1/3 participants said they would use the saved routes feature once or twice, but they didn’t think they would use it often.
1 participant suggested a community feature that would allow any user to report a delay.
1 participant found it difficult to see the line indicating their selected route on the map. They suggested reducing the opacity of all other lines to increase the contrast.
Final Solution
I used the feedback I received from usability testing to improve the high-fidelity prototype. If I had more time, the next step would be to validate these changes with another round of usability testing with another group of 3-5 users. If this were a real project, my team and I would also explore the new feature suggestions that came out of the usability testing by doing more UX research to better decide if those features are worth doing.
Task Flow 1
Sign up and enter a destination to find the best route/line to get to your end destination efficiently.
Task Flow 2
Save a favourite route and receive notifications related to delays and other important information that
affects your saved route.
Micro-Interactions
I find it valuable to include some level of micro-interactions between screens to help communicate interaction ideas to the development team. This also gives usability test participants a realistic experience when testing the app.
Prototype Link
Reflection
This project was completed as part of a Brainstation UX certificate course and was worked on throughout the five-week course. The relatively short timeline meant compressing the UX process into just 5 classes, allowing me to implement the best practices I learned in class quickly. I enjoyed the challenge provided by the short deadline and the opportunity to interact with classmates from around the world who offered a healthy perspective on transit in their area. The biggest takeaways for me came from conducting user interviews, usability testing and finding participants that met the selected criteria. The insights I gained from the interviews were invaluable in identifying pain points and validating my assumptions. Rapid prototyping and looking for feedback through usability tests early on was another big takeaway.
As a UX course, it ended before I was able to start the visual design phase of the project. I decided to continue to build out this project after the course had ended, adding a layer of visual design, creating a high-fidelity prototype, micro-interactions and usability testing on the high-fidelity prototype.
My experience at Branstation and working on this project has helped my understanding and confidence immensely and has allowed me to put what I learned to use on real projects.