Mock up of two iPhones with the Busily home screen and search page open

Busily

Case study for A live bus tracking app TO deliver CLEAR & ACCURATE information

MY ROLE

Researcher
UX Designer
UI Designer

TARGET

Aged 21-44
Bus riders

DELIVERABLES

Sketches
Wireframes
Prototypes

TOOLS

Figma
Figjam
Google Forms
Adobe Illustrator

The Challenge

Due to expansion in a mid-sized metropolitan area in the midwest, numerous bus routes have been recently added. With the addition of these new routes, bus stops now house multiple buses (whereas it used to be that one bus that would use one-stop). Riders can no longer look at an approaching bus and assume it is their bus.
The city has a way to know how far each bus is from a stop but they don’t know how to share that information with riders. The stop that receives the most complaints is at Washington and State, as it is served by seven bus lines.

Tasks

• Create a mobile application operated by a city transit system that serves thousands of commuters
• 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 want their information to be clear and easy to understand, as it can get confusing with so much info

Business Requirements

• 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 their future arrival times at the Washington & State bus stop

Solution

Build a mobile app that can deliver information about buses to users quickly and efficiently by focusing on how best to show that information to users.
Image of 3 mobile alerts showing Temporary Reroute planned info, 146 express info, and delayed bus info

Design Process

Magnifying glass icon
DISCOVER
Survey Interview
SWOT Analysis
Competitor Analysis
A pencil icon
DEFINE
User Persona
Empathy Map
Journey Map
Affinity Map
A lightbulb icon
IDEATE
Userflow
Site Map
Wireframes
Prototypes
A clipboard with checkmarks icon
TEST
Usability Testing
Iteration

Discover

Surveys

23 bus riders participated in the first survey after it was posted on SurveySwap, reddit, and a survey slack channel.

Discovered Demographics
•  72.7% of participants were aged 21-34 years old
•  59.1% of participants lived in an urban environment
•  68.2% use the bus to commute to work or school
Pie chart showing 54.5% of riders' mode of travel is not affected by the weather, 27.3% said yes the if the weather isn't ideal they would take a car (drive, rideshare, etc),. 13.6% said yes, if the weather is nice they would walk or bike. Pie chart shows 73.9% of users check their arrival time for their bus very often, 21.7% said somewhat often
Graph showing that 77.3% of rider's biggest concern when taking the bus is missing the bus. 31.8% said missing their stop was the next biggest concern. 27.3% said that getting on the wrong bus was their biggest concern. 9.1% said safety. 4.5 said forgetting an item on the bus. 4.5% also said that the bus being late was their biggest concern
Chart showing that 86.4% of users said that inaccurate arrival times was their biggest frustration. 59.1% said that no indication when the bus was delayed was the second highest rated frustration.

SECOND SURVEY

A few things I was mulling over
• How to address the confusion between different types of buses (express/non-express, day/night, etc)
• How do riders figure out which bus to get on (westbound, eastbound, etc)?
• How important is a GPS map to users and why or why not?

The second survey had 20 participants and was posted on reddit, surveyswap, and a slack channel for surveys. It focused on more convergent thinking and would inform a good deal of my decisions moving forward.
Pie chart saying that 60% of participaotns do not have any buses faved/saved in their transit apps with 15% having a few saved but didn't use them due to the nearby bus feature.Pie chart showing that 50% of users refer to their bus by the bus number and 15% said that they referred to their bus by the bus name. 30% said they used both name and number
Chart showing that on scale of 1-5 (one being not important at all and 5 being very important),  40% said 4 and 35% said 5.

Interviews

Conducting interviews provided a better perspective into some of the feelings of users. Due to the project brief being set in a metropolitan midwest area, 4 out of 5 interviewees are from Chicago.
"Buses running late or the app being completely wrong about the mere existence of a bus are really the only issues I could have." -  Brian, 32, writer"Work is going to make me prepare right away because if I miss one bus it can throw off my whole schedule. If it's to meet a friend and I’m already ready for the day I will prepare right before I leave" - Destiny, 26, waitress/student"One time the bus was too full, and with Covid and all, so I took another bus and was 20 minutes late to work." - Manny, 25, Visual designer
"Confusion about names of stops, or an alternate name for a stop. Also the difference between a regular route bus and an express that have my same stop on the route."- Josh, 33, bartender/artist"Definitely. Took the bus the wrong way. I think it's only happened in cities I'm not familiar with."- Nicole, 27, bee keeper

COMPETITIVE ANALYSIS

I compared 4 different apps in order to gain a better understanding of industry standards and to develop a strategy. Ventra, Google Maps, City Mapper, and Transit are all popular transit apps that are commonly used.

In order to create my competitive analysis, I started off making a SWOT analysis for each competing app and then compared the data. Here is an example of one of those SWOTs for Ventra App. With all of the collected data, I was able to compare and contrast features that I would also come to consider for my own app.
COMPETITIVE
ANALYSIS
SWOT
ANALYSIS
A competitive analysis chart showing features from ventra, google maps, transit, and city mapper apps

