UsBus
A transit app for people and the planet.
Role
User research
Content strategy
UX writing
UI design
Usability testing
Scope
User research
Hi-fi prototype
Branding
Usability testing
Timeline
3-week design sprint
Tools
Figma
Notion
Zoom
Google Surveys
* This was a project I conducted through Thinkful’s UX/UI Immersion Program.
Overview
The Problem Statement
Expansions have added new bus lines to stops in a mid-sized midwestern city, causing riders to get confused about which bus line is arriving and when. The city has developed a way to know how far away each bus is from a stop, but they aren't sure how to share that information with riders.
Discovery—Get to know the users
Competitive Landscape
There are many transit and wayfinding apps. I closely examined how the best 2 apps on the market flow, what they have in common, and what makes them different from each other.
Competitors provided models and patterns that ultimately informed the creation of our final product.
Citymapper
Available in 25 cities. Save work, home, and other favorite locations. Integrated with 'micro-mobility brands' like CitiBike, Lyft (cars and scooters), Bird, etc 🚴♀️. Positioned as 'healthy'—gives you a calorie count for walking and biking. They also have mascots for cities called 'greenies', but that seems to be the only mention of sustainability ♻️.
Transit
Available in 125 cities. You can link your Uber and Lyft accounts. Ability to adjust settings to show accessibility info ♿️. The app only gives you the option to save work as a favorite 👎. Doesn't show bus stops near you.
The Survey
I surveyed 22 people on their public transit usage and habits.
The survey and interview results informed my design and helped me decide what type of digital product to create.
Key findings:
The Interviews
I conducted 2 user interviews with survey participants that agreed to a follow-up interview.
Key findings:
1. Public transit has a reputation to overcome—which is being seen as not dependable and inaccessible. A rebrand and relaunch with a digital presence could shift public perspective to a positive feeling about taking public transit and as a contribution to the sustainability of the local community.
2. Arrival time is most important to these users; this will inform the prominence of this info in the UI.
3. Users identify the bus # to confirm it is the one they want to board—if this current method fails, there needs to be a safety net built in the app to ensure users board the right bus.
Literature Review
When compared to single-occupancy vehicles, public transportation produces 95% less carbon dioxide, 92% fewer volatile organic compounds, 45% less carbon dioxide, and 48% less nitrogen oxide.
I wanted to make this public transportation app so intuitive that it is more attractive to people than using single-occupancy vehicles. I think that behavioral design can help people make better decisions for the environment while still fulfilling their primary need—getting where they need to go.
The Primary Persona
My primary persona has pain points and goals that reflect demographically similar users I observed in my surveys and interviews.
Journey Mapping
Define—Information Architecture
User Stories
I prioritized user stories, which helped me stay within scope.
Sketches
I sketched out the new feed, profile, and search feature.
User Flows
I mapped the flow a user would take through the app to make sure the universal design principle of simple and intuitive use was met before I started building. Here is an overview of my user flow—each purple oval represents the launch of separate feature or user goal.
App Map
The app map I created helped me lay out exactly what content should go where.
Develop—Wireframes, Brand + Testing
Accessibility
Accessibility was top of mind—I applied universal design principles, like simple and intuitive use, and size and space for approach and use. I approached information hierarchy with a critical eye and made sure the most important information was discoverable.
Matching users’ current mental models of Google maps and other transit apps guided my design decisions.
Wireframes
My first iteration of wireframes were drastically different than my final design. This version has 3 tabs: directions, stations, and lines.
During rapid testing, it proved more intuitive to have one landing page with all of these capabilities in one.
The Brand
Accurate, clean, friendly. The idea behind this app's branding and positioning is community forward, efficiency-focused and transparent about its impact.
The app leverages the localization of the project to connect with users' emotions associated with place and home.
Acumin is functional and clear for everyday display use. Druk Wide adds a strong typographic hierarchy for the logotype and headings. Romana for subheadings adds a necessary contrast to the ultramodern san serif fonts. The combination of a san serif, slab serif, and serif font create a balanced appearance on the screen.
Usability Testing
I conducted 2 moderated usability tests.
Tasks
1. Create an account.
2. Search a location and get directions.
3. Add a favorite location from the menu.
4. Find emissions stats.
5. Identify what buses are arriving nearby.
Users liked the sustainability aspect but felt like they were already taking the most environmentally friendly mode of transit they could. They didn’t like being asked to offset emissions for the already-low impact travel.
To remedy this in future iterations of development, I could track savings instead of spent carbon.