Product Design + User Experience

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


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.

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.

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.


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.




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.