UX Research | UX Design

Google Maps Bus Feature Redesign

Conducting UX Research to ideate users' needs and pain points. Redesign the Bus Feature based on analyzed data.
PROJECT OVERVIEW

To begin with - Why Bus Feature?

Our project team found that lots of students at UW-Madison often complain about the bus service and the inaccurate information on the bus applications which makes them late.

‍Therefore, we want to deep dive and realize the pain point to provide potential solutions that can improve the user experience of the Madison bus service.
User
Students and bus passengers.
Living in a college city, when traveling around campus. People rely on buses more than cars.
Pain Point
Inaccurate timetable, uninformed route change.
Make people late for class and work. Spending extra commute time.
Goal
Provide accurate and prompt bus imformation.
To let passangers realize and prepare for incoming change.
Duration
4 months: 2023 Jan - 2023 May, Course Project
My Role
UX Researcher, UX Designer
BACKGROUND

It all starts with a Class...

As students without a car, we heavily rely on the bus service at Madison.
At first,
We thought it would be easy for us to go around the campus and Madison by taking the bus.
My goal is to create...
A bus feature that could help users avoid inconvenience and enhance their user experience.
PROCESS

My Research and Design process to the goal.

I followed a design thinking approach to redesign the application. It's not a linear process; instead, I kept circling back to each step, tweaking and improving the design along the way. This method ensured that I continuously gathered insights, brainstormed ideas, built prototypes, and tested them to make sure the final product meets users' needs effectively.
USER research

Why we need to Redesign -
What are the Pain Points?

To enhance user experiences positively, it is crucial to involve real users in the design process. To achieve this, I conducted Interviews and Contextual Inquiries to gather both the narratives and behaviors of users, aiming to comprehend their experiences when using bus services.
Firstly, I conducted
Interview
To obtain initial insights into users' thoughts, beliefs, cognitive frameworks, and experiences.
Here are the insights...
Every student relies on bus service but all of them have experienced being late due to the bus being delayed or wrong timetable on the application.
None of them ever receive route change information by application that is caused by construction or events.
Some buses not showing up on maps, making users misinterpret bus availability.
Next, I conducted
Contextual Inquiry
I requested participants to think out loud their thoughts while demonstrating the process, enabling me to pinpoint users' emotions, particularly when facing typical pain points.
Here is what I observed...
Everyone checked the bus information by phone before heading to bus stops.
Apps showing incorrect estimated times for the buses (for arrival at stops and travel times to destinations).
No warnings for any late or missing buses. Nor any warnings for any detour routes.
PERSONA And User Journey Map

What are my Deliverables by UX Research?

Using insights from UX research, I developed a Persona and a Journey Map. The Persona delineated users' pain points and requirements, while the Journey Map concluded various scenarios and challenges encountered during bus travel.
Persona
Journey Map
DEFINE PROBLEM STATEMENT

What do Users Need?

Based on the research data, I distill the most essential issues that need to be addressed.
User need a way to
be reminded of the detour and route change
becuase they don't want to miss stops or wait at wrong stops
User need a way to
receive useful and prompt notifications about Madison
becuase they want to prepare for incoming changes
User need a way to
have an accurate timetable and catch the bus timely
becuase don't wanna be late and important events.
Derived from users' needs, I formulate my "How Might We" statement to guide the exploration phase.
How Might we...
let users receive important changes promptly and arrive at their destination on time?
Brainstorming solutions

How do I Resolve Pain Points?

It was difficult in the beginning since the bus feature in Google Maps cannot control the inevitable physical situation. However, I believe there must be something we can improve on the bus feature to mitigate the effect of changes. Therefore, I brainstorm as many potential solutions.
After generating several solutions, I organized them into groups, then selected the 5 possible solutions to proceed.
Bus information page with more details
Provide comprehensive information for users
Pop-out route change information when open
Remind users when they open the Google Maps
A news ticker on the main page
Broadcast prompt information.
Passenger report system
Allow users to report incidents that just happen.
An official information page
Application can release events that will happen in the future.
Storyboard

How could solutions Make an Effect?

To assess how the design solutions would impact user, I created a storyboard illustrating people taking the bus, showcasing how the design would fulfill user needs.

‍In the storyboard, users can circumvent inconveniences caused by route changes through the new design.
Task flow

