Commuter

Overview

My client was the transportation agency for a midsize metropolitan area in the Midwest. The city has a network of public buses. They currently list the expected bus schedule on their website and post it at each bus stop.

However, if you have ever used a public bus, you know that expected bus times are rarely accurate, as things like traffic, the need for longer stops to assist passengers using wheelchairs, or taking a bus out of service for maintenance can impact the schedule.

— Scope:

• Tracking that allows for a precise time the bus will arrive at the Washington & State bus stop

• See each of the seven bus lines through the Washington & State bus stop and see the list of all future arrival times

• The design must be intuitive and accessible for the various people that will be using the bus system and also allow for easy access to each bus that comes through the station 

In addition to the requirements from the client, I found through user research that users would like to be able to save their favorite locations and bus routes and be able to see directions for how to get from point A to point B.

— Constraints

• Time: 2 weeks

• Budget: There was no budget for the project, which meant I had to be resourceful throughout the entire project, from the survey to recruiting users for testing.

Problem

Due to expansion, numerous bus routes have been recently added. Many of those routes stop at the same bus stop and 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. Riders are currently complaining the most about the bus stop at Washington and State, which is served by seven bus lines.

Solution

A mobile app that allows commuters to see the entire bus schedule, with stations, stops, and real-time bus tracking.

Step-by-Step Directions

The app allows for commuters to input an address and see directions for how to get there.

Times

The app allows for users to select different times and see when the bus will then at arrive at each stop.

Research

Competitive Analysis 

I began the project by looking at other city transit apps that currently exist to get an understanding of what people are doing well and what can be improved. 

I found that: 

• Both apps offer a multitude of different route options, including Lyft and Uber, which could be an overload of information

• Too many features could be confusing to the user

• Not available everywhere

Therefore, Commuter has the opportunity to create an app that would tailor to the needs of the commuters within this midwest city by offering a user-friendly and efficient city transit app.

Survey

I created a survey through Google Forms and deployed the survey utilizing Facebook, Reddit, and Slack to gain insight into user behaviors, needs, and demographics. The survey allowed me to define the target audience and make decisions for features within the app.

After conducting the survey, I gathered and analyzed the data to summarize the findings.

— Key Findings: 

• 45% of transit users are 18-24

• 72.7% said they use bus/metro system to get to work and school

• 59.1% said they use the bus/metro for special events like festivals

• 89.7% said they would like the app to contain the schedule for all buses and stations

• 86.4% said they would like real-time bus/metro tracking

• 70% said they would like the option to save their favorite locations

• 34.5% said they would like step-by-step directions

Interviews

In the survey, I asked people if they would be willing to be contacted for further questions and I had 3 people say they would so I reached out to them and set up an in-person interview if they were nearby or utilized Zoom if they were elsewhere. I really wanted to understand some of their problems and hear in their own words what they thought would be beneficial in a city transit app.

During the interviews I learned that users would like to see these features the most: 

• Real-time bus tracking

• See the bus on the map so you know where it is

• Ability to see all buses that pass through each station and select a particular bus and see all of the times it will stop

• See directions from point A to point B

• Allow for saving of favorite buses and locations

Personas

After I had conducted all of the research I was able to create two personas that I believed gave insight into the user and would allow me to design the product with empathy. One looks at the user who uses the transit system every day, they live in the city and will utilize it for getting to and from work. The second focuses on someone who occasionally uses the transit system while on vacation or from time to time when necessary. 

User Stories

Following the research, I began thinking about user stories and the user journey by tapping into the psychology of the users. I created a sheet with possible tasks that users could complete in the app and labeling them in terms of importance to help guide the design process and keep me focused on the most important tasks.

User Journey

When thinking about the app I was creating, it seemed crucial that it be both usable for the traveler, while also meeting the needs of the everyday user. I created personas for both of these people, but when it came to the journey I really wanted to dive deeper into the mind of the traveler. I thought that if I focused on creating an app usable for someone who uses it semi-regularly then it would be useful for someone that uses it every day.

Design

I was able to wrap up with the research portion and take everything I had learned about the user to begin designing the product. But before diving into the screen design I wanted to figure out how the user would flow through the app, so I created a user flow to guide me through page design.

User Flow

Log In/Sign Up Flow

Search Flow

Branding

I finished designing the wireframes and moved onto branding. It was time to pick a name, choose colors, fonts, and create a logo for the application. 

I decided on the name Commuter because first off the app is for commuting and second, there were no other apps that had taken the name. Again, I started with sketching before moving into Adobe to create the real logo. I created two different logos before choosing the final design.

Next, I chose colors and after doing some research on color theory with the idea of my application in mind I came up with the following colors - 

I chose green as the main color because it reminds us of the environment and using the transit system is something that is more environmentally friendly than driving our cars.

I chose blue as my secondary because blue inspires confidence and security, both things you should feel when using the transit system. Additionally, it’s the color of the sky and reminds us of spending time outside. 

Finally, I chose black and white as the background and text color because it allows for the best contrast and can easily be read by anyone, especially those with color blindness or other impairments. 

I chose fonts that were websafe and easy to read in order to allow for accessibility for everyone. I chose Neue Haas Grotesk for the title and subtitles and Roboto as the body font.

Accessibility

I wanted to ensure that the application was accessible to everyone, even those with visual impairments, and to ensure this I checked the contrast of colors against each other to ensure they met AAA Normal across the board.

Evaluate

Usability Testing

I conducted user testing with two users.

The goal was: 

• Get data from users about Commuter App

• Find out if the users liked the look and feel of the app

• Measure success with login/sign up, finding bus times, and finding/following directions

• Discover user difficulties when using the app

• Suggest recommendations for improvement

— Key Findings:

• Why the need to sign up/login before using the app?

• The home screen wasn’t super clear and that maybe I could make it more easily understood or more usable for anyone

• The users liked the overall feel of the app including the color, typography, and layout

• The other confusing part was the search screen where users thought the items were things in the search results, while I intended them to be favorites at the top

Outcomes and Results 

The result is an application that provides a variety of users the information they need in order to navigate the city transit system.

Recommendations for Commuter 2.0

• Wheelchair accessibility option for users to see only transit that allows for wheelchair access

• Alternative route options such as walking, biking, or rideshare options to allow for the user to use Commuter for all their route needs

• Conduct further research for other possible use cases

Lessons

• User testing is vital at every step of the design process and allows us to gauge whether a product or feature is usable

• Learned the benefits of creating components, using constraints, and setting up my text styles & colors within Figma