UUM BUS TRACKING PROTOTYPE

 UUM Bus Tracking App: From Vision to Clickable Prototype

Navigating a massive campus like Universiti Utara Malaysia (UUM) comes with a unique set of challenges, particularly when relying on campus transportation. To bridge the gap between students and efficient commuting, our team developed the UUM Bus Tracking App,a dedicated solution designed to eliminate transit uncertainty.

​Following our extensive research and usability testing, we have successfully translated our concepts into a high-fidelity interactive prototype using Figma. This final blog post outlines our design system, key features, user flows, and the crucial refinements we made along the way.

Design System & Visual Identity

​To ensure the interface feels intuitive and premium, we adhered strictly to established UI/UX guidelines while honoring our university identity.

​Color Palette:We utilized UUM's corporate identity by featuring a prominent Royal Blue as our primary color to establish trust and familiarity, balanced with an vibrant Yellow Accent to draw attention to critical calls-to-action (CTAs). Clean, neutral white backgrounds ensure high contrast and maximum readability outdoors.

​Typography: A bold, modern sans-serif typeface was selected for headers to maintain a clean, contemporary aesthetic, while a highly legible, uniform font handles the details across varying mobile screen sizes.

​Iconography & Imagery: Custom, flat vector illustrations are integrated smoothly into the onboarding and splash screens, immediately communicating the app’s transit-focused utility. Clear, universally understood iconography is utilized for system navigation.

Core User Flow & Functionality

Our prototype maps out the complete end-to-end interaction flow for the app's critical tasks, ensuring a seamless experience from the moment a student opens the application.

​1. Onboarding & Authentication

​The Welcome Screen: A clean splash page showcasing a stylized campus background and a prominent "Get Started!" CTA.

​Features Overview: A quick value-proposition screen highlighting live tracking, route exploration, and smart arrival alerts.

​Registration & Verification: A streamlined account setup requiring standard student verification parameters (Metric Number, Username, and Password) followed by an immediate "Account Verified" success state.

​Returning Users: A straightforward sign-in portal featuring a dedicated "Welcome Back" greeting to get users into the app fast.

​2. Main Dashboard & Live Tracking (Home)

​Geo-Location Map: Once logged in, users are greeted by a clean, interactive campus map interface centered on their current location (e.g., School of Multimedia Technology & Communication - SMMTC).

​Live Crowding Data: The "Nearby Buses" drawer lists approaching shuttles sorted by estimated arrival times. Critically, we implemented a color-coded crowd density indicator (Spacious in green, A bit crowded in orange, Crowded in red) to help students manage their boarding expectations.

​3. Ride, Schedule, & Trip Details

​Route Overview: Selecting a route (e.g., Route A from Inasis Bank Islam to Inasis Maybank) expands a detailed map showing every interim stop along the line.

​Comprehensive Trip Insights: Tapping into trip details reveals deep data metrics:

​Departure time and estimated duration.

​Total number of remaining stops.

​Driver Profile Integration: Displays driver rating, total trips, age, and driving style (e.g., Calm / Relaxed Driving) to elevate student safety and comfort standards.

Iterative Refinements: Post-Usability Testing Adjustments

In alignment with our project guidelines, the final prototype incorporates critical feedback gathered during user testing sessions to optimize the daily student workflow:

​Enhanced Navigation Prompts: Clearer micro-interactions and explicit back arrows (\leftarrow) were integrated across the authentication flows to prevent users from feeling "stuck."

​Refined Route Information Placement: Map markers and timeline stop paths were visually decoupled to ensure that multi-stop routes are legible on smaller mobile screens under direct sunlight.

​Optimized Status Badging: The color contrasts on the crowding indicator tags were enhanced to guarantee accessibility compliance for low-vision users.

TRY OUT CLICKABLE PROTOTYPE

​Experience the interactive flow firsthand! Our prototype is optimized for medium-fidelity desktop simulation with mouse and keyboard input. Click through the complete registration, live tracking, and route scheduling experience via the link below:

https://www.figma.com/proto/zICnkRmHJgDpyO3SnulNlf/UUM-Bus-App?node-id=110-22138&p=f&t=7ao5kivBYsFoMJFh-1&scaling=scale-down&content-scaling=fixed&page-id=40%3A20817&starting-point-node-id=110%3A22138