Reducing commuter stress

Transit App

Tag for User Testing
Tag for UI/UX Design
Tag for UX Research

This mobile app helps people track the location of a local commuter shuttle offered by the Philadelphia Navy Yard. The campus resides in South Philadelphia and is siloed from SEPTA transportation.

The app’s usefulness is weighed down by a poor user experience, including menus hiding important information, minimal visual hierarchy and accessibility issues.

Big picture

What wasn’t working

The mobile app had a low findability of key information and a clunky user flow. Additionally, it lacked modern visual design and brand alignment.

What I did

As a study in UX design, I redesigned the app experience and interface while addressing usability issues. I also designed new features to support user needs.

Possible outcomes

If implemented, the updated product would encourage shuttle usage and draw more employees and visitors to the campus.

What’s not working

Evaluating the previous app experience with usability heuristics, I identified key issues with the design.

  1. Low visibility of buttons and small touchpoints

  2. Small text with low contrast

  3. No brand representation

  4. Not beginner-friendly

How might we make commuting as stress-free as possible?

Product redesign goals

Provide sense of control

Help commuters feel confident with timely and accurate information

Create single source of information

Reduce the need for multi-channel touchpoints to obtain shuttle information

Provide user autonomy and flexibility

Present users options to change their commute based on circumstances

Represent brand in app

Incorporate existing brand to enhance credibility and present a cohesive experience

What I did

Understanding the current experience

  • Spoke with shuttle riders about their commuting schedule and app usage

  • Referenced local travel forums and app reviews

  • Referenced first-hand observations and personal experience using the shuttle and app

I created a user persona and user journey map to empathize with the various user pain points.

  • Tracking the app is more valuable and time-sensitive in the morning, when users need to be at work by a certain time

  • Commuting is frustrating when it’s unpredictable and out of the users control

Wireframes and user flows

After identifying the necessary screens, I designed low-fi wireframes to explore the overall structure:

  • Matching common mobile UI pattern for better layout of information

  • Strengthening hierarchy to organize key information, such as Next to Arrive highlight at the top

  • Designing new screens

Before moving onto high-fidelity design, I showed the screens to a first-time user for feedback on first impressions and overall usability.

Solution highlights

Communications within the app

Users can now find schedules and alerts within the app, creating a single source of timely information

Customization for lower interaction cost

Users can favorite stops based on their routine, eliminating irrelevant information and making it faster to access the information they need

Memory cues to lower cognitive load

To make it easier to recognize stops, I reinforced each stop with a letter or number to make it easier to recognize stop names without recalling the intersection

UI design and prototyping

  • Used Navy Yard's marketing brand to inform the design choices, creating more cohesion across their channels

  • Created a UI kit to ensure consistent design choices across elements

  • Used colors to reinforce information and differentiate routes

Testing and user feedback

Using a clickable prototype, I showed the app to users for feedback. I asked them to walk me through how they would use the app on their morning and evening commute, sharing feedback as they went. I organized the feedback in a simple feedback grid and used the findings to make tweaks.

  • Users were somewhat unclear which elements were clickable

  • Users enjoyed the favorites routes feature