Lucia Gomez logo

Vancouver Bus Tracker

A redesign suggestion of the app Vancouver Bus Tracker, aiming to increase user experience by providing solutions to the problems its users encountered.

TYPE

School Project at Emily Carr University

ROLE

UX/UI Designer

DURATION

Feb to Mar 2020 | 4 weeks

― The App

What is Vancouver Bus Tracker?

Vancouver Bus Tracker is a mobile app for Android with over 50,000 downloads developed by Beyond 2.0. It allows users to view the next arrival time of the buses of Vancouver based on onboard bus GPS coordinates.

In 2018 there were over 88 million boardings in only the 10 busiest routes of the city of Vancouver. This app becomes very handy in this city, where a high percentage of the population uses public transport on a daily basis. It allows its users to plan their trip in advance to never be late, and let them know when the next bus will arrive at a certain bus stop so they can decide whether to wait for it or take an alternative route.

The Challenge

Why redesign?

As a regular user of this app, I believe that in general, this is a very functional and straightforward product that serves the purpose well. However, it came to my attention its low rating of 2.4 out of 5 on Google Play, as well as a high number of negative reviews in comparison with positive ones.

The objective of this project was to discover the pain points of its current users and to provide a redesign suggestion that could increase the number of positive reviews by meeting users’ needs.

Vancouver Bus Tracker rates in Google Play

What I intended to do with this project

Note that my intention with this project did not mean to criticize the design of this app but to simply identify and provide a redesign suggestion of those elements that were not meeting the users’ needs, with the aim of enhancing the overall user experience.

The Discovery

Evaluating the app to discover its strengths and weaknesses

In order to make a valuable redesign that could meet user’s needs, I first needed to identify what those needs were. To do so, I first did an initial evaluation identifying what I found the strengths and weaknesses were of all pages and functions of the app. Afterward, I examined all the design-related reviews of the current users to identify their main pain points and needs.

Evaluating the app to gather first insights

This app is composed of three main sections: Search, Locate, and Favourites. In order to fully understand the app, its features, and capabilities, I conducted a first evaluation of the product. In this evaluation, I identified some weaknesses and strengths that I thought each of the pages of this app had. This initial evaluation was all subjective and then, I used it to compare it with the findings obtained with the analysis of the real users’ reviews.

App flow

1. Search page

This is the first page of the app the user sees when logging in. From here the user can search a stop by its number or name, as well as select one of the stops they last searched for.

Strengths

  • Users are able to access their recent stops and bus information with only one click.

Weaknesses

  • Users that don’t know the stop number or name will encounter difficulties searching for a stop.

2. Locate page

This page is where users can locate the stop they are looking for using a map. It shows the bus stops near the user’s current location.

Strengths

  • It allows users to see the nearby stops for those that don’t know the stop number or name.

Weaknesses

  • To find the buses that use the stop selected, users need to navigate to an extra page after selecting Get Buses. As a consequence, they cannot easily identify whether the stop they selected is the one they are looking for from the first page.
  • Unable to see the stop number on the bus stop page. This can make users wonder if they have selected the right one.
  • Unable to discover routes. The locate function is only useful when users previously know which bus route they are looking for.

3. Favs page

This page, in my opinion, is the most important one. It displays a list of the users’ favorites bus stops and routes, providing them quick access to their information.

Strengths

  • It allows users to see their most important bus stop information in only one click.
  • Users normally use the same buses on a regular basis, so this section is very useful and handy.

Weaknesses

  • This is probably the most used page of the app, considering that users tend to get the same buses and routes on a daily basis. However, it is not the first page when opening the app, making the users go through an extra step to get this information.

4. General observations

These are the general insights of the app.

Strengths

  • Very intuitive and straightforward product.
  • The arrival time of the buses is very accurate.

Weaknesses

  • This app is not functional for those users who need to discover best the route to take to go to their desired location.

Evaluating real user’s reviews

In order to get real insights from real users, I examined all the design-related reviews on the Google Play Website. This allowed me to identify not only the users’ frustrations and needs when using the app, but also the elements or characteristics that they love about it.

Findings

Based on the reviews, the most common challenges faced by users were:

  • The map consumes a high amount of data.
  • Users are unable to see future buses information, as the app only displays the next three buses from the time of the search. This doesn’t allow users to plan future trips.
  • Users are unable to see future buses information, as the app only displays the next three buses from the time of the search. This doesn’t allow users to plan future trips.
  • Lack of a trip planner that enables to find out the best route to go to their destination
  • Lack of offline alternative for those with limited data or wifi.
Vancouver Bus Tracker reviews from real users

Defining the Goal

What do I want to achieve in with this redesign?

To meet current user’s needs and enhance the user experience by:
1. Allowing users to search by bus route number,
2. Helping users find the best route for their destination,
3. Optimizing the app so it reduces the data consumption,
4. Providing users with the options to see future buses schedule so they can plan their trip in advance,
5. Providing a more modern and clean look.

First Wireframes

Developing the first wireframes

After identifying the main issues and challenges that users face when using the app, I first brainstormed different solutions to approach them.

The first thing that I did was to change the main menu of the app. The placed the Locate option inside the Search, as I believe is another type of searching for a route, and in its place I added the new section Plan Trip, to allow users discover the most convenient route for their desired destination. Note that, due to the limited time for this project, and as most of the main challenges faced by the users were related to the Search section and the Information page, it was decided to not to design this feature in this project.

