UX DESIGN
Metrobus Routes & Real-Time Tracking
We designed a concept app for Metrobus that simplifies finding bus routes and enables real-time tracking, making public transport more accessible and reliable for everyday commuters.
Project Overview
Finding a bus route on the current Metrobus website is a nightmare. Users must navigate through over a hundred unclear links to identify which bus passes close to where they live and work. Many commuters must either visit the bus center in Johannesburg town or rely on someone already familiar with the routes. Without these, they risk being stranded.
This concept project aimed to provide clear bus route information to new commuters looking to use Metrobus services. With rising taxi fares, buses are the preferred affordable option for many. Additionally, the project sought to offer real-time bus tracking so commuters could see their bus’s location and know when delays or cancellations occur.
Client
Metrobus (Concept Project)
Timeline
1 week
Services
- UX Strategy
- Research
- UX/UI Design
- Prompt Engineering
- AI Development
Research & Discovery
We conducted online research and interviews with people who regularly use Metrobus services. Over 90,000 commuters use the buses daily for work and school. The key frustrations voiced included waiting without knowing if buses were delayed or not coming, and the difficulty of finding the correct bus routes.
Commuters needed an easy way to check bus routes and access live tracking for peace of mind.
Key Insights
- Difficulty finding bus routes through the current website
- Lack of real-time information on bus movements
Design Process
Using AI tools like ChatGPT and Lovable AI, we iteratively developed the app’s structure, wireframes, and high-fidelity prototypes. We began by prompting ChatGPT to generate sitemaps and user flows based on our goals and refined the output through several iterations.
Information Architecture
The app was structured as follows:
Visual Design System
We created a nature-inspired visual design system with a focus on accessibility and clarity:
Color Palette
The color palette was designed to be both functional and friendly. A warm yellow was used as the primary accent to highlight important actions, buttons, and icons, creating a sense of positivity and direction. For alerts and calls to action, a bold coral red was introduced to draw immediate attention when necessary. Supporting these, we used a clean black for text and interface elements to ensure strong legibility, all set against a pure white background for a crisp, minimal aesthetic that supports clarity and accessibility.
Typography & Icons
Typography was carefully selected to be modern, clean, and highly readable, using a sans-serif font that maintains professionalism and ease of use across devices. A clear visual hierarchy was established through distinct heading sizes, making content easier to scan and digest. UI elements like cards and buttons feature rounded corners and subtle drop shadows to create a sense of depth without cluttering the interface. Icons were designed in a simple line style to ensure clarity and consistency, while also being culturally neutral for global user understanding.
UI Components
The user interface components were created with usability and visual comfort in mind. Input fields feature rounded edges and embedded icons, such as location pins, to help guide users intuitively. Map containers are designed to be full-width with color overlays that highlight routes and destinations effectively. Navigation is handled through segmented buttons and tabbed toggles with rounded edges, offering a soft and accessible interaction model that’s both mobile- and desktop-friendly.
High-Fidelity & Prototyping
High-fidelity prototypes were created using Lovable AI with clear, user-friendly UI that focused on simplicity and clarity.
Key Interface Features
Quick Route Search
- Allows commuters to input origin and destination
- Select days and times
- Get clear bus route options based on user needs
- The app can detect location automatically for convenience
Live Tracking
- Shows the real-time location of buses
- Helping commuters know when their bus is arriving or if it’s delayed
- Suggests alternatives if needed
The Results
Though still a concept, the project aims to:
- Provide easy access to bus information for new commuters
- Improve communication between Metrobus and commuters about ride statuses
- Give commuters peace of mind through live bus tracking
- Increase overall bus usage and user satisfaction
Ready to Work With Us?
Let’s start a conversation about how we can help your business grow through exceptional digital experiences.