November 2023
Transmate - AR Transit Platform
AR-enhanced transit experience with overlay directions and live arrival times.
FigmaAdobe XDIllustrator
Project Overview
Transmate is an Augmented Reality (AR) navigation companion for urban transit systems, specifically designed to help commuters navigate complex stations and transfer points in Jakarta's Transjakarta network. By leveraging the smartphone camera, the app overlays real-time directional cues, arrival times, and platform information directly onto the user's view of the physical world. This 'Heads-Up' navigation style solves the disorientation many riders feel when deciphering 2D maps in crowded, chaotic environments.\n\nMy role as Lead UX/UI Designer involved pushing the boundaries of mobile interaction. I used Adobe XD and Figma to conceptualize the AR overlays, testing various opacity levels, contrast ratios, and iconography to ensure the digital information was legible against dynamic real-world backgrounds. The application also includes a classic map view for route planning, a trip cost calculator, and a report feature for facility issues. This project explores the intersection of physical space and digital information, demonstrating how AR can be a practical utility for daily infrastructure rather than just a gimmick.
Role
Lead UI/UX Designer & Interaction Prototyper
Timeline
November 2023
Tools
Figma, Adobe XD, Illustrator
Links
-
Key Responsibilities
- AR interface mockups design
- Iconography creation
- Interaction flows design
Impact & Results
- AR concept validated by Transjakarta stakeholders
- ~80% user interest in AR navigation feature
- Prototype showcased at 2 tech conferences
- Received recognition from AR/VR design community
Challenges
The Challenge
Designing AR interfaces that are visible in varying lighting conditions (day/night/indoor) without obstructing the user's view of potential safety hazards like oncoming buses or crowd flow.
Problem
Navigating large transit hubs can be overwhelming using traditional 2D maps. Commuters often struggle to translate 'turn left at the blue dot' on a screen to the complex physical reality of a multi-level station.
Spatial disorientation
2D maps fail to effectively communicate verticality and complex indoor paths.
Information overload
Stations are filled with visual noise (ads, crowds), making static signage hard to spot.
Transfer anxiety
The fear of missing a connection or taking the wrong exit causes stress for new riders.
Accessibility gaps
Traditional signage often lacks support for non-native speakers or visually impaired users.
Solution
Transmate overlays the path forward directly onto the real world. I designed the AR interface to act as a 'virtual guide', painting arrows on the floor and floating labels above platform gates.
AR pathfinding
Virtual arrows and markers overlaid on the camera feed guide users step-by-step.
Live platform data
Floating cards above bus bays show real-time arrival countdowns.
Adaptive contrast
UI elements that automatically adjust brightness/color based on environmental lighting.
Safety-first HUD
A peripheral-free center view ensures users can still see obstacles while navigating.
Process
The Journey
Contextual Inquiry
Shadowed commuters in busy stations (like Harmoni and Blok M) to identify specific points of confusion.
AR Storyboarding
Sketched 'through the lens' scenarios to determine how UI elements should behave when the user moves their phone.
Interface Design
Created the 'Heads-Up Display' (HUD) elements in Adobe XD, ensuring they were distinct from typical Android/iOS system markers.
Field Usability Testing
Tested static AR mockups on location to verify if text sizes and color contrasts held up in direct sunlight.
Motion Prototyping
Animated the arrival of virtual buses and route lines to communicating 'active' states without overwhelming the user.