top of page
Finished floor tea pic.jpg

Go, Go Buffalo

Bus App Design
Image by ROBIN WORRALL

Summary: Created a simple, easy to use app to help riders make informed decisions about their trips for a new and improved bus service.

Roles and Responsibilities

Problem

What are we making

Bus app to organize and display the major changes to bus system a small midwest city.

What does it need to do

  • Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop

  • Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop

  • Allow riders to select one of seven bus lines to see a list of its future arrival times at the Washington & State bus stop

Audience

Who are we making this for

Adults over the age of 18 who use the bus. People who rely on their phones for information and travel.

Research

Research Methods

Competitor Analysis

User Surveys

User Interviews

Journey Map

User Flows

Usability Testing

Competitor Analysis
Moovit_Logo-primary.png
Citymapper_logo.png

Moovit

  • Strengths: You can place your home and work without making an account

. Sync Calendar.

  • Weaknesses: Pushy with some of its alerts, ads, and content
. Overwhelming, many lists with few breaks.

  • Opportunities: Learn from this app, offer similar things like nearby stops unprompted.

    Customizable content such as locations and services
. Figure out a way to offer service and content without pushy alerts. How to make reminders and alerts without annoying customers.

  • Threats: Established, hard to convince users to try a new app
. Easy to use.

DC Metro and Bus

  • Strengths: Detailed alerts. Offers a good navigation menu at the bottom, in sight and within reach if you wanted to change from bus to trollies to subways.

  • Weaknesses: Large, annoying ads. Not available in the city.

  • Opportunities: Design around ads better.

  • Threats: Very detailed for the area it serves.

Citymapper

  • Strengths: Simple. easy buttons that offers fast services like 'take me home', save your work, and save favorite places. Offers alerts and updates about delays for your rides. Offers more travel options outside of bus rides.

  • Weaknesses: Limited coverage, not available in the city. Pay for lock screen alerts.

  • Opportunities: Offer more without a paywall
. Be more open to expansion, or be more detailed if it is going to be exclusively for one city
. Learn from how well this is designed.

  • Threats: Robust system, well designed. Fierce competitor if it becomes available in our area.

transit-logotype_iOS-dark.png
transitstoplogo.jpg
Google-Maps-logo-500x293.png

Transit

  • Strengths: Dark mode
 option, Connected to Lyft, and offering an alternative is very considerate. I like the option of being able to scroll right or left

  • Weaknesses: Icons Jiggle- nice to get attention, comes off as annoying. Issues with KCRide at the time, unsure whether on the app's end or the user's end. Colors are confusing, two different shades of red labeling information with no indicator what they mean.

  • Opportunities: Learn from this app, offer similar things like nearby stops unprompted.
 Customizable content such as locations and services
. Figure out a way to offer service and content without pushy alerts. How to make reminders and alerts without annoying customers.

  • Threats: Established
. Easy to use

Transit Stop

  • + Additional functions like shaking phone to refresh app, and launching app on a stop you have saved

  • - Cannot select stops in the midwest city

  • - Strange UI, not intuitive

  • - Confusing call to actions

Google Maps

  • Strengths: Lots of transit opportunities
. Big map, offers many locations. Offers accessibility like dark mode.

  • Weaknesses: Compared to what I am doing, this needs extra steps to find the bus stop
. No information on the bus itself or a schedule to look at
. This is not as much of a niche transportation app as the other options.

  • Opportunities: Be more focused on transport and or buses.

  • Threats: Very detailed, a lot of relevant information available.

User Surveys and User Interviews

User surveys were launched into several communities located in the midwest over facebook and discord as well as a pool of individuals selected for testing. Following are the results of the survey-

  • Only 47.6% said they used their local bus system

  • 38.5% said they used the bus to commute to work, 15% said to go shopping

  • 61% stated they prefered to use an app to track their bus instead of printed material or signage at the stops

  • 47% said they wanted to arrive 5 minutes before the bus arrived, 47% said they wanted to be there 10 minutes ahead of time and the remaining 6% said 15 minutes

  • The users said that knowing the Distance the bus is currently from your bus stop was the most valuable information, followed by What time will the next bus arrive at your chosen bus stop

video1841010811_Moment.jpg
video1572814156_Moment.jpg

Interviewing some of the users who took the survey

Some volunteers from the survey were interviewed to gather more information for the app. With a majority of the survey takers expression they did not often use a bus, I focused the questioning around apps people use to schedule rides in general. I asked about how the users felt about them and what worked in the app's favor. There were also questions about what information people needed to be confident about their trip and what they looked for to make their decisions.

Summary-

My research revealed that the users wanted information to be easy to find and the UI to be intuitive. They will likely use this on the go, so hiding features behind menus will make the app undesirable. With this, I decided to use as few pages as possible with a bus tracking feature to help riders calculate the time they have before their bus arrives.

