Product Design + User Experience
capmetro.png

Cap Metro

CapMetro: Redesigning Route Searching

 
 
 

Cap Metro Route Searching

A route searching redesign for the CapMetro mobile app.

Role: UX / Interaction Designer

Team: Solo

Client: Personal Project

Tools: Sketch App, InVision, Flinto

capmetro.png
 
 

Project Overview

Capmetro is Austin’s provider for public transportation. As a regular rider, I’ve become a target user for all the different services it offers. The mobile app that accompanies these services is good, but it could be better. This project is my attempt to improve it.

 
 
 

 

Finding the problem

User Interviews

I came into this project exploring possible pain points for riders that I could design around. I conducted 6 interviews with daily commuters at a park & ride to begin this discovery process.

  1. Users preferred searching for routes instead of using the Trip Planner.

  2. Users had a low understanding of the bus system outside of their personal routes.

  3. Routes searching was a popular method to solve most difficulties when riding.

 
IMG_20180123_125553.jpg
I never really used the Trip Planner so I would just look up the specific bus route schedule, find the timestamp locations nearest to me and then try to estimate it.
— Capmetro rider
 
 
 

Task Analysis

Next, I asked riders to show me how they used the app to identify where the interface had trouble communicating it’s use.

  1. Screens require a heavy cognitive load of information for the rider to remember. 

  2. Screens simulate the desktop experience causing awkward navigations on mobile.

  3. Users had trouble distinguishing one route from another.

 

Current Route Searching Screens

One Screen, Several Tasks

 
 
 

 
 

Core Experience

A route filter interaction that helps users quickly find routes that are important to them.

 
 

 
 

Designing the solution

Flow structure

The design has a flow structure. Users move from broad to specific. Service -> Routes -> Individual schedules. If you aren't using route searching as a tool for discovery, you can still find the route you need much quicker than you could before.

 
cap.png
Screen Shot 2018-05-28 at 7.26.39 PM.png
Screen Shot 2018-05-28 at 7.15.22 PM.png
 
 
 
 

Usability Tests

I ask participants to test the design. I tested speed and system knowledge. I noticed the following pain-points in the design. I added in contextual notes for anyone confused by a route or service.

  1. Users needed more clarification of Cap Metro services.

  2. Users were confused by route sorting function.

 
skethes.jpg
Untitled.png
real1.jpg
real2.jpg
real3.jpg
 
 
 

Route Filter Interaction

The filter interaction allows users to filter all routes by 5 metrics, drastically decreasing the number routes. I wanted to emphasize the route sorting dynamic through animation so riders could intuitively understand that they are refining the 100+ routes available down to only the ones relevant to their current situation.

 
cap1.png
Untitled-1.gif
cap3.png
 
 
Untitled-3.jpg
 
 

 
 

Reflection

This personal project was a good blend of user research and a concerted approach to interaction. If I were to do this project again, I would take more standardized approach to the design. Some of my earlier designs don’t take as much consideration for the development progress as they should.