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 & Developer

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

Interview illustration

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.

User Interviews

Research Plan

  • Interviewed 5 students and staff to gather insights on transportation challenges.
  • Extracted themes such as shuttle unreliability, overcrowding, and parking difficulties.
  • Used findings to guide features like real-time tracking, occupancy data, and route optimization.

Participant Information

  • Total Participants: 5
  • Names: Jackson, Alex, George, Summit, Steven
  • Age Range: 20-35 years old

General Focus: Identifying key transportation challenges, primary commute methods, and desired technology features for campus transit.

Interview Questions

  1. Can you describe your daily commute to and from the University of Pittsburgh? What are the most significant challenges you face?
  2. How do you typically plan your transportation routes? Are there any tools or services you currently use to help with this?
  3. Have there been any instances where your transportation options were particularly unreliable or inefficient? How did that impact your day?
  4. In what ways do you think technology could improve your overall transportation experience, whether it’s commuting, navigating the city, or finding real-time updates?
  5. What features or improvements would you most want to see in a transportation app or system that would make your daily commute more efficient or less stressful?

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

Sorting thoughts illustration
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

Create illustration
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 swipe navigation and icon-based controls let users seamlessly move between live stops, route tracking, notifications, and feedback.

Key features include live GPS tracking with compass heading, estimated occupancy per route (Likely Full / Moderate / Seats Available), search-to-filter by location or route name, and pull-to-refresh for instant alert updates. Transit data is cached via IndexedDB for offline access, and the app is installable as a Progressive Web App for a native mobile experience.

Riders can find shuttle times, view capacity and service alerts, and submit feedback with file attachments in a clean, distraction-free interface.

SmartShuttle Poster

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

  • Implemented geolocation with live GPS tracking and compass heading for real-time user positioning.
  • Created interactive map with Leaflet.js and Transit API integration for live stop locations, route polylines, and departure countdowns.
  • Built estimated occupancy system that evaluates crowding per route using vehicle type, time of day, and day of week.
  • Integrated Lottie animations for engaging UI elements and improved user experience.
  • Added live service alerts with notification filters, search, and pull-to-refresh.
  • Established feedback collection with GitHub Issues integration and image file attachment support.
  • Implemented IndexedDB caching for offline transit data and instant display on return visits.
  • Built full PWA support with a service worker and install prompt for a native app experience.

Reflection

Initially, I hadn't planned to implement my Figma prototype, but after developing Financier and Magnate it became a fitting challenge. I built the core functionality and gained experience integrating the Transit API and a GitHub Issues-based feedback system, managing environment variables securely along the way.

Since the initial build, I've added IndexedDB caching for offline data, live GPS tracking with compass heading, estimated occupancy predictions, and full PWA support. The feedback system now supports image attachments, and route tracking includes tap-to-stop polyline support.

While the app functions well, real-time vehicle movement on the map remains unavailable due to Transit API limitations, and occupancy estimates are heuristic rather than based on live sensor data. These constraints provide clear direction for future iterations.

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