Metro Connect Bus Mobile App Design : I designed a bus app for a Transportation Agency in a midsize area in the Midwest. I was the sole designer on this project and have worked on the ideation, user-research, branding, visual design, wire framing, and prototyping for the project from start to finish.

Metro Connect Bus App

Project Overview:

Due to expansion, numerous bus routes have been recently added. Many of those routes stop at the same bus stop. Riders want to know when the next bus will arrive at each stop. They also want to know how much time they have to get to the bus stop.

Before the new routes were added, riders could simply rush to the stop when they saw a bus coming—but that doesn't work anymore because it might not be the bus that they're expecting. The city has developed a way to know how far away each bus is from a stop, but they aren't sure how to share that information with riders.

Riders are currently complaining the most about the bus stop at Washington and State, which is served by seven bus lines.

My Role

Solo UI/UX Designer and Researcher.

What I did:

  • Research Plan. *Competitive Analysis

  • User Interviews *Branding /Logo design

  • Empathy Mapping. *Journey Map,

  • Persona. *Site Map

  • User Flow. *Testing

  • Paper Wireframes. *Digital Wireframes

  • Low Fidelity Prototype *High Fidelity Prototype

Tools:

Figma

Canva

The Goal

My goal was to design a mobile app with the functionality to let the user see & know the specific location of the bus in real time and the time it will take for the bus to arrive at the station by adding google map. The user has the ability to narrow down the search to the specific bus route , bus number & arrival time. I added the status- to let the bus rider know if the bus will be delayed or on time - and the reason why its delayed. This will help the user decide if they need to take a taxi or wait for the next bus.

Research

Firstly , my research focused on the competition space in order to understand how other apps are addressing similar issues. The concept of bus apps with real time location trackers isn’t new but it does offer opportunities to improve apps and perfect the service to bus riders .One -on-one interviews helped me understand users’ journeys and specific issues the app would need to address.

I completed a competitive analysis of similar apps like DART Dallas app on the market to reveal important decisions and design directions. From the analysis I found out that Dart users pain point was the long intervals between buses. It could take an hour before another bus arrives and bus riders would not know the cause of the delay. One user complained of how the bus passed him by while waiting at the bus stop.

Dart bus and Moveit bus app

The competitive analysis helped me understand the strengths and weaknesses of these apps while finding the market opportunity for my Metro bus app. Users wanted to know the bus arrival times however that alone was not enough, they were also getting frustrated by the bus not keeping to the schedule

Design Process

Primary User Persona

I created two characters represented by the personas below who represent the client’s target user groups for the app.

Secondary Persona

Empathy Map

For a deeper understanding of user behaviors and frustrations influencing decisions I used empathy map.

Journey Map/ User Journey

I created a journey map based on the insights from user interviews in order to understand the pain points and challenges which users may encounter while

Information Architecture

In order to organize the content gathered, I created a user flow sketch, digital user flow and site map.

User Flow Sketch

User Flow

Site Map

Sketches

I sketched the concept on paper, brainstorming and sketching the frames, the first had lost of ideas however the second one was simplified

Lo-Fi Wireframes

Hi-Fi Wireframes

Hi-Fi Mockups

 

Usability Test

User Tests & Takeaways

With prototyping , usability test explained the step by step flow of how the app works and explained the transition and navigation from page to page .

2 tests were done remotely and 1 test in person. Purpose of the test was explained. Tools for testing: Figma app( Mock ups for test prototype) . Zoom for video communication

 

Key Takeaways

  • Navigation easy

  • Yellow logo was least liked -not sleek

  • Great color palette

  • Preferred the less noisy logo

  • Task required few steps

Prototype