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.

Research

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.

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.

Solution

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 😢

Reflection

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.)