Users should be able to Use Functions Intuitively.

Applications are not just about pretty interfaces. Smooth task flow also has a huge impact on user experience. I identify some most commonly used functions (actions) define their task flows and visualize them.
These are my Design Thoughts
Apply common design pattern
Help users learn and adapt application fast.  
Fully connected navigation model
Let users jump between pages by Global navigation bar.
One page structure
Allow users to read bus information in one page.
Screen Design

It's time to Design and Visualize the Ideas.

To streamline the project and focus on key user requirements, I reviewed user needs and identified three primary tasks: searching for bus information, reporting incidents, and receiving bus change notifications. Subsequently, I created a range of prototypes for the application, starting from low-fidelity wireframes and progressing to high-fidelity designs. This iterative process allowed me to refine the design concept and address any identified issues effectively.
1. Sketch
I proceeded to craft a more intricate screen design to ensure comprehensive coverage of all necessary elements based on task flow. This approach enabled me to assess if any vital components were overlooked during the design process.
2. Paper Prototype
To evaluate the searching and reporting scenarios, I created a low-fidelity paper prototype. Its portability and simplicity facilitated usability testing through its basic structure, serving as a precursor to developing digital wireframes.
3. Usability test
The paper prototype serves as a tool to assess whether the proposed design effectively addresses users' issues. To conduct the usability test, I devised two scenarios to evaluate its functionality and user experience.

Scenario 1: You need to take a bus to Helen C White Hall for classes, but you heard there is construction ongoing that affects some bus routes. Please find the route change information and choose the bus that can avoid inconvenience.

Scenario 2: You are on a bus right now, but you find there is construction at University Ave which makes all buses take detours. This information did not appear on the bus application when you searched for bus information before. Please use the report system to update prompt information to other users.
Here are the feedbacks
Does the report function really need to be on the main page?
The report function is practical. Yet, passengers probably are not using that function that much. Is it worth taking a spot on the global navigation bar?
Why there is no direction to the nearest bus stop?
Map directions to bus stops are important when people are not familiar with the area/route. We have been at Madison for a while so we know where are bus stops. Thus, probably you can add a navigation to the closest bus stop when people select the bus number.
Confused information architecture
You put an underline after the "issue category" drop-down. It confuses users if they should type words in or select a category by drop-down.
Revise the design
Based on the feedback and analysis of breakdowns, I redesigned and adjusted various UI elements on the page to enhance clarity and improve the overall user experience.
Wireframe

Let's make it Digital!

I turned the wireframe into a into digital to incorporate additional interactivity and assess its appearance on the screen. Digitizing the wireframe allowed me to concentrate on visual hierarchy and information architecture before finalizing choices regarding fonts, colors, and graphics.
Problem solved?
Let's get back to the user needs to check if the Design does the trick!
Be reminded of the detour and route change
becuase they don't want to miss stops or wait at wrong stops
Detailed information on bus search results.
The report function is practical. Yet, passengers probably are not using that function that much. Is it worth taking a spot on the global navigation bar?
Receive useful and prompt notifications about Madison
becuase they want to prepare for incoming changes
An Info page that shows important events and allows users to update incidents.
Allow user receive all important news at once.
have an accurate timetable and catch the bus timely
becuase don't wanna be late and important events.
Thorough delayed and skipped stop information when selecting a bus.
Provide users with the whole picture of bus information.
Final Design

Grand Finale -
Say hi to the Revamped Bus Feature!

MAIn CHANGES

What makes it SO GREAT?

Here's a brief recap of the problems we aim to address! Let's examine the key modifications made during the entire design process to better meet the users' requirements.

Give yourself a try with the Prototype!

KEY TAKEAWAYS

What I have learned from this project

User testing is integrated into every stage and persists beyond development.
Design is an ongoing journey of enhancing the end-user experience. At every stage of design, there exists feedback from end users to optimize and refine.
The design process does not follow a linear path.
The design process is inherently cyclical. The different research and design approaches form a continuous cycle when optimizing the product.
A problem well-defined is a problem half-solved.
Realizing the root cause is the most paramount part of resolving an issue. It helps designers pinpoint the most practical solution to enhance user experience.

Thank you for reading!
Here are more works.

Atmosfy Usablilty Test
Commerical Robot Vacuum System Design
Process Optimization and Data Automation
© Mickey Chen 2023