The GOBUS mobile app is a live bus tracking app that allows commuters to easily identify what bus is coming and when it is arriving in the Midsized Metropolitan City. The GoBUS app prioritizes clearly displaying key information that a rider needs in order to experience a seamless and efficient trip.
OVERVIEW
The scenario for this application is a large city transit system that recently underwent expansion. This expansion has led to the addition of many new bus routes. While expansions can definitely lead to benefits, they can also lead to added complexity for the users. In this case, users were specifically complaining about stops that serve multiple bus lines.
Roles
Role: UX, Visual Design, Branding & Identity
Tools: Figma, Google+
Date: Fall 2020
Skills: Competitive Analysis, ideation, user stories, and flows, creating personas, survey design, conducting user interviews and observations, sketching, wireframing, prototyping, user testing & analysis
Problem
The current bus schedule is listed on the city’s website and posted at each bus stop, but this information quickly becomes inaccurate when traffic, maintenance issues, and assisting handicapped passengers are taken into account.
Additionally, ever since the city added new bus routes, there has been an increase in congestion, confusion, and frustration for commuters, especially at certain stops where up to seven bus routes converge.
Solution
GOBUS delivers information clearly and efficiently, upfront. The app uses location tracking to display the most up-to-date information about a rider’s bus route. GOBUS provides peace of mind by allowing riders to know exactly how far their bus is as they begin their commute.
Audience
The target audience was determined to be regular public transportation users that had multiple responsibilities whether that be jobs or an education. This allowed me to focus on features that would be good to include while developing and prioritizing screens.
Tools
Tools that are used in this project:
Goals
Design Process
Underestand
User survey
User interview
Competitive analysis
Define
User persona
Empathy map
User journey
Ideate
User flow
Information Architecture
Design
Wireframe
Hi-Fi Designs
Branding
Prototype
Test
Feedback
Conclusion
Future concept
User research
I laid the foundations for my design by first conducting user research in the format of quantitative and qualitative research. I sourced participants from multiple platforms, forums, and my personal network.
In conducting a user survey about GOBUS, 22 users completed the survey.
there were 24 questions deployed via Google form deployed to multiple platforms, forums, and personal networks.
-
After the survey, for more understanding, I conducted interviews with 3 users. The 1-1 interviews allowed me to ask specific follow-up questions designed to understand their behavior and experience of transit or navigation apps, what they liked about them, what they disliked, and how they used them.
-
Interviews were conducted via phone and zoom.
User Research Survey Results
Mary Young, CA
"The bus arrival timing is not reliable"
Morgan James, NY
"I should go to the bus stop 15 minutes sooner to avoid missing it”
Sara Driver, MI
“Not enough seating at the time”
Mike McMann, CA
“No-show/early departure buses have messed up my plans a couple of times”
User Research Interview Feedback
Pain points from interview number 1:
Bus delays
Not enough seats.
Took more time to get to the destination by bus.
Hard to have an ETA about arrival time to his destination.
Pain points from interview number 2:
Sometimes busses are not accurate in arriving time.
Sometimes it’s hard to find the specific bus number.
She doesn’t feel safe around some people in some neighborhoods.
Pain points from interview number 3:
She does not feel safe since Covid, prefers not to be in crowded places.
Key notes from the research
-
Knowing the bus's arrival is the most important thing.
-
Having accurate arrival timing, early and late buses, but especially early buses, make problems in managing user times.
-
Users would like to know when the next bus is arriving.
-
Users would like to know each bus and line is theirs.
-
Users want an app that knows their bus routes and is updated with the new lines and routes.
-
Users would like to have a few pieces of information about the boarding bus.( like how crowded and if any security options are available)
SWOT Analysis
Key findings:
-
Google Maps provides navigation information for drivers as well as transit users. It is easy to use and covers all around the world.
-
Citymapper is a transit app that covers anything from a bicycle to a ferry. It has a clean and strong interface, especially for the number of features it has. Its weakness is that it is overloaded for someone who is looking for one type of commute. And also it doesn't cover all the cities and countries.
Persona
Using my knowledge of the target market developed in my proto-personas and the data from my initial user survey, I created two personas that represented two different types of users who would utilize this app.
Journey map
After the persona I creat a journey map for Mary to really get into her mind and empathize with her experience of taking the bus every day to and from work. This was a great exercise because as I imagined the emotions Mary would encounter along the way, it allowed me to realize new design opportunities for GOBUS app.
Empathy map
User story
- High-priority user stories:
Mary wants to know how long she has till the next bus arrives at the Washington and State bus station so that She will make it in time, need to rush, or should wait for the next bus, and know which bus and line are hers.
- Mid-priority user stories:
Mary wants to know when her bus is arriving at the Washington & State bus stop, so she can calculate how much time she has to reach the bus stop.
Mary wants to know the next bus arriving at the Washington & State bus stop so that she doesn't rush to the bus stop if it is not her bus.
Mary wants the ability to view future arrival times for any of the seven bus lines (serving Washington & State) so that she knows when her bus arrives.
- Low-priority user stories:
Mary wants to know How crowded the bus, is so she can get to this bus or wait for the next one.
Mary wants to know about the boarding bus security features.
User flow
After creating personas, I created user flows to create paths through the app to solve these problems. This was the first concrete step in screen prioritization and will lead to a site map, and sketches.
Once I created the user flows I began to sketch out my ideas, I created these sketches to be able to quickly get my ideas out and identify any pain points and correct them before moving them to digital. While creating the user flows I realized that I could condense the final screens to solve multiple problems at once.
Site map
After understanding the screens I would design from the user flows, I created a site map to organize my screens and lay out the hierarchical structure of my app.
Site map sketch
Digital site map
Style guide
I began the branding process with mind mapping and brainstorming. I then designed a logo for the Go Bus App and a Mood Board to encourage maintaining consistency for future versions of this project.
And this is the final Logo and color pallet.
Low-Fidelity Wireframes
After creating user stories, user flows, and a site map, I started sketching out low-fidelity wireframes.
Digital Wireframes
I created digital wireframes in Figma to begin early-stage user testing. Testing was on my iPhone using the Figma Mirror app and it was in-person.
First feedback:
Have problems within the home page with the Enable location in the first step.
I redesign the home page of wireframes after the main feedback of user testing through the first page.
Hi-fi Wireframes
I created digital high-fidelity wireframes after the main feedback of user testing through the first page.
User testing
After the first iteration of prototyping with 3 different people.
And this is the feedback:
-
Users were successful through the process of Finding the bus, the line, the accurate arrival timing, and the timing to the destination.
-
There was an error on the first page:
-
The first page before the GPS page was extra and kind of confusing.
-
Keyboard added to the page, after don’t allow the GPS we should type the location.
-
Saved location added to the location search.
Final thought
Through this process, I learned a lot about building apps and being a product designer. I learned how to process ideas and conduct research while putting those insights into design. This process showed me all the work that you do before even starting the sketching phase. All of the work before creating deliverables are extremely important, this sets up the design phase with a great foundation to be able to create a better product earlier. An app is never the best it can be, it can always be better, but with research and insights in the early stages, you can skip a lot of the first bad iterations from the start.