Public transit often requires commuters to switch between different tools to plan a route, check vehicle locations, and purchase tickets. Our goal was to bring these functions together in one application so users could complete their journey with fewer steps.
The core flow takes users from selecting a destination to reviewing available routes, confirming their route, purchasing a ticket, and viewing the trip on a map.
One flow, fewer decisions
We designed Transit Genie around a straightforward, linear flow. Users begin by selecting their origin and destination, then review potential routes before confirming their choices.
Users enter their origin and destination to begin planning the trip.
Potential routes display travel time and estimated arrival information so users can compare options.
Users can review the selected route and see a map before proceeding.
The ticket-purchasing step keeps payment within the same experience rather than sending users to another service.
Because the app was intended for commuters using public transportation, we designed the interface for a mobile screen and kept the visual system intentionally simple. A limited palette of white, blue, black, and gray helped maintain visual clarity, while icons and maps communicated information without relying entirely on text.
This project reinforced the importance of presenting information in a way that supports quick decisions. Transit Genie brought several transportation tasks into one flow while keeping the interface focused on the user's immediate goal: getting from one place to another.
Tools: Figma · HTML · CSS · JavaScript
Course: CSEN 163 — Web Usability
Team: 4 students