Design Process

Overview  

Redesign the Transit App to help daily commuters resolve their frustration.

The target user group is public transportation daily commuters over the age of 18 to 34.

​TransLink is Metro Vancouver's transportation network, serving residents and visitors with public transit including buses, Skytrain, and Seabuses. 

The Transit app is an app to get real-time info for buses, trains, Uber, Lyft, bike share & scooters in 200+ cities.

Based on the Transit app's negative reviews…

Competitive Analysis 

I began with a competitive analysis of the Transit app, Google Map and Rockman app to see what they are doing well, and what functions I need to improve the redesigned app. 

User Research 

I conducted the user research by preparing a list of interview questions and interviewing 4 users between the age of 18 to 34. 

17% of the 18 - 34 age group users are the most frequent public transportation daily commuters compared with other age groups. 

​Based on Statista's Frequency of using public transportation in Canada as of October 2015.​

Interview Questions

I chose open-ended questions that allowed users to describe their experiences using The transit app. 

• Describe a time when you used the Transit app to go somewhere.

• What did you think of your last Transit app experience?

• How often do you use the Transit app?

User Interviews

User research proves the main problem that I hypothesized which is the inaccuracy of the bus schedule real-time update and adding a ticket page to provide users flexibility and convenience.

After the user interview, I noticed without onboarding instructions, users are not aware of the app functionality and are unclear about what features the Transit app has. 

Wendy's User Journey Map

I developed a journey map to better understand her end-to-end experience and seek a solution for her. The user journey map helped me gain empathy and touchpoint and visualize the areas of opportunity.

Site Map

I want to use a site map to layout each screen. The expectation is based on the experienced user had using other apps. Users would expect a transit app to have a search bar, navigation, and nearby bus lines.

In this redesigned project, the onboarding page, notification redesign and ticket page are the functions I focused on.

User Stories & Task Flow 

User Stories

"As a daily commuter, I want to be able to manage my time so that I can get to work on time." 

To begin brainstorming the functionality and features of my solution, I created user stories under different epics. I selected efficiency, choosing functions and feedback & improvement as my epics. All users reflect to focus a lot on app functions and efficiency that can solve their day-to-day problems. Therefore, I decided to combine essential features and create user task flows. 

Task Flow 

I mapped out each touchpoint in the user task flow to provide insight into the user journey. On the login page, the user login into her account and check the nearby transit lines. Users can set up a notification between 1 and 15 mins. 

Sketches 

To explore the solution, I created sketches to organize essential screens and ensure the designed screens would resolve and improve the transit app usability. 

Usability Testing and Iterations

Wireframes - Onboarding Page

I conducted 2 rounds of usability testing with users between the age group of 18 to 34. They have experience using the transit app and wanted to see if this challenge would resolve the issues for the problem statements. 

Based on user research without onboarding instructions, users are not aware of the app functions. I designed onboarding pages to show clear instructions on the app functions. 

Wireframes - Ticket Page

I wanted to add a barcode on my ticket page so users can scan and use the ticket through the app.

In Iteration 1, I added all the categories on the ticket page. However, after usability testing and a few rounds of iterations. Based on users' feedback, creating an overlay to show add money, account history and remove card options provided a clear section to show that these are the app functions for My ticket.

At the bottom of the navigation bar in iteration 3, I added a description for accessibility.

Wireframes - Redesign Notification Page

Based on user interviews, the reminder function is unclear and confusing. Instead of reminding me 1 min before I need to leave. I changed it to "Remind me 1 min before the bus arrives at my current stop."

High-Fidelity Prototyping

Prototyping- Onboarding Page

The Problem Statement 

• As a daily commuter, I need an easy and clear instructions onboarding page on app functionality to give me an overview of what functions the Transit app provides.

The Solution 

• Designed an onboarding page that gives users clear instructions on the app functionality. 

Prototyping- Redesign Notification Page

The Problem Statement

• As a daily commuter, I need an easy app to get an accurate departure time because I need to get to work on time. 

The Solution 

• Redesigned notification reminder to “Remind me 1 min before the bus arrives at my current stop” users can get to the bus stop before the bus arrives. 

Prototyping- Ticket Page

The Problem Statement

• ​As a daily commuter, I would like to see a ticket page in the transit app to save time and provide convenience, so I don't need to worry about lining up at the booth at SkyTrain station. 

The Solution 

• Created ticket page to provide user options in add money, buy tickets, check account history and remove cards.

Goals & Metrics

Increase customer loyalty and retention rate by 10 % within 6 months 

Increase the average sign-up rate by 2% 

Achieve the Net Promoter Score of 9/10 and above. Users can submit a review based on the experience they use the redesigned Transit app 

Style Guide

We selected blue as the primary colour to establish trust and a sense of reliability. We used white and blue as contrasting colours to emphasize actions and instructions.

We wanted to make sure our buttons' design and styles were consistent across the app.

Next Steps

For my next steps, I want to collaborate with developers, PMs and stakeholders who work on the Transit app to discuss the app limitations and constraints on what this app can improve. 

I understand that the bus schedules depend on the local API, if TransLink is able to provide the real-time update, it will help the Transit app improve the accuracy of the bus schedule. 
​
Regards to user research and usability testing, my next step will look for a broad base of users to get at least 5 to 6 users to conduct user interviews and usability testing.