Disclaimer: This is a personal passion project created purely out of interest in UI/UX design and iOS development. It is not affiliated with, endorsed by, or connected to The Ohio State University or the official Campus Area Bus Service (CABS).
CABSFlight is an unofficial, real-time campus transit tracker designed with a relentless focus on aesthetics and user experience.
The project explores how modern Apple design languages—specifically the "Liquid Glass" aesthetic—can transform a standard utility app into a premium, tactile experience. It aims to solve the friction of inaccurate bus ETAs while delivering an uncompromising, fluid interface.
The current prototype already runs an end-to-end tracking experience against a self-contained local simulation: live bus movement, stop-aware ETA prediction, Live Activities, and a Dynamic Island integration, all wired to the UI without a backend dependency.
A summary of where the project has moved since the initial prototype:
- Live Activity + Dynamic Island — Compact, Expanded, and Lock Screen presentations for live bus arrival tracking.
- Local simulation engine —
CABSMockEnginesimulates vehicle movement, ETAs, and stop predictions, decoupling the entire UI layer from the backend during development. - Activity lifecycle management —
CABSLiveActivityManagerstarts, updates, and ends Live Activities from the bottom drawer / tracking flow. - Route color system —
BusBadgeView+CABSColorsgive each route a consistent identity across the app and Live Activities. - Map stability — Fixed camera race conditions and locked the map viewport to route stops to prevent extreme zoom-out, with broader UI stabilization for folded loops like the WMC route.
- Map layer polish — Tuned stop-marker size and shape in
LiquidMapLayerfor clearer at-a-glance readability.
The screenshots below represent current UI/UX prototypes running against the local simulation engine.
| Onboarding Experience | Dynamic Backgrounds | In-App Interface |
 |
 |
 |
| Dynamic Island (Expanded / Compact) | Lock Screen Live Activity | Live Bus Tracking |
 |
 |
 |
Rather than focusing solely on backend data, this project is an exercise in frontend interaction design:
- Liquid Glass Aesthetic: Utilizing modern iOS materials to create a sense of depth. Floating panels and route chips realistically refract the underlying map, making the UI feel like physical glass.
- Algorithmic User Experience: A custom prediction model factors in stop dwell times and campus traffic, preventing the infinite "1 minute away" problem when buses are holding at terminals.
- Physics-Based Interactions: Seamless state transitions and tactile feedback so the interface feels organic and responsive to touch.
- Glanceable Live Activities: Bringing the tracking experience out of the app and onto the Lock Screen and Dynamic Island.
This project is in active development. The prototype already includes Live Activities and Dynamic Island (validated against a local mock environment), and map interaction and stability are being iterated on continuously (camera race-condition fixes, viewport locking, UI stabilization).
Done / In Progress
- Initial MapKit setup and custom map styling
- "Liquid Glass" UI architecture and layout
- Onboarding flow with Mesh Gradient backgrounds
- Local simulation engine (
CABSMockEngine) for ETAs and vehicle state - Live Activities & Dynamic Island — Compact / Expanded / Lock Screen presentations
- Route color system (
BusBadgeView+CABSColors) - Map robustness — camera race-condition fixes and viewport locking
- [~] Predictive scheduling — stop-aware ETA holding, with glanceable itineraries in progress
Planned
- Live data integration — swap the mock engine for the real CABS endpoint (the public model shape is already aligned)
- Multi-Route Orchestration: Seamless UX flows for complex transfers and multi-bus commutes.
- Smooth Movement Interpolation: Physics-based vehicle animations to eliminate jarring map-marker jumps.
CABSFlight/
├── CABSFlight/ # Main app target
│ ├── CABSMockEngine.swift # Self-contained local simulation (ETAs, vehicle state)
│ ├── LiquidGlassView.swift # Liquid Glass map UI + LiquidMapLayer
│ ├── CABSColors.swift # Shared route color palette
│ └── ...
├── CABSFlightWidget/ # Live Activity / Dynamic Island target
│ ├── CABSFlightLiveActivity.swift # Live Activity entry point & presentations
│ ├── BusBadgeView.swift # Route badge used in Live Activities
│ └── CABSColors.swift
├── CABSFlightAttributes.swift # ActivityAttributes / shared Live Activity data model
├── Models/ # Bus, Route, Stop, APIResponse
├── ViewModels/ # Tracking, API service, CABSLiveActivityManager, preferences
├── Views/ # Map container, bottom sheet, onboarding, route picker, settings
└── Theme/ # GlassCard and theming
- Platform: iOS 26 (Swift, SwiftUI)
- Frameworks: SwiftUI, MapKit (custom map layer + interaction-stability work), ActivityKit & WidgetKit (Live Activities / Dynamic Island)
- Architecture: MVVM, with
CABSMockEngineas a swappable local data source mirroring the eventual live API shape - Design Tools: Figma, Apple HIG
Requirements
- Xcode 26 or newer (iOS 26 SDK)
- iOS 26 deployment target — Live Activities and Dynamic Island require a recent OS / device
Run
- Open
CABSFlight.xcodeprojin Xcode. - Select the CABSFlight scheme and a simulator or device running iOS 26+.
- Build & run. The app launches against
CABSMockEngine, so no backend or API keys are required to explore the full UI.
Designed and engineered by Steve Wang.
I am a Senior Electrical and Computer Engineering student at The Ohio State University, specializing in bridging the gap between technical engineering and high-fidelity visual design.
- Portfolio: fusiondrive.github.io
- GitHub: @fusiondrive