Additionally, I introduced a new feature the new featured of Search by Route number requested by users. This allow them so search route, see all stops of that rout, along with the other routes that share that sop, and see the map of the route.

Lastly, for the bus information page, I added an icon that will allow users to see the schedule of that bus in that specific bust, so users can plan their trip in advance. Additionally, I added a switch button that gives the user the possibility to turn off the map in order to save data consumption.

Sketches

Redesign of Vancouver Bus Tracker sketches
Redesign of Vancouver Bus Tracker sketches
Redesign of Vancouver Bus Tracker sketches

Wireframes

Redesign of Vancouver Bus Tracker wireframe
Redesign of Vancouver Bus Tracker wireframe
Redesign of Vancouver Bus Tracker wireframe
Redesign of Vancouver Bus Tracker wireframe
Redesign of Vancouver Bus Tracker wireframe

User Test

Testing the design

With the digital low fidelity prototype, I conducted a usability test with 5 participants. This test identified several issues that my first design attempt presented:

Findings

  • Participants indicated that the search section seemed confusing because the three search methods (Search by Stop, Location, and Route) were presented differently while in theory, they have the same level of importance. While search by stop was presented with a search bar, search by location, and search by route were presented through buttons.
  • The majority of the participants, when they discovered that the map consumed a large amount of data, they decided to switch it off. They stated that they were comfortable by just knowing the minutes left for the next bus and that they did not want to consume that much data for seeing the map.
  • The use of the blue accent color was confusing some participants, as it was making them confuse some information, such as the “next buses arriving” for buttons.
  • They pointed that the schedule needed to include the different times depending on the days of the week, as the schedule differs depending on those.
  • The schedule icon was not intuitive enough and was located in a strange spot.
  • I wanted to understand which was the page most used for participants. They confirmed that the page with the favorite buses and stops was the one that they would use the most , as on a regular basis, they normally take the same buses from the same stops.
  • The buttons were not very intuitive for the users because they had the same color as the background. Also, both the clickable and non-clickable boxes had the same style, which created confusion.

― Visual Design

Defining the look and feel of the app

I wanted to give a new and more updated feel for this app, but at the same time, I tried to respect some of the visual elements and branding from the original app.

Choosing the blue from the original app, and incorporating orange as an accent color

The blue I used as the primary color was the one from the logo of the original app. Additionally, I decided to add orange as an accent color which, not only is the complementary color of the blue, but also was inspired from the orange bus signs that displays the route number. Finally, the background color is a light blue, that matches the drop-shadows of the buttons.

Vancouver Bus Tracker redesign color palettte

Enhancing simplicity and modernism through the typeface

The font I decided to use was Open Sans. I believe this was a suitable font for this app, as it is a clean modern typeface that offers an easy readability for small text.

Open Sans Panagram

Buttons style inspired on the original app to make them intuitive

To make the buttons more intuitive I gave them a drop shadow inspired by the original Vancouver Bus Tracker app (see image), which showed a drop shadow across the entire screen when an element of a list was pressed.

Button design
Screen of the original app showing shadows of selected button

― High Fidelity

Developing high fidelity wireframes

For developing the high fidelity wireframes, I made some adjustments based on the feedback obtained from the usability test conducted with the last iteration. Additionally, I added the typography, colors, and look that was decided to use for this redesign.

Adjustments for this iteration

  • Added a secondary menu navigation. On the search page, in order to present the different search options at the same level of importance, I decided to place them in a secondary menu located on top of the page. On the other hand, the primary menu (favorites / search / plan trip) was moved at the bottom of the page.
  • I made the Bus Schedule and Map buttons more intuitive. This was done by supporting the icon with a label.
  • Added the option to navigate between different schedules depending on the date of the week.
  • Added orange as an accent color to improve usability.
  • Made changes to make the app suitable for iOS. I decided to make this project for iOS, as I discovered it could serve a larger market, as studies show that more people use iOS than Android in Canada.
  • Improved the aesthetics.
  • Removed the real-time map at the bus stop page, as based on the usability test, it seem not to be needed and wanted due to the high data consumption it required.
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup
Vancouver Bus Tracker redesign high fidelity mockup

― The Solution

Favourite routes

As a difference from the original product, I made this page the first one appearing when opening the app, as it seemed to be the one that most people use on a daily basis. As a consequence, users could access the information of their most-used buses with only one click. Additionally, in this video, you can see how to access the bus schedule, which allows users to plan future trips, as well as it presents them with an alternative in case of having issues seeing the “next buses arriving” times due to having limited data or wifi.

Search by Stop Number

This function allows users to search for the bus information by stop number. The most updated feature from the original app is that users will be able to see the next buses arriving at that stop, without the need of going an extra step to the specific bus information page.

Search by Route

This is a totally new search option, which gives users more flexibility in searching for the stop when not knowing the stop number. The user can either select a stop from the list, or they can also open the route map and select their preferred stop from there

Search by Location

Users can search by location when looking for nearby bus stops. The main difference between this function and the one in the original app is that this one provides the information on which buses uses the stop selected from the same page, so users don’t need to navigate to a separate page to find out if the selected bus stop is the one they were searching for.

Thanks for reading!

Want to more? Check out my other projects!