Define

USING DATA FROM RESEARCH TO DETERMINE CHALLENGES

Using the data collected from both the surveys and the interviews, I was able to create an affinity map. This held all the most important key findings and insights.
*Although many of the findings were important, I decided to focus on the 3 business requirements to create the most viable product without going out of scope. I have included a section for future features to possibly build-out as part of the second phase of this app.  
An affinity map showing insights collected from the survey and interviews.

user persona

With the collected data, the next step was user personas. One was for a 30-year-old male and the other was for a 26-year-old female. I decided to focus on building out Emily's journey, as her demographics fit slightly better with the survey's demographics and time was limited. 63.6% of survey takers identified as female with 72.7% of ages ranging from 21-34. Emily is a reflection of the targeted app users and was considered throughout the rest of the project.
A user persona of 26 year old woman named Emily. Shows her pain points, needs/expectations, and goals

User Journey

From Emily's empathy map I took her frustrations and applied them to a journey. In this scenario, Emily is waking up and planning her routine around the arrival time of her bus.
Emily's journey map. Scenario is Emily going through her morning routine and using an app to check the time for the bus. She then plans her morning around when she has to leave.

Ideate

user stories

It was important to remember and prioritize the key business requirements throughout all of the creativity. With user stories the focus is put on WHO, WHAT the goal is, and HOW many steps there are.

• 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 (high)

• 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 (high)

• 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 (high)

user flows

After completing the steps for the user stories, I had an idea of what pages I might need in order to complete the steps. During this phase, I continued to revisit and iterate previous models as I built out site maps and wireframes. Sometimes working through the whole process helps inform oversights in the beginning. Here are two earlier iterations of my user flow, followed by my third more finalized flow.
FIRST FLOW
SECOND FLOW
Changes made between the first user flow and the second version

