Busily
Case study for A live bus tracking app TO deliver CLEAR & ACCURATE information
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.
Design Process
DISCOVER
Survey Interview
SWOT Analysis
Competitor Analysis
DEFINE
User Persona
Empathy Map
Journey Map
Affinity Map
IDEATE
Userflow
Site Map
Wireframes
Prototypes
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
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.
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.
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
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.
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.
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.
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.
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
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.
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
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.
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
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.
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.
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.
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)
• 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
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).
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
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
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
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
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)