Persona

From the survey, we found out that 52% of the users were between the ages of 26 to 35, 65% identified as female, and 70% stated they were single. With these demographics, I created a persona-

reginafosterbusapp.png

Regina Foster

Single - 29 - Female - Lives and works in Kansas City, KS

Goals / Needs

  • To have reliable schedules so she can keep her appointments and get to work on time

  • To be alerted if her bus is not available so she can adjust her plans

  • To make the process as quick and painless as possible so she can focus on her workday

Journeymap.png

A Journey Map was created to help understand the process of researching a bus ride.

empathy map.png

An Empathy Map followed to help hone in on the user's needs.

Process

User Stories

  1. 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.
     

  2. 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.
     

  3. 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.

User Flow
flow1.2.png
Flow2.png
FLow3.png
Site Map

In interest of the MVP, I focused first on the most relevant pages.

site map.png
Wireframe Sketches
sketchwire1.png
sketchwire2.png
sketchwire3.png
sketchwire4.png
sketchwire5.png
Wireframes and Clickable Prototype
wire2.png
wire3.png
wire4.png
wire5.png

Originally when the flows and wireframes were created, there was an idea that all three flows would be resolved in just one flow of wireframes. To offer all relevant data on a few set pages without making the app too complicated. But when testing the first clickable prototype, there was an issue with the users following the flow on the expected path, so changes were made to help facilitate more than one solution to the goal. That meant more pages needed to be added to the set.

There was also suggestions to augment the design of the app in general to look more realistic. After some more research and ideation, the next set of wire frames were created.

wires1.png
wires2.png
wires3.png
wires4.png
wires5.png
wires6.png

With the wireframes done, I moved onto adding branding to the design and creating a final prototype.

Branding

bison moodboard.png
bison logo.png

The city I worked with is known mostly for their sports teams, but I wanted to redefine what comes to mind. Blue is used in a lot of the city's signage, advertisements, and it is the main color of Kansas' flag, so I started working with the idea of a dark mode that was more blue toned than charcoal. Adding a gold yellow was a great contrast for call-to-actions and a great pop of color!

gogologo.png

The American Bison, or the Buffalo, is Kansas' state animal. It also happened to look like a vehicle, so I played with a few drawings of it as a car or a bus. The original name I came up with for the app was 'Git, Bison', but after some reviewing and thinking, it came off as more aggressive than I liked. It was actually when I was talking to friends about trying to rhyme the word buffalo when I realized go did.

Thus, Go, Go Buffalo was born.

Usability Testing

I tested my prototype with five different individuals and my mentor. During the process of testing, several users brought up positive features as well as some concerns about the visual design and how it affected readability. Here are a few of the major changes I made based on their feedback.

Version 1
wireit1v1.png
wireit1v2.png

Three out of five testers had an issue interpreting the 'you are here' icon, so it was traded for a more universally recognized location icon.

Version 2
wireit2v1.png
wireit2v2.png

Two testers and my mentor mentioned the light grey gradient of the upcoming bus stops was too bright compared to the rest of the color pallet and it made it difficult to read some of the content. So in the next version, I made the colors more subtle and removed the bright stroke in between the stops.

Version 3
wireit3v1.png
wireit3v2.png

All of the testers were struggling with quickly reading information about the bus' statuses on the bus page. I added colors to this page to note statuses such as delayed, on time, and early. I tested these colors against a color blindness converter and made sure they were different enough to register between the different kinds of color blindness.

acc4.png
acc3.png
acc1.png
acc2.png

Final Prototype

proto6.png
proto7.png
proto4.png
proto5.png
proto2.png
proto3.png
proto1.png

Putting everything together, testing, and then finalizing the design brings us to this final prototype. Below is a clickable version, feel free to click through it. Enjoy!

Prottype

Conclusion

This exercise was a marathon of research, time, thought, and a lot of wide-eyed hours watching Figma tutorials late into the night. But through this process, I gained a better understanding what it took to create an app from start to finish, and even then there is still so much more to do! I look forward to future progress and sharing it here as it develops.

Successes

From testing and reviews from my peers, a few of my successes were noted. The thought put into the branding was something I am especially proud of. Coming from a graphic design and an illustration background, it was fun to be able to put so much more thought and consideration into the branding.

Lessons Learned

  • How to better use Figma and Prototyping

  • How to put my skills to use during the process of designing an app

  • How to design an app up to development

  • Learned the UX/UI process

Next Steps

After the second round of Usability Testing, a few things were brought to my attention and I will do research on now to move forward with the-

  • Use Bus Stations instead of Bus Stops

  • Make the icons for the bus trackers smaller

  • When indicating a delay, mention how late is the delay

  • Change the bus stop icons from dots to a station icon

  • Label nearby stations

​

​

work page.jpg
bottom of page