JS PORTFOLIO / B2B & B2C / MOBILITY & TRANSIT
Building a mobile-first shuttle ecosystem for a 3,000+ bus fleet.
Mobility
B2B & B2C Platform
Multi-Role Ecosystem
ROLE
Product Designer
SERVICE PROVIDED
Product Design, Design System, Qualitative Research
SCOPE
Admin Portal + Driver App + Customer App
Target Audience
Working Professionals, Students, Daily Commuters
3,000+
Buses Supported
Scalable fleet operations
30%
Faster Route Planning
Compared to legacy / manual methods
↓
Reduced Booking Drop-Offs
Via rescheduling, cancellation, seat-change options
01 — THE PROBLEM
What the client was up against.
CORE PROBLEM
The most significant challenge was route planning and management within the admin portal high complexity, high chance of error if not optimized.
Managing routes and premium subscription plans required a unique design approach beyond generic transit-app patterns.
The system needed to simplify fleet operations for admins while giving customers reliable, flexible travel options.
WHO FELT THE PAIN
FLEET / ROUTE ADMIN
Route planning and management was the most complex, error- prone daily task
Needed clear workflows for
premium plans and user subscriptions
Goal: Plan and manage routes across 3,000+ buses without operational chaos
DRIVER
Needed clarity on upcoming rides and the ability to accept /
reject trips
No easy way to report issues or
communicate operational needs
Goal: A simple, low- friction way to manage each ride from start to finish
PASSENGER / COMMUTER
Lack of flexibility in managing bookings — rescheduling,
cancellations, seat changes
Difficulty tracking pickup points
Limited access to customer support
Goal: Book, track, and manage rides with confidence and minimal friction
02 — DISCOVERY
01
Client Interviews
Understood the client's vision and
operational pain points directly.
02
Heuristic Evaluation
A full heuristic evaluation of the
Citiflow app — user flows, usability
gaps and technical limitations — to uncover differentiation
opportunities.
03
Driver Feedback
Direct feedback from drivers on
ride clarity, trip flexibility, and
reporting needs.
04
Customer Research
Studied expectations through
existing apps (Citiflow and others) frustrations around booking
flexibility, pickup tracking and
support access.
KEY INSIGHT
Route planning and management was the most complex and critical task for admins, with high chances of error if not optimized this became the central design problem the whole system was built around.
03 — STRATEGY
Resolving the core issue of route planning, while scaling across three platforms.
Admin-First Problem Solving
Scalability by Default
Role-Specific Simplicity
04 — ECOSYSTEM
Three connected platforms, one shuttle system.
CENTRAL SYSTEM
Admin Portal
Driver App
Navigation, route updates, operational communication
Customer App
Booking, payments, real-time shuttle tracking
USER FLOW
Admins create and manage routes and fleet assignments centrally. Drivers receive ride assignments and report status in real time. Customers book, track, and manage trips independently — with changes syncing back to the admin and driver views.
05 — SYSTEM
Colors below are sampled directly from the shipped screens and flow diagrams not re-specified after the fact.
CUSTOMER & DRIVER APP
Sampled from screens
#1677FF
#D4E5FD
#26457D
#F2F5FF
ADMIN PORTAL
Sampled from screens
#74AEFF
#DCEBFE
#D4FDEA
#6B7A8C
Admin portal — planning
Region setup → pickup point mapping → route sequencing, with time-to-reach estimates for each stop.
DRIVER APP — FLOW
Onboarding → Home / My Ride / Settings, with the accept-reject decision at pickup.
CUSTOMER APP — FLOW
Onboarding → booking, ongoing trips, trip management rules, and the support path.
COMPONENT INVENTORY
Only components that appear in the shipped screens.
Route builder tables
Seat-selection grid
Profile & settings rows
Scheduling calendar & time pickers
Map & live-tracking view
Bottom tab bar
Booking detail panels
Search & location suggestions
Stop-sequence lists
Filter sheets
Confirmation modals
E-ticket & payment summary
Ride cards
Support / live chat
06 — DEEP DIVE · PLATFORM 01
The operational core: route creation, scheduling, fleet management and premium plans.
RESEARCH
Client discussions to identify key operational pain points
Analyzed Citiflow's admin functionality to benchmark usability and features
Key finding: route planning was the most complex and critical admin task, with high chances of error if not optimized
DESIGN APPROACH
An intuitive portal focused on route creation, scheduling and fleet management
Clear workflows for premium plans and user subscriptions
Scalability prioritized to handle 3,000+ buses seamlessly
RESULTS
Simplified route planning and reduced admin effort
Faster configuration of schedules, leading to smoother operations
Visibility and control across the entire fleet
07 — DEEP DIVE · PLATFORM 02
Every ride from assignment to pickup, in as few screens as possible.
RESEARCH
Driver feedback on clarity of upcoming rides, ability to accept / reject trips, and easy issue reporting
Benchmarked competitor apps to identify missing features and driver pain points
DESIGN APPROACH
Designed around simplicity and efficiency. Key features:
Accept / reject ride
Upcoming & later rides
Start ride + pickup
Profile settings
Report issue
No Show
RESULTS
Reduced driver confusion with clear ride status flows
Smoother communication between drivers and admins
Improved driver satisfaction through more control and support
08 — DEEP DIVE · PLATFORM 03
Book, track and change a trip without calling anyone.
RESEARCH
Studied user expectations through existing apps (Citiflow and others)
Frustrations identified: no booking flexibility, difficulty tracking pickup points, limited customer support
DESIGN APPROACH
A flow emphasizing ease of booking, managing trips and accessing support Reschedule or cancel up to 2 hours before departure; seat-change options Google Maps integration for pickup directions; live help chat Profile area for booking history, route passes and support access
RESULTS
Enhanced customer control over bookings
Reduced missed rides with integrated navigation
Improved trust and reliability through transparent support channels
09 — DECISIONS
Decision 01
Concentrating Design Effort on Admin
Route Planning
CHALLENGE
Driver and customer flows followed generic transit patterns; the real
complexity was in admin route and premium-plan management.
SOLUTION
Focused the deepest design work on the admin portal's route planning and
scheduling tools.
WHY IT MATTERS
This was the task most likely to cause operational errors at scale.
DESIGN IMPACT
Admin portal got the most detailed, custom-built workflows of the three
platforms.
Decision 02
Time-Boxed Flexibility for Passengers
CHALLENGE
Rigid booking systems caused customer frustration and missed rides.
SOLUTION
Rescheduling and cancellation up to 2 hours before departure, plus seat-
change options.
WHY IT MATTERS
Reduced booking drop-offs and missed rides.
DESIGN IMPACT
Booking management surfaced directly in the customer profile area.
Decision 03
Accept / Reject Flexibility for Drivers
CHALLENGE
Drivers needed control over trip assignments without adding complexity.
SOLUTION
A simple accept / reject decision point built directly into the ride flow.
WHY IT MATTERS
Improved driver satisfaction and reduced confusion.
DESIGN IMPACT
Clear ride-status flow with minimal screens.
Decision 04
Designing for Scale From Day One
CHALLENGE
The system needed to support 3,000+ buses without breaking down
operationally.
SOLUTION
Every admin workflow — route creation, scheduling, fleet management —
treated scalability as a first-class constraint.
WHY IT MATTERS
The platform needed to work at fleet scale, not just for a pilot.
DESIGN IMPACT
Table-dense, filterable, bulk-capable admin views.
10 — TRADE-OFFS
CONSTRAINT
TRADE-OFF
ACCEPTANCE
Competing with an established player (Citiflow)
Needed clear differentiation, not just parity
Heuristic evaluation of Citiflow shaped where to
differentiate
Three distinct user roles, one ecosystem
Each platform needed its own UI patterns and
density
Role-specific design over one-size-fits-all
Scale to 3,000+ buses
Admin tooling needed more operational depth than a typical transit app
Depth where it mattered most: route planning
Passenger flexibility (reschedule / cancel / seat
change)
More edge cases to design for in booking flows
Flexibility was core to reducing missed rides and
drop-offs
11 — OUTCOME
3,000+
Buses supported with scalable operations
30%
Faster route planning for admins vs. legacy / manual methods
✓
Supported 3,000+ buses with scalable operations
✓
Delivered 30% faster route planning for admins compared to legacy / manual methods
✓
Reduced booking drop-offs through rescheduling, cancellation and seat-change options
✓
Improved driver efficiency with clearer upcoming ride visibility and simplified acceptance flows
✓
Enhanced customer trust through live support chat and integrated navigation, lowering missed rides and complaints
12 — REFLECTION
Mobility at Scale Changes What "Generic" Means
"While many customer and driver app flows seemed generic at first, the real challenge lay in admin-side route planning and premium plan management."
Focusing research and design effort on the toughest operational problem is what created real impact.
Small Planning Inefficiencies Become Large Operational Costs
"In large transportation systems, the smallest inefficiencies in planning ripple into huge operational costs."
Designing with a systems-level perspective changes how you prioritize.
"This project deepened my understanding of balancing business goals, user needs, and operational realities in complex B2B & B2C ecosystems."
Three distinct user roles meant three distinct sets of constraints to design around simultaneously.
Building Bus Shuttle Management meant designing for three very different users at
once and learning that in large transportation systems, the smallest planning
inefficiencies ripple into the biggest operational costs.
Want to talk logistics, mobility, B2B & B2C platform, or product design? Let's connect.