Context

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.

Problem

Metro employees routinely survey riders throughout the system—so with clipboards (and now mobile phones) in hand, I tasked the surveyors with website-related usability questions.

🧪 Rider survey takeaways:

  • Users want quick access to  3 core transit tools: Trip Planner, Schedules, and Service 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
  • Perhaps the most obvious one—the old website was not mobile friendly at all. Text drop down menus were to cumbersome to use on mobile devices, and needed a more touch friendly solution... doh! 🤦

🎯 Resulting biz goal:

Build a mobile-friendly website with quick access to core transit rider webs tools

Process

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.

Metro employees conducting rider surveys on paper actually took out mobile phones and let users test the navbar design—feedback was largely positive and supported our design direction.

Solution

Final DesignWith the underlying design decisions validated, I implemented a solution that fit within the existing design system/guidelines of the website.

📈 Results:
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.

Website analytics revealed...

  • a 35% increase in sessions overall
  • and a bounce rate reduction of -37%.
  • a significant increase in sessions from a mobile device