BusTrack
GEONAVIGATION MOBILE BUS APP
Time-efficient feature designs for a mobile bus app serving a large metrocity area's residents
Summary
The goal of this project was to create specific features for a mobile bus application that would be a more efficient solution for bus riders in metropolitan areas. These features help bus riders to know exactly where a bus is on their route with real-time updates, allowing for better bus commute planning. As a solo project, my role included all phases of the design process including ideation, strategy and design layout.
Role and Responsibilities
Role
User research, ideation, strategy, prototyping, branding, visual design
Deliverables
Wireframes, Prototypes, App overview via Stakeholder Presentation
Tech Stack
Figma
The Problem
The local city transit system serving thousands of commuters in a large city wanted to create a streamlined solution for the numerous bus lines running through the same bus stop. Bus riders want to know what the next arriving bus is and how much time they have to get to their bus stop. Merely rushing to the stop once a bus arrives no longer works because it may not be the bus that the rider is expecting.
The Audience
Research to determine the target audience was conducted via Google Forms surveys with a participation list of 22 surveyors. Design decisions going forward were based on these results.
Age
81% ages 18-35; 19% ages 36-80
Gender
52% male; 48% female
Bus-riding frequency
27% frequent bus riders; 48% occasional riders; 25% rare bus riders
The Solution
I designed user features for a mobile bus application to simplify the commuting experience for bus riders in both small and large cities.
BusTrack's new and improved features lets bus riders:
-
Set up route favorites
-
Track their chosen bus in real-time
-
Quickly viewing a bus' schedule
-
Get notified when their chosen bus is approaching
-
Get notified if their chosen bus is delayed or out of order
The Process
My design decisions for the app going forward were grounded in the following research.
Discovery and Research
Data from user surveys informed my user stories and user flows, which helped me to understand patterns, trends, and outliers, and informed me if these bus riders were likely to utilize a mobile application for their concerns
User Survey Findings
-
Riders missed their buses quite often prior to getting adjusted with their specific go-to bus stop’s schedule. This was due in part to unfamiliarity, and also lack of communication in transportation apps.
-
Frequent to semi-frequent bus riders do utilize tracking apps as a way to stay on schedule, and would be interested in a better mobile app solution
-
An average of 43% of bus riders have trouble remembering their bus times
-
84% of bus riders agreed that using a digital device/app with real-time notifications would make their bus riding experience easier and less stressful
Agile User Stories
To tap into the psychology of our users and better understand what their needs look like, I pursued user stories for both new and returning bus app users. Many of the goals of returning users intertwined with the goals of new users, as they both had the same user needs in mind.
Key Business Requirements for MVP
-
The app should allow users to select a bus line and see a list of its future arrival times
-
Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop, which is a bus stop for 7 different bus lines
-
The app should provide an ETA for how much time the user has to get to the Washington & State bus stop before the bus they need arrives
Scope
-
Complete the user interface for launch
-
Complete branding and style guide for launch
-
Implement specific features for locating bus stations and arrival times
Constraints
-
Time: The turnaround time for this project was allocated a maximum of 4 weeks
-
Budget: No budget was allocated toward any user research, which meant being resourceful in crafting materials and in user testing participant selection
Personas
Based on my limited demographic and psychographic research, I was able to define a main persona that I felt would epitomize the app’s primary user.
User Journey Mapping
I designed journey maps to further visualize all touchpoints our users might encounter .By applying empathy to each phase of their experience, I considered what should be designed in order to facilitate users’ overall experience and make the software uncomplicated and engaging through their unique journeys.
Comparative Analysis
To guide my wireframes, a comparative analysis of user interfaces was conducted between 4 leading competitors also offering transportation mapping services. I downloaded several bus transportation applications (CityMapper, Moovit, Google Maps and Transit) and made note of their features and which seemed most relevant to the user and to the specific requirements of this project.
Users are actively using transportation apps to make their bus-riding experience easier. They’re less concerned with excessive features, and more concerned with getting from point A to point B quickly and efficiently. The visual aesthetics of the app were created based on these concerns and gathered from variations of other commuter apps. Users should be able to easily navigate BusTrack with colors, fonts and features that are familiar, welcoming, and don’t drown out the main use of the application.
Competitive Analysis
Using the same brands above from my comparative analysis, I conducted a competitive analysis and noticed they all seemed to miss several key features that bus riders look for when downloading a bus transportation app. This leaves the only option for users: to settle for the software that checked off the most features.
Information Architecture
In order to create a solid foundation for which my designs would play out, I used multiple strategies of information architecture to practice user-centered design that would remain relevant and intuitive for our users.
Content Strategy Flow
I created a simple content strategy flow to organize the bones of the layout.
Sketching
This phase mapped out the final solution through exploration, ideation, and refinement of the app’s layout.
During the beginning stages of the sketching process, I reviewed all of the user variations to fit the key requirements of the project and then created several sketches that would encompass the main features needed to produce the MVP.
User Flows
In order to lay out the foundation of our users’ movement throughout the app, I constructed a wireframe-based user flow in order to map these pathways and better visualize the user's experience.
Wireframes
After better understanding our users, the structure of the app is designed through wireframes to serve as the blueprint for the final design. The wireframes will contain the information architecture and content strategy for our application.
The final digital wireframes were focused on the KBRs of this product and didn't delve into the entire layout/creation of the rest of the application.
Usability Testing
Since the MVP only required a minimum amount of added features for the app, I conducted usability tests only to analyze the user flow as the user moved through the prototype, and note which features needed additional iterations.
In order to find out what worked, what didn’t work, and what needed to be fixed in the current version of the app, I performed usability testing with participants to test my assumptions and fail early. This would provide me with vital feedback in order to create new iterations. Users were chosen based on my earlier target audience analysis.
Results
-
Average % of task successes: 92%
-
Average % of task failures: 8%
-
Average amount of extra time taken to complete tasks: 2 seconds longer
Branding and Styling
After researching our target market and planning for design, I came to realize that many already-existing geolocation and commuting apps had many similar elements. Since most people already have 1 or more of these types of apps downloaded to their phone (whether voluntarily or involuntarily), I realized it was in our users' best interest to feel continued familiarity with those same elements within our app as well. With this in mind, I used green and blue hues with a minimalistic typeface.
Brand Name and Logo
The name "BusTrack" was decided on based on its simple, straight-to-the-point explanation -- much of how a bus rider wants their commute to be. No fuss or hassle involved in figuring things out.
Typography
An unobtrusive, simple Sans Serif typeface was chosen for much of the same reasons as the brand name. With high clarity and simplicity, the user can accomplish their goals in the app without being visually distracted.
Color Palette
Testing for color accessibility first via WebAIM, I created a with color psychology backing. The main colors, green and blue, were chosen for their calming, efficient and trustworthy attributes. As a bus rider, these evoked feelings provide a much-needed sense of reliability during what is normally a stressful process.
Mood Board
The mood board was curated from other inspiration gathered around the web to show BusTrack's fundamentals and provide a blueprint of the overall visual aesthetic I was aiming for. Some visuals were chosen as pieces of inspiration from other designers' works, and with the color palette in mind so as to not lose sight of where the brand was headed.
Design Iterations
Originally, my first iteration of the app was to fulfill all responsibilities and features of an entire application. After receiving feedback from the organization, I was geared more towards focusing solely on the business requirements, and not on building out the full application.
Suggestions made during Usability testing concerning the opening screen drove some refined solutions for a couple of major design iterations:
DESIGN ITERATION #1
-
User feedback: Users pointed out that the starting location field would be redundant as the app already tracks location. Additionally, the option to search by bus line versus location is a step best saved for later, after the user can see all of their options in front of them during next steps.
-
Iteration: Condense the amount of steps the user has to take to view and choose a destination route. Removed "Starting Location" field and the "Search by... Location / Bus Line" dropdown.
DESIGN ITERATION #2
-
User feedback: Users pointed out that their "Favorite" locations seemed hidden/unaccounted for until clicking into one of the fields. Ideally, they'd like to be able to directly click on a Favorite location.
-
Iteration: Condense the amount of clicks the user has to make to enter a "Favorite" location. Removed favorite locations from the dropdown selection, and added shortcut buttons for immediate visibility.
Conclusion
This mobile app was complex in its own right in that the key business requirements only called for very specific features to be designed, removing me from the other workings of the application and how they would be designed and experienced by the user. Keeping this in mind throughout the duration of the project assisted in staying on track within the given time constraint and requested deliverables.
Next steps for improving the app
-
Incorporate imagery and additional visuals for personality and brand presence
-
Conduct further research for other possible use cases
Learning opportunities that arose from this project
-
Think small to remain efficient: The success of this design comes from the understanding that we don't need all of the features provided by larger apps, like Google Maps, Citymapper, etc. in order for a user to reach their goal.
-
Focus on key business requirements: Although my original iterations would have been great additional stretch features for the organization, it's important to stick to original tasks and not assume that these stretch features would even be implemented or within the organization's budget