Loading

Capmetro: Bus Riding App

Solving a simple problem that's far too complicated

Introduction

When I first arrived in Austin, I didn't own a car. Or a bike. Or a skateboard. So the extent of my dependency on my legs and the glorious bus system across the country was greater than the Milky Way.

Now, having used an amazing bus tracking app at Purdue (CityBus), I was expecting the same simplicity and ease of use when I arrived in Austin- the land of impeccable typography and tacos. Imagine my dissappointment when I opened up the city's CapMetro app and was greated by graphics that were 5 years too old and a user experience that turned my hair white.

This review is of a version from 2015. I got myself a license , and a car, and have been blisfully devoid of bus usage since.

Goals

  • Make tracking simpler
  • Let user control which buses to track
  • Provide clearer insight in to location of bus + user

The Current UX

The most frequently used area of the CapMetro app is the "Next Departure" section. It helps by providing the arrival/departure information..Except only if you know your bus route OR the stop ID of where you're at or trying to go to.

Assuming the user knows the bus route or stop ID, the process of obtaining the relevant information is a three step process:

Step 1: Select the bus stop or stop ID.

Step 2: Select north or south bound.

Step 3: Select the stop.

Once these selections have been made, the app will spit out three closest times, a clunky map that may or may not work and is so small, that it makes it extremely difficult to navigate.

Summary of Problems

Complicated 3-step process that relies too much on user being well informed about geographical directions, street names, locations, etc.

1. Prevents users from navigating app to relevant information quickly.

2. Relies heavily on previous user knowledge.

3. Uses inefficient data-sorting methods like check boxes and spin wheels.

4. Map usually shows ALL buses on a route and not the few immediate closest one.

5. Map doesn’t inform user of their location.

6. Map is difficult to handle- zooming in and out, finding street names, etc. is made difficult on a small device because of its small size.

The Solution

The key problems, aside from the over all look of the app, is how convulated the process for finding information is. My solution focuses on walking the user through the steps on different screens instead of cramming it in one tight space.

Step 01

The “Next Departure” option in the main nav leads to this page where route can be selected. This menu is re-triggered as an overlay when user needs to change routes displayed by tapping the “Select” option displayed on the top right part of the screen.

Step 02

The full route is displayed depending on the route selection. In this case, route 7. Real-time bus trackers are shown for the first time on this page. Pinch to zoom on this page allows more details such as stop locations and street names to appear.

Step 03

Once zoomed in, the user can choose from the displayed bus stops. The light blue pulsing dot represents the user’s location, giving a quick measure of proximity to bus stops. Bus trackers are displayed if they fall within the route detail that shows at current level of zoom. Stop details consisting of all bus routes that service the selected stop, departure times of buses in the next 45 minutes, stop ID and name and direction of route show in an overlay speech bubble like box.