Metro Website

Context

Collaborating with a team of designers, writers, and engineers, I worked on the massive redesign of the St. Louis transit agency's website—focusing on responsive, user-centered design.

MY ROLE

THE TEAM

TIMELINE

Contributing ux designer: user research, site mapping, High-fidelity design mockups

Internal: 1 designer (me), 1 product manager, External: 1 designer, 2-3 web devs

Jan 2016— July 2017

Challenge

Old website and become bloated and presented users with too many options with little-to-now visual hierarchy... Where would you click first?

I initiated discovery efforts, including user surveys and identifying website issues/pain points

Discovery Process

Asking the right questions...

The team piggybacked onto the existing practice of rider surveys at Metro, gathering insights on the existing website and its pain points (there were many!)

📲 Mobile-focused reponsive design

⚠️ User-centered redesign of crucial web tools (such as outage alerts)

♿️ Large touch targets and accessible color choices/typography

User needs and business goals based on the surveys:

♿️ Large touch targets and accessible color choices/typography

The team opted to incorporate larger typography and generous touch targets for all crucial buttons/links.

Oversized buttons and icons allow users to easily navigate the site on the go.

Exploration of CTA button placement for mobile screen sizes.

⚠️ User-centered redesign of crucial web tools (such as outage alerts)

As the main advocate on the team for user/rider centered solutions, I designed and prototyped a Top-Level navigation widget that allowed users to easily access the tools the need, no matter what part of the website they were currently on...

Rider tools widget is omni-present CTA fixed to the top of the entire website.

In addition to the core navigation overhaul, I worked on an improved design for the rider alerts/outages component on the website...

User feedback after the launch suggested the alerts were far too long and difficult to comprehend. I opted for a design that focused on the key information of "When" and "Effected Stops".

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.

📈 Analytics results:

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

Rider-centered redesign of a public transit website