herodots
herodots

City Bus

A case study

The process of designing a bus-tracking app for commuters.

City_hero City_hero

My Role:

I led the ideation, strategy and design for the mobile application.

Duration:

2 weeks

Problem

I was tasked with helping create a mobile app called City Bus, an application operated by the local city transit system that serves thousands of commuters in a large city.

Transit officials have identified a problem they would like to solve. Due to expansion, numerous bus routes have been recently added, and many of those routes stop at the same bus stop. Riders want to know what the next arriving bus is and how much time they have to get to the bus stop. Merely rushing to the stop when you see a bus coming no longer works because it might not be the bus the rider is expecting.

Solution

I created an app that would make commuting a lot easier because you know exactly when your bus is arriving.

City Bus lets you-

  • Set up favorites.
  • Live track buses.
  • Quickly see the schedule.
  • Sort buses based on the estimated time of arrival.
  • Get notified when your favorite bus is approaching.
  • Get notified if your bus is delayed or out fo order.
  • Get disembark notification.

herodots

My Process

The first step of the design process involved understanding the requirements and how competitors positioned themselves. The path to Idea Board consisted of detailed and careful user research, competitive analysis, user personas, user stories/flows, wireframes, mockups, branding, prototypes, and user testing – all with various iterations.

Our Process Our Process
herodots

User Survey

Nineteen participants took the online survey. My goal was to understand patterns, trends, and outliers.

The Competition

While many commuting apps from local to national and international, there are currently a few other main competitors with City Bus: Citymapper, Moovit, Google Maps, Transit, and Transit Stop.

Our opportunity

City Bus is a local application. So our most significant opportunity is to focus on the commuters. Lose the clutter of the larger navigational apps, and focus on the features that assist with the daily travel.

Low Fidelity Wireframes & User Tests

Next, I created the low-fidelity wireframes. I performed three user-tests. Two online and one in person.

before_after before_after
herodots

Hi-Fi Prototype

I used the data collected from the user tests to tweak the design. I updated the sketches for larger phone screens.

Colors and fonts were selected, keeping legibility and accessibility in mind. People are using this application while they're on the go — so they must be able to access all features with ease.

Checkout my clickable prototype:

prototype
hifi
hifi
hifi
hifi
hifi
hifi
hifi
hifi
herodots

Key Takeaways

1: Think small

The success of this design comes from the understanding that we don't need all the features provided by larger apps, like Google Maps,Citymapper, etc.

2: Update update update

As new devices flood the market- it is essential to keep up with it. Otherwise, the product will look dated and out of touch.

Recent work

ideaboard

Idea Board

Designing a note-taking app for visual thinkers.

CollegeGolf

College Golf 101

Motion graphics for a documentary series about the best college golfers in history.

Your Friend and Mine

An animated video explaining the key ingredient in the “Fleischmann’s Yeast.”