Skip to content

This contains the UI/UX design materials for the BeShuttle project, including wireframes, prototypes, and interactive mapping.

Notifications You must be signed in to change notification settings

ludreinsalvador/beshuttle-ui-ux-prototype

Repository files navigation

Mockup

BeShuttle: A Benilde E-Shuttle Tracker Companion Mobile Application

Project Collaborators:

  • Ludrien Salvador: UX Researcher, UI/UX Designer, Documentation
  • Joshua Vinson: UX Researcher, Documentation

Figma Designs and Prototype

🔗 View the UI/UX Design: Figma Design
🔗 View the High-Fidelity Prototype: Figma Prototype


Project Overview

BeShuttle is a mobile companion app developed for De La Salle-College of Saint Benilde (DLS-CSB) to enhance the e-shuttle experience. The application addresses common challenges like inconsistent shuttle timings and lack of updates by providing:

  • 🛰️ Real-time shuttle tracking
  • 📅 Live schedule monitoring
  • 👥 Rider count notifications

Key Features

  • GPS Real-Time Tracking – Live updates on shuttle locations.
  • Schedule Monitoring – Accurate arrival times, with alerts for delays.
  • Rider Count Updates – Displays shuttle crowd level estimates.

User Research Insights

Findings from surveys and interviews:

  • 65% struggled to determine shuttle locations in real time.
  • 35% expressed the need for a feature showing rider count.
  • 60% reported inconvenience due to lack of notifications.
  • Common frustrations: inconsistent shuttle schedules and no real-time alerts.

Competitive Analysis

Apps like Pasahero, Irenbus, and RideExpress offer similar features but fall short in privacy and school-specific integration.
BeShuttle stands out by being:

  • Tailored for DLS-CSB students and staff
  • Minimal in permissions & data collection
  • Focused on safety and accuracy

Wireframes & Prototype Screens

  • 🏠 Home – Displays current status of e-shuttles
  • 📍 Tracker – Shows shuttle’s live map location
  • 📅 Schedule – Lists estimated arrival times
  • 🔢 Rider Count – Displays occupancy of each shuttle

Design Assets

Low-Fidelity Screens

Low-Fidelity Key Screens

High-Fidelity Prototype Screens

Prototype Key Screens

Interactive Mapping View

Interactive Mapping

General UI Assets

Assets


Usability Testing & Enhancements

Based on user testing, we implemented the following:

  • Password tooltip guidance on signup
  • Better profile customization options
  • Improved layout for shuttle timetables
  • Color-coded rider count system
  • First-time user tutorial

Conclusion

BeShuttle improves mobility within DLS-CSB by delivering a smarter, more connected e-shuttle experience. With real-time data, intuitive design, and continuous iteration, the app empowers students and staff to commute with confidence and convenience.

About

This contains the UI/UX design materials for the BeShuttle project, including wireframes, prototypes, and interactive mapping.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published