UUM BUS TRACKING APP MOCK-UP

 

1.0 Introduction 

This activity focuses on developing alternative interface designs for the UUM Bus Tracking App. The purpose of this activity is to explore different design ideas before creating the final wireframe in Figma. In this stage, the group used the Crazy 8 method to quickly generate several interface ideas based on the main user tasks.

The Crazy 8 method allows each group member to sketch different layout ideas in a short time. These sketches help the group compare different design possibilities and choose the most suitable interface layout. After the sketching process, the selected ideas were refined into wireframes using Figma.

The design of the UUM Bus Tracking App aims to help students check bus locations, routes, bus stops, and estimated arrival times more easily. The interface design is based on user needs, user persona, empathy map, and research findings. Therefore, this conceptual design process helps ensure that the final interface is simple, useful, and suitable for UUM students.

Crazy 8 Sketches:

2.0 Incorporation of Design Requirements (Persona, Empathy Map, & Research)

UUM BUS-TRACKING MOCK-UP

The wireframes for the UUM Bus Tracking app demonstrate a direct translation of localized user research,specifically addressing campus commuting behavior and the pain points surrounding bus delays into a functional UI elements.

Addressing Bus Delays and Commuting Uncertainty

A primary frustration for campus commuters is the unpredictability of transit schedules. The wireframes tackle this directly by making real-time spatial data the core of the experience.

• Live Map Integration (Screens 4, 5, & 7): By immediately presenting a map with the user's location and moving bus icons, the app shifts the user's mental state from uncertainty to control.

• Proactive Status Updates (Screen 5): The bottom notification panel ("Bus A is approaching...", "Bus B have pass you...") provides immediate, glanceable reassurance, directly addressing the anxiety associated with waiting for delayed transport.

Empathetic Design for the Student Context

The empathy map clearly informed features that go beyond basic tracking to understand the physical and emotional state of the student.

• Capacity and Environmental Context (Screen 7): The "Bus" detail screen is highly contextual. By displaying "Info Status: Crowded" and "Seat left: 1-2 Left," the interface empowers users to make informed decisions about their commute (e.g., choosing to wait for the next bus rather than squeezing into a full one).

• Weather-Aware Prompts: Including the weather status ("Rainy") alongside a localized warning ("Mind your grip since it is rainy") shows a high degree of empathy for the physical reality of navigating the campus in adverse weather, transforming the app into a caring digital companion.

Streamlined User Flow for Busy Personas

The student persona requires efficiency. The UI minimizes friction through swift onboarding and quick-action features.

• Frictionless Navigation: Prominent "Use my current location" buttons prevent users from having to manually type out long campus building names.

• Structured Information Architecture (Screen 8): The Schedule screen organizes complex route data (Routes A, B, C, D) into clean, digestible time blocks, acknowledging that students need to quickly cross-reference bus times with their class schedules.

• Structured Feedback Loop (Screen 10): The complaints section categorizes issues (Schedule, Navigation, Bus, Interface, etc.). This structured approach respects the user's time while gathering actionable data to continuously improve the transportation ecosystem.

3.0 Justification of Interaction Metaphors

The interface utilizes several familiar mental models to reduce the learning curve and make the digital experience feel intuitive.

Metaphor 1: The "Radar/Navigation Dashboard" (Map Interfaces)

• Description: The central interactive map acts as a real-time radar, plotting the user and the buses on a 2D plane.

• Justification: This leverages the ubiquitous mental model of modern ride-hailing applications (like Grab). Users already understand how to pinch, zoom, and interpret moving assets on a digital map. It instantly communicates that the app is a tool for physical navigation, bridging the gap between the digital interface and the physical campus.

Metaphor 2: The "Digital Transit Pass / Smart Board" (Screen 7)

• Description: The detailed bus status screen chunks information into a structured layout resembling a physical transit pass or the digital arrival boards found at modern bus terminals.

• Justification: By placing the bus graphic at the top and clearly delineating statistics (crowd level, seats left, driver experience) below, it creates a highly scannable hierarchy. Users know exactly where to look for critical "go/no-go" information before stepping onto the vehicle.

Metaphor 3: The "Control Panel" (Bottom Navigation Bar)

• Description: The persistent bottom bar featuring iconic representations (Bus for tracking, User for profile, Wrench for settings/maintenance) acts as a physical control panel.

• Justification: This tabbed metaphor anchors the user. No matter how deep they go into a specific route schedule or feedback form, the "control panel" remains accessible, ensuring they can always return to their primary objective (finding a bus) with a single tap.

Metaphor 4: The "Conversational Guide" (System Text)

• Description: The interface uses conversational phrasing rather than rigid system commands, such as "Hi Qil, Ready to ride?" and the contextual weather warnings.

• Justification: This metaphor treats the system not as a sterile database, but as a knowledgeable campus guide. It establishes a friendly, supportive tone that builds trust and aligns perfectly with the goal of reducing commuter stress.