• Added a decision to accept or deny permission to access location information before homepage
• Removed alternative search method (search by bus # or line) to focus on one flow at a time
• Added color to see differences quicker
• Added an option for if an item was not found in the database
User flow with orange decision diamonds. Shows two ways to find arrival times for a bus/bus stop.
Third User Flow
• Added back the search by bus # or line (data from the second survey showed that 50% of users refer to their bus by the number, 30% used the bus name, and 15% used both)
• Feedback -What would happen if location access was denied?
• Added more information about how the app would work when denied access

Site map

While the user flows did help organize which pages would be necessary, the way the information was laid out sometimes needed to be changed. During this time, I would jump back and forth between user flows and site maps to make edits.The first site map drawn up had too many extra features that I considered beyond the scope of a minimal viable product. Any feature that I thought was not in focus was marked in orange for consideration to remove. One of the biggest challenges for this project was to constantly edit down to what I considered the necessities.
A site map showing the homepage flowing into a map, search bar, nearby buses,  favs (highlighted in orange), schedules, and settings

User flow

My site map then lead to a more detailed version in the form of a wire flow.

Changes made from site map to wire flow:
• Got rid of arrival times in schedule since arrival times would be prevalent throughout the site
prevalent
• Removed Favs since data from the second survey showed that 60% of users did not have any buses faved in their transit apps
• Moved schedules to settings (not as important as live bus info)
• Added service updates page (to deliver all information to users)
• Separated alerts icon (delays) from updates/services (bell icon) as they serve different purposes
A user flow showing a more built out version of the site map.

Sketches

I started with the crazy 8’s method for fast idea churning and getting some ideas out there without getting too stuck. Each sketch took about a minute each. After the second survey I removed a lot of the features such as faved and schedules.
8 sketches in a notebook of the homepage screen

WIREFRAMES and feedback

I used Figma to build out my wireframes and focused on the heirarchy of text and spacing so that the app would be easy to read and understand what you were looking at. During this stage, I was able to start user testing and gain feedback.

Some of the feedback I received:
• Might want to consider using a nav bar at the bottom, so it’s easier to navigate
• Is itineraries so important that it has to take up important space?
• It might be nice to know how long it takes to get to the bus stop, so I know how much time there is before I have to leave
• I agree that the bus icons aren’t adding anything

First
Wireframes

Second
Wireframes

5 different app screens are pasted on an orange background at an angle.

branding

Happy Bus - Make catching your bus a better experience. Smiles for miles and miles!
The logo could have a smile detail. Whimsical colors.

Bus Smart - Smart’n up on accurate bus times and schedules with bus smart.
Iconography could include a brain? Whimsical or serious.

Tiny Transit - The little company that is big on caring.
Since it’s a small and simple app. Humble beginnings. Friendlier than bigger companies. Whimsical colors

Transit Turns - No matter what twists and turns come your way, we’re here for you.
Use arrows as in signs or directions. Reliable and there for the ride. Whimsical or serious.

Busily - Connecting people to places. Driven by duty.
Busily meaning: In a very active way (energetic, dutifully, actively). Serious.
A moodboard with 6 photos and colors sampled to the right. There is a pink flamingo, a tape cassette again a blue sky, a bus toy, lights swinging against a vibrant blue background, latte art in a blue mug, a picture of the sky.Vibrant circles of color with blue, green, pink, and orange/yellow colors
Fun and Young. Familiar. Trustworthy. Whimsical. Nostalgic. Tried & True. Calming.
A mood board with scenes from Chicago at night, some laptops in grayscale, and bus icons. The colors of blue, orange, white are sampled to the sideCircles of color of black, dark blue, orange, beige and white
Familiar. Serious. Edgy. Reliable. Sleek. Timeless. Iconic. All Hours.

logo

After selecting a name and a color palette, I put together a style tile. I then began sketching different logo ideas. My goal was to keep the logo simple and easily recognizable, a straightforward approach like the app itself. I started out simple by deconstructing the letter ‘B’ and then started with abstract imagery such as a bus tire on the pavement or roads intertwining. I melded the text with a few different logos I thought were working and then narrowed it down to my first pick.
Busily style tile with color choices, icons, and text treatmentSketches of the letter B, buses, and tire iconsDigital versions of icons from the sketch pageBusily written in different typefaces on an orange backgroundBusily with a bus icon on an orange background3 digital icons with the word "busily" underneath
Busily style tile with hex codes, type treatment, and icons
Sketch page of logos
Digital icons build out in figma with blue and orange colors
Busily written on orange background in many different fonts
Busily logo on orange background
3 Busily icons with type on white background

high fidelity mockups

After my branding exploration, I merged the chosen color/theme with my wireframes to create a high-fidelity mock-up. At first, I was concerned with the dark theme, as all four of the competitor apps researched used a light-mode theme. But multiple testers stated that they enjoyed the color scheme. As dark mode seems to continue to rise in popularity amongst apps and websites, I thought it would be a step in the right direction. It would also make our product stand out more, lending to a more recognizable brand.
3 mockup iPhones with the busily splash page, service updates and homepage

User Testing

ITERATE ITERATE 

• Some feedback I did receive that was positive, was that they really liked the orange nav bar and that their eyes went straight to it. While this feedback was meant to be positive, I actually changed the nav bar to a darker shade, so as to not attract more attention than the bus information

• Another user asked if there was a way to refresh the times and didn’t know how long ago the times were updated, so I introduced an “Updated ___s ago” I also highlighted the delayed buses so they stood out more

• Wheelchair accessible icons were added to stops to indicate which stops were wheelchair friendly

•The orange color was changed to be AAA grade instead of AA by standards of the web content accessibility guidelines

•Miles to the bus stop was introduced during my first feedback from wireframes (went with miles over mins because you don’t know if someone is running, skating, biking, getting dropped off, uses a wheelchair, or has a disability that makes them walk at a different pace)
4 Frames showing two wireframes and and two mock ups. They are all of the home screen

PROTOTYPE

Iphone with Busily screens on a black background
• Live updated GPS map shows buses in real-time, for when the timetable is incorrect

• Clearly explains how Busily will use location data (per Apple’s human interface guidelines)

• Ability to reverse the order of buses and stops as well as switch to alphabetical or by stop order

• Wheelchair-accessible icons next to stops

• Distance in miles from location to stop
iphone mock up screens floating on a black bg

POSSIBLE FUTURE FEATURES

By using the collected data from the research stage that was not focused on for this exploration, I came up with a list of potential features that would be the next steps after this project. I viewed the key business requirements as top priority and assumed that this app would be built in stages (with information organization and delivery being at the forefront).
HIGH
Directions to location

4 out of 4 competitor apps have directions to a destination. In order to compete, our app should follow suit. It also allows users to use one less app to carry out one task of getting from A -> B
HIGH
An alert system when the bus is off schedule

50% of survey takers agreed that an alert when the bus is off schedule is the most appealing feature out of 5 choices
HIGH
Account sign up

• Provides more security
• Adding transit balance to transit cards
• Setting goals (not driving)
• Offer better support (use first name)
• Offer social component
• Better insight for KPIs
MED
Weather feature

45.5% of users said that the weather affects their mode of transportation. Icons that show what the weather looks like at the time of travel could help users plan their day more efficiently
LOW
Favorites/saved buses and routes

20% of survey takers said that they often use their saved/faved buses, routes, and stops. Would be a nice option to have for those who do not wish to allow access to their location data

Retrospect

Busily is the first UX project I have ever tackled, so I definitely learned a lot along the way.

• Learned firsthand how all of the data from research can help inform decisions efficiently
• Learned how important it is to have a design system set up and to use it throughout the design to feel cohesive and intuitive
• There was a bit of a learning curve when trying to play around in Figma's auto-layouts and I feel I still have a long ways to go, but it was fun being able to apply it to a project
•  Realized that I stayed in the divergent thinking stage too long, and will shift focus quickly between convergent and divergent thinking in the future
•  Should have focused more on business requirements from the start and considered key features as secondary (it would have kept me from having to do more work in the form of another survey)