Concept

Foothill Transit Mobile App

Objective

Design a real-time mobile bus app that allows users to retrieve information seamlessly and intuitively.

Info

Role: UI/UX Designer
Timeframe: 2 weeks
Platform: Mobile App

Overview

The company

Foothill Transit is a public transportation agency that operates multiple fixed-route bus services to the San Gabriel and Pomona Valley communities in California. Although Foothill Valley has a website that lists their available bus routes, there is no official mobile app under their company name.

The challenge

Bus arrivals vary from their scheduled timetable, causing frustrations for bus goers for arriving too early or barely late to their bus stop. The goal was to find a way to improve retention rates of these commuters by providing transparent information to them through intuitive interfaces.

Research

Statistics

In order to get user-centered data, I took data from the “American Public Transportation Association’s” 2017 study on “Who Rides Public Transportation.”

User data

I conducted interviews with three people who have experience with taking the bus. I tasked the interviewees with navigating through the unofficial Foothill Transit apps while vocalizing any opinions they had. In addition to this, I gathered information from the app’s review page and noted common critiques about the app.

Readability

Text was crammed, taking a lot of thought process to distinguish what the information represents. The lack of visual hierarchy is seen through similar font sizes and colors, making everything look equally relevant.

Bus Scheduling

There was no way to plan trips ahead of time, meaning users could not look at later bus arrivals.

Map View

There is no indication of which direction the bus route goes when looking at a bus stop icon. Bus stops near the users’ location should indicate the number of bus lines that go through that stop as well as any incoming arrival times.

Personas

The statistical research and experience map helped with curating two personas that would reflect the typical users.

Design

Informational hierarchy

While creating the structure of the app, I thought of how I could set this bus app apart from the others. I realized that because I was dealing with only one bus agency, I could include features specifically catered for Foothill Transit such as company alerts, registering a bus pass, and more.

Low-fidelity wireframes

Drawing mockups with pen and pencil allow me to easily change any design choices that could be improved.

Branding

Color palette and font

UI Elements

Implementation

Features

Map location (on/off)

Users have the option to share their location to find the closest bus stop near them. Regardless of their choice, they can pinpoint a specific location and retrieve bus arrival times.

Bus routes

Users have the option to share their location to find the closest bus stop near them. Regardless of their choiTo get an overview of bus routes, users are able to find a bus line and view the bus route. The cards are draggable so users can compare each line.ce, they can pinpoint a specific location and retrieve bus arrival times.

Foothill Transit Sidebar

Information exclusive to the Foothill Transit agency is found through the hamburger side menu. Users would be able to register their TAP card, the Foothill Transit bus pass, to view their balance. Other options like FAQ, Help, and Contact Us were common navigation choices in case the user wants to know more about the company and bus system.

Final product

Insights

If I had more time...

  1. Interview users onsite at the bus stops to gain more understanding of user frustrations
  2. Do a competitive analysis to evaluate more strategies relative to this service
  3. A/B testing to gain more users and disprove personal biases
  4. In-depth development of branding to keep the format consistent

Reflection

Working on this project individually gave great perspective on designing for a real-time bus app.

I found myself enjoying the process of prototyping the UI aspect of the app so much that sometimes, I lost track of the main purpose of the project: to enhance user experience through intuitive interaction. Although the two go hand in hand, shifting focus on how a feature appears instead of why a feature should appear can overshadow the objective of the project.