Project overview

Created as a project for the Thinkful curriculum, the RTA bus transit app is a simple and friendly tool that bus riders can use to find the information they need.

Bus App

Tools

Google Workspace
Figma
‍

Roles

Project manager
Researcher
UX/UI designer

Timeline

April - May 2022

The problem

Due to the city's recent expansion, bus stops have been taking on additional bus lines, confusing riders about which bus was arriving. Riders complained the most about a bus stop at Washington & State, which services seven bus lines. Riders were unable to identify which bus to take and where it was headed.

The solution

Using the double-diamond design process, the RTA bus transit app was created in order to let its audience (bus riders) know information on the bus lines, the bus stops, directions, estimated times of arrival, and other details that help them plan out their commute, even for the busiest stop.

Discover

Research methods

Survey

Using Google Forms, I created a survey of twenty questions, asking about bus use and experience with using transit apps

Gained insight on key features and broader audience
Received twenty responses in about 48 hours
70% of participants were female, 65% were under 35, mostly students or office workers

Interviews

I interviewed two potential users:

Eli, a student in early 20s living in city who rarely uses a bus, opting for subways and map apps instead
Kevin, an office worker mid 30s living in suburbs who uses buses daily and is very reliant on transit apps

Competitive analysis

After looking at the competitor apps, I divided them into three groups:

Map apps
- Apps to get directions and information regardless of transportation method (e.g. Google Maps, Apple Maps, Waze)
- These generally include a lot of information that can be helpful to the user, especially those who may just want to drive themselves or walk
- However, users can be overwhelmed with the amount of information provided
General transit apps
- Apps to get directions and information for public transportation (e.g. moovit, Transit, CityMapper)
- These are good for travelers visiting a city using public transport
- Since these are third-party apps, they aren't very accurate
Corporation-specific transit apps
- Apps to get information for public transportation, made for and by a specific corporation (e.g. MYmta, DC Metro, Chicago Transit)
- These are generally accurate, since the information they share is their own information
- The UI tends to be clunkier, since are focused on sharing information rather than creating an enjoyable experience

User personas

Two personas were created to reflect the research done:

Define

User stories

After discovery, the following user stories were created:

As a bus rider, I want to know when my bus is arriving at the Washington & State bus stop, so I can calculate how much time I have to reach the bus stop.
As a bus rider, I want to know the next bus arriving at the Washington & State bus stop, so that I don’t rush to the bus stop if it is not my bus.
As a bus rider, I want the ability to view future arrival times for any of the seven bus lines (serving Washington & State), so that I know when my bus arrives.
As a bus rider, I want the ability to personalize my app so that I can easily and quickly prepare my bus trip.

User flow

To map out the user stories, a user flow was made.

Site map

I made a site map to convey how the screens would be organized and linked together in the app, focusing on the user need for the different types of informations (i.e. bus lines, bus stops, destination directions, and user settings).

Wireframes

Taking the user stories, user flow, and site map into consideration, I began to roughly sketch out on paper the different components that I wanted to include in the app, such as a search function, navigation bar, and map.

Then, using the initial sketches, I created high-fidelity wireframes in Figma.

Low-fidelity prototype

View the low-fidelity prototype >

Using the sketches and wireframes, I developed a low-fidelity prototype using the prototyping tool in Figma in order to figure out the interactions that I wanted the user to have with the interface, as well as any possible animations I wanted the UI to have.

Develop

Brand development

Although a company name wasn't provided in this project, I decided to name the company "Reliable Transportation Agency" and create a logo to make the design process more realistic.

In order to enhance the user experience, I decided to start considering the colors, mood, and typography that I wanted this app to have.

Looking at existing transit apps and branding for transportation agencies, I knew that I wanted the app to give off an impression of being simple, friendly, and reliable. I wanted the color scheme to consist mainly of primary colors in order to enhance that impression.

High-fidelity prototype

As I worked on the design for the app, I continued to iterate upon the low-fidelity prototype in order to create a smoother and more personalized user flow. I combined my brand development and prototype work to create a high-fidelity prototype.

In comparison to the low-fidelity prototype, this prototype includes more interactions that the user can make with the app. They can choose to create an account, as well as view more details on the map. Additionally, I added the color and typography scheme.

View the high-fidelity prototype >

Deliver

Usability tests

After finishing up on the first iteration of the high-fidelity prototype, I conducted usability tests with two testers. During those tests, I identified numerous items that needed to be improved or changed.
‍
The first item that I changed was the amount of information put on the stop details page, as the summary tile had more information.
‍
This allowed the user to get their information on one page, rather than being forced to switch back and forth between pages.

I also had to make a change to content to ensure a user would better understand a feature of the app. Before, I used the word 'Alerts' to signify that a user would be able to set alerts for a specific bus stop or bus line.

However, when I conducted usability testing, it appeared unclear to the user what the point of the alerts was and how to configure them.

So, I changed 'Alerts' to 'Favorites' to show to the user that they would be able to configure these alerts themselves, and I also included a tooltip for the user to learn how they would do that.

Final product

After one month of researching, designing, developing, and iterating, I finally came to the final version of the bus app!

View the final product >

Final thoughts

Overall, I learned a lot from my first UX design project with Thinkful.

In my typical day job, I work as a developer. So, it was interesting to see how everything is done on the other side of making a product.
‍
On the product side, it was a challenge to prioritize these stories and to stick to a timeline. It was also difficult to stay on task, making sure that I don't accidentally pull in other features.

Design-wise, I was surprised at how quickly I learned Figma. But, I still have to find ways to make the design process quicker, rather than get caught up in small details. I also have to learn more about best practices.

The most challenging part for me was conducting research. I found after conducting the survey and interviews that the questions I asked weren't as relevant as I initially thought. For my next interviews, I will definitely make sure to put more thought into the questions I ask.

I'm excited to continue on this journey and find more ways to balance different roles throughout the creation of a product.