SmartShuttle Project

The SmartShuttle tracking app addresses inefficiencies in the University of Pittsburgh’s campus shuttle service, focusing on inconsistent arrival times, overcrowding, and unreliable updates. It provides real-time GPS tracking, estimated arrival times, occupancy details, and more, enabling students and staff to plan their commutes more efficiently.

CLIENT
INFSCI 0410 - Human Centered Systems

MY ROLE
UI/UX Designer

TEAM
Individual Contribution

TIMELINE
3 weeks in Fall 2024

Inspiration

The SmartShuttle concept began as a response to persistent issues with Pitt’s campus shuttles. Riders frequently face late or crowded buses without reliable arrival updates, making each trip uncertain. Combining GPS tracking with live occupancy data provides students and staff clear information on when and where shuttles arrive. SmartShuttle uses existing mobile and location technology to make planning a campus commute simple and stress-free.

Phase 1
-
Interview Qs and Answers

Phase 1 diagram Phase 1-2 diagram

Phase 1 focuses on user research and requirements gathering. Interviews with students and staff revealed challenges such as shuttle unreliability, overcrowding, and parking difficulties. These findings informed the initial design of SmartShuttle’s real-time tracking, occupancy data, and route optimization features to address key user pain points.

Transportation Challenges Analysis

Visualizing key findings from user interviews.

Interviewee Transportation Summary

Name Primary Method Main Challenge Key Tech Need
Jackson Shuttle Unreliable timing, overcrowding Accurate times, occupancy info
Alex Shuttle Unreliable timing, doesn't stop Accurate times, reliable stops
George Car Parking difficulties Real-time parking info
Summit Walking Hilly terrain, distance Alternative transport (bikes/scooters)
Steven Shuttle Unreliable timing, overcrowding Accurate times, occupancy info

Top Transportation Problems

Common Commute Methods

Desired Technology Features

Phase 2
-
Technical Solutions

Phase 2 diagram Phase 2-2 diagram

Phase 2 encompasses finalizing SmartShuttle's key features and planning for deployment. Features include real-time GPS tracking of shuttles, push notifications for delays and arrival times, occupancy displays to help users plan, and a feedback mechanism for reporting issues. Implementation strategies involve collaborating with the University's transportation department to install IoT sensors and GPS trackers, developing native mobile apps for iOS and Android, piloting on high-demand routes, and collecting user feedback to refine the system. This phase ensures a scalable, cost-effective rollout that addresses shuttle inefficiencies while laying the foundation for future enhancements.

Brainstormed Solutions

Visualizing the 5 brainstormed solutions for implementation.

Brainstormed Solutions Summary

Solution Description
SmartShuttle Tracking App Develop an app that integrates GPS tracking with real-time updates on shuttle locations, estimated arrival times, and passenger capacity.
Dynamic Shuttle Scheduling System Introduce an AI-powered scheduling system that adapts to peak usage times, adding or reallocating shuttles to high-demand routes dynamically.
Smart Parking Management System Create a parking app that shows available spots in real-time and suggests alternative parking areas.
Campus Micro-Mobility Solution Implement another fleet of shared electric scooters or bikes with designated docking stations across campus.
Automated Shuttle Stop Recognition Equip shuttles with automatic detection systems to ensure they stop when passengers are present at shuttle stops.

Phase 3
-
Core Features and Functionality

Phase 3 diagram Phase 3-2 diagram

Phase 3 focuses on final refinement, interface design, and ethical considerations. The app includes a Welcome screen for onboarding, Live Tracking map, Live Notifications area, a Settings page, and a User Feedback form ensuring anonymity. User feedback is collected through in-app forms and surveys to drive iterative improvements. Ethical considerations such as privacy (minimal data collection, anonymized GPS), inclusivity (accessibility for users with disabilities), and fairness (unbiased notifications and shuttle details) ensure the app serves all users responsibly.

Final Design

The final SmartShuttle interface emphasizes clarity and ease of use. A real-time map displays shuttle locations and occupancy levels, while a clean, icon-based navigation enables users to quickly switch between live shuttles, route tracking, notifications, and feedback.

Each screen balances functionality with minimal visual clutter, allowing riders to easily find shuttle times, view capacity and service alerts, and submit feedback without distraction.

Recent enhancements include notification filters and improved accessibility features with better WCAG compliance, ensuring the app serves users with diverse abilities and needs.

SmartShuttle Preview

SmartShuttle Figma Prototype

This prototype went through several iterations before I finalized the design. The settings page, for instance, evolved significantly from a basic interface with simple toggles to a more comprehensive notification page displaying a live feed of service-related transit alerts. My primary goal was to create an intuitive interface for students and staff that balanced minimalism with comprehensive functionality. I believe this approach resulted in a design that is both user-friendly and feature-rich.

Live Website

Overall Outcomes

  • Successfully implemented core functionality including geolocation to access the user's location for finding nearby shuttles.
  • Created interactive map with Leaflet.js and Transit API integration for live transit stop locations.
  • Integrated Lottie animations for engaging UI elements and improved user experience.
  • Implemented real-time shuttle status and departure information display.
  • Added live updates about shuttle status and service details.
  • Established feedback collection system with GitHub Issues integration.

Reflection

Initially, I hadn't planned to implement my Figma prototype, but viewed it as an appropriate challenge after developing Financier and Magnate. I successfully built the core functionality and gained valuable experience integrating the Transit API and a GitHub Issues-based feedback system, while managing environment variables securely.

While the application functions well, several areas remain for enhancement: the feedback system doesn't support file attachments, the Live Stops page can't display real-time vehicle movement due to API limitations, and route tracking could benefit from polylines. These limitations provide clear directions for future development.

This project strengthened both my design and development skills, resulting in a functional application that provides transit information to students, staff, and commuters—demonstrating the full cycle from design concept to implementation.