RODA: Bus Tracker App

RODA

Roda is a mobile app that allows users to track bus routes in real-time.

 

Project Overview

Challenge

A city of the midwest has a growing transit system that has expanded to 7 bus routes. This transit system serves many commuters who have complained that buses are never on time. The city has developed a way to find out the exact time a bus will arrive at each stop but is not sure how to share this information with its user base. My challenge is to create an app that will let users know what bus is arriving at each stop and when. 

Solution

A prototype in the form of a bus tracker app was created which allows users to figure out when and where a bus is arriving in real-time. 

Role

User Research

UX Design

UI Design

Timeline

4 Weeks

Audience

Bus riders are the primary audience. According the user research conducted during this project, the primary user was also likey to be female and between the ages 19 - 24.

Plan A Trip

Users are able to find the most optimal bus route to their destination.

Schedule

Users are able to find out when a bus will arrive at each stop along its route.

 

Discovery & Research

The first phase in designing a solution involved getting to know my client’s user base. I began my user research by creating a survey about travel using the bus transit system in order to obtain statistical data about the demographics, attitudes, and behaviours of bus riders. This survey was intended for anyone who uses the bus and lives in a metropolitan area. The data gathered from this quantitative research method helped me discover and narrow down my target audience. 

I surveyed 25 participants who use public transportation

User research 3.png
User research 2.jpg

Qualitative Research

I Interviewed five people who fit the target audience as described by the previously mentioned statistics. During these interviews I asked questions aimed at understanding the current experiences people had with riding the bus and their reasons for using public transportation.

Insight #1: Most users are daily commuters with a set routine. This means they do not use navigation apps to travel to new destinations, these apps are mainly used to find up-to-date traffic information with daily commutes. Real-time traffic updates are a crucial feature to add to my design. Only a small portion of commuters use the bus for recreation or to travel to new locations. This smaller group of adventurous commuters will be considered secondary users. These secondary users need a feature that can use available bus routes in order to provide directions to new destinations.

Insight #2: All participants have an iPhone. Every participant I interviewed had an iPhone and had a preference for iPhones over other mobile devices. This insight made realise that I forgot to ask what mobile device users prefer to use in my survey. With this newfound information I decided that I study Apple’s design system as a guide for the visual design of my app.

Insight #3: Google Maps is the most preferred navigation app which was similar to the findings from my survey. Most users have a positive and favourable view of this app. I knew I had to make a  analysis on this app in order to figure out if there were any design patterns or conventions I could incorporate into my design. 

User Personas

Persona-1.jpg
Persona.jpg

Competitive Analysis

I analyzed other transit apps on the market in order to found out how they solved similar problems such as how to obtain arrival times and directions. After some competitive analysis it became clear that the user flow for obtaining arrival times and directions had a similar set of subtasks across most apps. The user flow for obtaining directions followed these steps:

 

  1. User selects the “Search” CTA button from the home screen

  2. User enters a destination address

  3. User receives a list of suggested bus routes & their arrival times

  4. User selects a route & receives directions to their destination

Competative Analysis 3.png
Competative Analysis 2.png

Ideation

 
IMG_9470.jpeg
IMG_9472.jpeg
IMG_9471.jpeg

Crazy 8's sketch exercise

User Stories

As a rider, I want to easily obtain routes to my destination so I can figure out the most time-efficient path to take.

As a rider, I want to easily obtain the schedule of a bus line in order to know where it is going and when it will arrive.

As a rider, I want to know what bus lines are approaching my current bus stop in order to get on the correct bus.

User Flows

Low-Fidelity Wireframes

 

Brand Identity

NYC’s subway system is an iconic example that comes mind when I think of public transportation. I decided to reference the subway signage seen throughout NYC in the design of my user interface. These subway signs used numbers as well as colors in order to help differentiate between different bus routes. Signs also used a Sans Serif Typeface which was clear and easy to read from a distance. Another classic symbol of public transportation embedded in American culture is the school bus. The color palette of my design was inspired by the colors of a school bus: Black & Yellow. The bright and cheery yellow is balanced by the more mature and formal black while also invoking a sense of nostalgia. 

Visual System

Visual Design 1.png
Typography.png
Sketch to Mockup.jpg

Wireframe Progression

Prototype

At this point in the design process now had fully-fleshed out mockups I could turn in to a prototype. Using figma, I created a prototype that was ready to be tested out with the apps target audience. This part in the process was crucuial in order to validate the design solution and also to figure out if there was any part in the journey users found confusing.

 
cray_arrange 1.png

Usability Testing

I conducted remote usability testing with 5 participants. My tests focused on planning a trip, figuring out a bus schedule, and finding arrival times at a bus stop.

 

Key Scenarios

  • Let’s pretend you are at bus stop but you are not sure what buses arrive at this stop. How would you figure out arrival times for this stop?

  • How would you search for the best route to take to a destination?

  • How would you figure out the schedule or route of a bus line?

Feedback & Insights

Problem #1: Users had trouble reading the bus route icons

Solution: This accessibility issue was an oversight that was fortunately revised. I analyzed the contrast ratio for each icon and found out they all failed to the meet the standards as stated by the Web Content Accessibility Guidelines (WCAG). I changed the text color to black and adjusted the background color for each icon to a contrast ratio that successfully met WCAG standards.

Usability Feedback #1.jpg

Problem #2: Users were unable to differentiate between their current location and the destination icons on the map.

Solution: Across all navigation apps the users current location was represent by a glowing blue dot with a white outline. I decided to also follow the established convention for this icon . I also color coded each bus route according to its signature color in order to differentiate between different lines.

Usability Feedback #3.png
Usability Feedback #3 References.png

Problem #3: Users were unable to differentiate between their current location and their destination address.

Solution: I decided to label the start and end locations and add icons in order to differentiate between the two location buttons. I analyzed how other apps managed to label the two locations buttons and used their designs as starting points. I drew a few iterations follow-up with my participants in order to choose the variation that was most favorable.

Usability Feedback #2 Iterations.png
Usability Feedback #2.png
 

Retrospective

Throughout this design sprint I learned about the importance focusing on the most important features in order to build a minimum viable product that can be tested with a target audience. For example, during my user interviews I found out that overcrowding was a common frustration for many commuters. Allowing users to find out if a bus is full would greatly improve the bus ride experience for many users. Due to time constraints I was forced let go of designing this feature and narrow my design down to 3 vital task flows.

 

This project helped me understand it's ok to follow conventions. Going against design conventions can also lead to designs that go against established mental models which can lead to more confusion amongst users. I now understand the importance of component design and it's contribution to completing this project in a time-effective manner. By creating a set of reusable building blocks I was able to quickly generate a variety of mock-ups while maintaining visual consistency. 

Let's Talk!

Thanks for submitting!