Vanlive Transit

Transportation App for Commuters in Vancouver


UX Research, Wireframing, UX Design, Information Architecture, User Flow, Prototyping, Usability Testing


Adobe XD, Sketch, InVision, Marvel, Photoshop


3 Weeks




This project was done during my part-time UX Design course at BrainStation — I was asked to design a mid to high-fidelity Transit app for my final design presentation.


Project Description

Tired of missing buses or being late to your destination because the bus is full? Vanlive Transit can Live-track your transit status and to prevent you from being late due to sudden transit schedule changes.

No more of having to carry your compass card or having to line up at the ticket vending machine when your compass card is low in balance. You can reload and view your transit history on the go! It can guide you and provide a smooth user experience from start to end of your transit trip.



My initial goal was to find out people’s common pain-points during their transit usage.

I found that User Interview was not an easy task because people often did not know what they want exactly. I learned that it was important to make people feel comfortable in order to pull their experiences/thoughts out loud. Sometimes giving examples of common problems was helpful.

Though it wasn't easy, what I've discovered was that, unfortunately, people did not want to spend much time on experiencing new apps; so even though people had pain-points with the current app they are using, they kept using the same app. Also, because people already had Google or Apple Map on their phones, they did not want to download an extra transit app that offers pretty much the same function as Google or Apple Map.

Learning this, I decided to design an app that is accurate with Live Time-tracking (which was a common pain-points) and has a feature that Google/Apple Map doesn’t offer - which was paying for Transit Fare. 

In Vancouver, BC, many people use 'Compass Card' which is a card that people use to load their transit fare balance or monthly passes to commute or travel. Similar to Metro Card in New York City, people have to tap in & out using this card to use public transit. 

Interviewers have said that they often have forgotten to bring their compass card or the card's balance was low during the morning rush hour and had to line up for a reload.

It seemed like in Vancouver, there were no apps that had the ability to pay the transit fare using mobile devices just like Apple pay or Google Pay.


• People don't like to install new apps.

• Paying transit fare with a mobile device is not possible in Vancouver.

• Time schedule on current transit apps is not always accurate.


Problem Space

What are the problems you have identified and trying to solve?

1. Improving the accuracy of the bus schedule and on-time tracking by providing a live GPS tracking information.
2. Provide information when the bus is full so the passengers can plan on alternative routes; therefore reducing the risk of having unpredicted events.
3. Being able to buy & use transit tickets through the app and see all transaction history.

Value Proposition: How is your solution to the problem unique?

Buying and using the transit ticket through the app should be convenient because users won’t have to worry about having the exact amount of changes, or spending time at the ticket booth. Transaction history should be available through the app on-the-go instead of going to the compass card website and entering your card number. Currently, there is no product that solves these issues in Vancouver.


With the data gathered from research and user interviews, I created my 2 user personas, Jin and Jessica. Both are very frustrated by the current transit system due to different reasons such as frequent transit schedule change, bus route change due to road constructions or bus being full during rush hours. Also, Jin who sometimes drives her car to work often forgets to carry her compass card.

IA & User Flows

From the information I discovered from User Interviews, I started to design my product's Information Architecture thinking about what would be the most commonly used and necessary features. Then, I moved on to identifying my top 2 user flows I wanted to show:

       1. Plan your commute to work
       2. Paying for transit fare. 




Vanlive Transit – User Flow 1


Vanlive Transit - User Flow 2

Design & Iteration




What did I learn? What did I change?

• The navigation icons were confusing without labels.

•  I found my usability testing with Marvel app very useful for navigation purposes and to make sure the buttons are located on the right spot (for example: cancel buttons).

Using the Marvel app as a tool for initial usability testing was a great idea to test my user flow in an early design developing phase. I could see whether my initial idea and sketches were communicating and directing the users to the right path or not. However, because this was only an initial sketch, I still had a long way to go. Now, it was time to add more details in the wireframe stage.



During the second usability testing, the users were mostly able to complete the task given. However, the functions were very generic. You could load money to your Compass Card and see the transaction history; but, you could not set up for an auto-reload or edit your method of payment. After figuring out the areas of improvement, I kept on developing my product and moved on to final prototype.



Planning a Trip: Going to Work

• Seeing unexpected shedule changes

• Addinng Compass Card & Balance

• Paying for Transit Fare



One thing that came to me the most was keeping track of your user flow and not to lose the identity of your app. If I were to go back to the beginning of this project, I would spend more time during the wireframe phase. Also, referring back to your user flow and constantly thinking about all possible answers would be ideal instead of focusing so much on your ‘task-success’ user flow.


As the next step for this project, I would like to further look into different user flows such as the 'viewing transaction history' and 'scheduling a trip in advance'.

Due to time constraints, I've decided to focus the transit fare payment method on a Compass Card. This does not mean its capability is limited to Compass Card only. Looking into different methods of payment — especially with different locations — should definitely be the direction moving forward. 

Finally, I would like to investigate more time on the UI design and branding as this project was aimed at mid-high fidelity. 

Thank you for your time and for reading this UX case study! 


Selected Works

House Special (Archived)Graphic Design

Vanlive TransitUX Design | Case Study

McDonald'sHeuristics Evaluation | Case Study

PROMAUX/UI Design | Case Study