Redesigning redBus Live Tracking Experience for Android, iOS, and Mobile Web Platforms
Overview
--
When it comes to bus travel, there’s one thing every traveler craves — peace of mind. I had the opportunity to revamp the redBus Live Tracking experience across Android, iOS, and web platforms.
The Goal:
Simplify live tracking to reduce stress about pick-up points and bus locations. With accurate, real-time updates, the focus was on building trust and confidence in the journey.
MY ROLE
As a UX designer, my job was to take this stressful, unclear experience and transform it into a smooth, reliable journey for users across multiple platforms — Android, iOS, and mWeb. With the help of the YB (Your Bus) product manager, Android and iOS dev teams, we dove into user research, wireframing, and constant iteration to ensure we’d deliver the most reliable live tracking experience.
Research Phase: Uncovering the Issues
Initial App Audit:
Before redesigning anything, I first reviewed the existing app. Here’s what I found:
Android Issues:
- The bus is stationary for ages, and then — surprise! — it teleports somewhere else. (Teleportation bus? 🛸)
- Key bus stops were missing.
- The bus sometimes moves in the wrong direction. It’s like, “Wait, is this a bus or a rollercoaster?” 🎢
iOS Issues:
- No clear indication of whether the bus was moving or not. Was it a ghost bus? 👻
- Everything was crammed into one screen — info overload! The user was drowning in details.
Support Logs: Listening to the Users
I dive into customer support logs to find out what was really driving users crazy. Turns out, they had plenty to say:
“Is my bus on time?”: Anxiety over whether the bus was delayed or running on time was a common complaint.
“Where is my bus?”: Users frequently called support asking for more precise information about their bus’s location.
“Where do I board?”: Many users were unsure about where to catch the bus, leading to confusion and missed rides.
The support team’s feedback was invaluable. It allowed us to focus on areas that mattered most to users and prioritize features that would make a difference in their experience.
User Journey: Mapping the Pain Points
Next, we conducted a user journey analysis to better understand the steps users take when interacting with the app. We identified several stages where users were facing pain points:
Through these pain points, it became clear that we needed to offer real-time updates with actionable insights to help users navigate their journey smoothly.
Defining the Challenge: What We Aimed to Solve
Our main mission was clear:
Creating a consistent and intuitive experience across Android, iOS, and mWeb.
Ensuring real-time updates that users could rely on.
Providing contextual information such as boarding points, delays, rest stops, and drop-off locations to alleviate confusion.
Collaborating closely with the development team to ensure feasibility on all platforms.
From Ideas to Wireframes:
I turned my initial ideas into multiple wireframes and reviewed them with my manager. After incorporating his feedback and improvements, I presented the wireframes to the development team to ensure all design elements were feasible and practical.
Visual Design: Bringing it to Life
After finalising the wireframes Using the redBus Rubicon Design System, we began crafting components for each platform.
Building Core UI Features:
After my Sherlock Holmes-style investigation, we designed some game-changing features to make live tracking less stressful and more delightful. Here’s the “new and improved” lineup:
Map Component:
- What it Does: Real-time bus tracking with dynamic map updates that actually work! It highlights the bus’s live location, route, and ETA.
- Why it’s Amazing: No more “Where’s the bus?” panic — just clear, accurate updates that bring peace of mind.
Dynamic Message Window:
- What it Does: Displays useful updates, like the bus’s current status (on-time, delayed), next stop alerts, and even weather conditions for your journey.
- Why it’s Essential: Keeps you in the loop without flooding you with unnecessary info.
Vehicle Details Card:
- What it Does: Shows the bus number, vehicle type, and registration details. Perfect for identifying your bus at a glance.
- Why it Helps: Say goodbye to boarding the wrong bus and awkwardly stepping off again.
Boarding Point Details Card:
- What it Does: Shows the BP (Boarding Point, not “Back Pain”) address, phone number, 360° view, and directions.
- Why it’s Awesome: Confirms you’re at the right spot. No more awkward “Am I even in the right place?” moments while side-eyeing strangers.
Dropping Point Details Card:
- What it Does: Shares the DP (Dropping Point, not “Double Problem”) address, phone number, 360° view, and directions.
- Why it’s Handy: Ensures you can flawlessly add drop-off details in apps like Ola or Rapido for that last-mile hustle.
Vertical Route Tracker:
- What it Does: This is the superstar! It maps the entire route, shows your BP, DP, and intermediate stops in a dropdown format. Bonus: a real-time tracker so you can see the bus’s exact location.
- Why it’s Cool: Lets you plan your next snack break or adjust your DP based on your “I’m too tired for another rickshaw” timing.
Enable Wake-Up Call:
- What it Does: A lifesaver! Get a friendly call from the redBus team 10 minutes before your stop.
- Why it Rocks: Ensures you don’t accidentally sleep through your drop-off point and wake up in the middle of nowhere.
Integrating UI Components Based on Journey Stages
After building and testing all components, I stitched them together like pieces of a glorious UX puzzle. Each component slotted into the main screens based on the journey stages: preboarding, postboarding, prearrival, and post-arrival.
The magic of this new architecture? It dynamically prioritizes the information hierarchy depending on the stage. For instance:
1.Preboarding Stage: It’s all about the hustle. Vehicle details and boarding point cards are the VIPs and take the first fold — because nobody has time to scroll when their bus is arriving. 🚶♂️💨
2.Post-boarding Stage: Rest stop details become the main event. Let’s be honest, nobody’s thinking about boarding points anymore — they’re scouting the next restroom or chai stop. ☕🚻
3.Pre-arrival Stage: Dropping point details rise to the top. Users need this information to coordinate their next ride or alert friends/family to pick them up. 🚕📍
4.Post-Arrival Stage: Feedback collection and ride-sharing options take center stage. Users can quickly rate their experience and seamlessly book their next leg of the journey. 🌟🚖
Miscellaneous Screens:
In addition to designing the core UI screens, I worked on creating several miscellaneous screens to handle specific user needs and edge cases. These included:
1. Edge Case Scenarios
I ensured the designs accounted for rare but critical situations, such as:
- Long Text Handling: Adjusted layouts to handle long names for boarding points or destinations by truncating text intelligently with tooltips for full details.
- Commercial Ad Spaces on Map: To boost revenue (and keep the app running), we added ad spaces on the map. But don’t worry, they’re subtle and won’t make you want to throw your phone. (We tested this.)
- PIP Mode and Lock Screen Tracker: For the multitaskers out there, I added Picture-in-Picture (PIP) mode and a lock screen tracker for iOS users. Now you can track your bus while doing other things, like scrolling memes, feeds. 😎
2. Dark Mode
With an increasing number of users preferring dark mode, I adapted the designs to seamlessly transition between light and dark themes.
- Ensured proper contrast and readability for text and icons.
- Adjusted color schemes to adhere to accessibility standards while maintaining the redBus brand identity.
3. Error Scenarios
Error handling was an integral part of the design process. I created screens for:
- Network Issues: A clear, user-friendly message with a retry option for when the app couldn’t fetch live tracking data.
- Incorrect Boarding Point: Alerts to notify users if they were at the wrong location, along with directions to the correct spot.
- System Errors: An intuitive error message with actionable options to contact support or retry.
The Outcome: Transforming the User Experience
After all the design, testing, and iterations, the results were incredible:
30% reduction in customer support calls related to tracking.
20% increase in app engagement for the live tracking feature and boosting ad revenue.
User ratings improved from 3.2 to 4.5 in CSAT. That’s a major win! 🎉
Learning:
This case study taught me that UX design is all about understanding the real pain points users face. By adding real-time updates, prioritizing the right information at the right time, and constantly iterating based on feedback, we turned an anxiety-inducing app feature into a reliable tool that users trust. And I can proudly say: no more teleporting buses. 🚍✨
Thanks for reading! If you enjoyed the article, give it a clap or share your thoughts in the comments. I’d love to hear your feedback!
Feel free to connect with me:
🌐 Website: rahulram.in
🔗 LinkedIn: linkedin.com/in/rahul-ram20
