Metro St. Louis Website

Ride Tools Widget

The Problem

After a relatively well received website redesign, Metro riders were still unsatisfied with complexity of the website. It was still too difficult to navigate, especially for riders on the go.

How did we know this? One of my favorite aspects of working at Metro was that the entire organization fully embraced research and data driven decisions. They routinely engaged in rider surveys, onto which I was able to piggy back and ask website usability questions.


With the problem defined, I wanted to find out exactly what parts of the website needed to quickly find, and why they were having trouble navigating there with the current solution.

User research through additional rider surveys questions revealed 3 core transit tools: Trip Planner, Schedules, and Rider Alerts.

While these tools were accessible through the top level navigation of the website, they took precious seconds that could mean missing a a bus or train. The surveys also revealed some key insights:

  • Text drop down menus were to cumbersome to use on mobile devices, and needed a more touch friendly solution.
  • Users that inadverdently entered the website through a subpage or had navigated deep into the page content needed a way to quickly get to the core tools from anywhere on the website.

Explorations, Prototypes, and Testing

I generated quick wireframes to test my assumptions about placement and hierarchy. On devices with larger screens (desktop) the logical placement for the tools was just below the top header.

A simple, lof-fi wireframe image showing a "tools" tab below the main navigational menu of a website

The mobile version of the site was more crucial in solving the initial problem, so I decided to generate some mockups and test my assumptions with actual users.

Despite my initial bias for the one-hand friendly floating action buttons at the bottom of the page, riders who were surveyed indicated a preference for the button at the top of the screen in the header. The overall feedback was largely positive and supported our design direction.

Just a note... due to limitations of the existing rider survey program, users were only able to see static screenshots of the rider tool widget. I believe a working prototype would have favored more ergonic bottom FAB button iteration.


With the underlying design decisions validated, I implemented a solution that fit within the existing design system/guidelines of the website. The widget is still in use on the metro website, although at last glance it appears to have deviated from the initial focus and is being used to promote parts of the other parts of the website 😢

Animated prototype of the metro st. louis website


Follow up rider surveys indicated that riders felt more confident they could successfully navigate the transit system thanks to the new rider tools widget, especially those accessing the website from a mobile device.

Analytics indicate a significant increase in sessions from a mobile device, a 35% increase in sessions overall, and a bounce rate reduction of -37% (where a visitor leaves the site from the entrance page with no interaction.)

← See more work