Routely: Your Route, Your Way
Traveling across Europe by bus sounds simple, but with dozens of separate operators, each with their own website and booking system, finding and comparing options quickly becomes overwhelming. International travelers are left juggling multiple tabs, deciphering foreign websites, and guessing at local boarding procedures. There's no single place to just search, book, and go.
Pain Point #1
Mapping out the information architecture early on was crucial to Routely's design process because it clarified exactly what users needed first. Which is a clear step-by-step guidance, real-time alerts, and consistent information across all carriers
The core actions flow was designed to reduce decision fatigue at every step by surfacing familiar routes upfront, ranking results by best fit, and collapsing complexity into a single linear path from selection to confirmation.
One challenge I ran into was figuring out the best format for the live updates feature, which is the part of the app that surfaces real-time delays, cancellations, and service alerts.
My initial instinct was to consolidate all alerts into a single card because I thought it would feel cleaner and save users from having to scroll through a long list. Looking back, I was designing more for visual tidiness than for actual usability.
As I sat with it more, I realized the real question wasn't 'how do I make this look clean?' instead it was 'how do I make this information easy to digest at a glance?' When someone is rushing to catch a bus/train, they don't need a tidy card, they need to immediately spot what's relevant to their trip.
The redesign separates alerts into three color-coded tiers: General, Urgent, and Warning so that users can triage at a glance without reading a single word.
The core insight was that alerts aren't just information, they're decisions. Commuters don't have time to parse bullet points mid-rush, they need the app to prioritize for them. Building urgency into the visual hierarchy does exactly that.
The map feature was split into its own screen because once you've booked, your needs completely change; you're no longer searching, you're traveling. So the design shifted to match that. Named pins so you can actually see your route at a glance, live tracking so you're not left wondering where the bus is, and a big "time remaining" bar because that's the one thing everyone wants to know once they're on board.
Saved routes are surfaced immediately on launch, reducing the need to search from scratch each time
A live updates panel using color coded urgency levels so users can act on delays or cancellations at a glance
Saved and recent routes are accessible directly from the home screen for quick repeat bookings
The search bar accepts routes, cities, or stations and returns results dynamically as users type
From / To fields with a swap button let users reverse a route without re-entering details
Sort By, Filter, and Category controls let users narrow down results by price, time, and amount of transfers surfacing the most relevant trip options at the top
Departure and arrival times, duration, origin and destination stops, and seat availability are all shown in one view
Operator and trip info (Wi-Fi, power outlets, restrooms) is surfaced as icons so users can evaluate comfort before booking
An e-ticket availability badge confirms users won't need to print anything physically
Displaying the active route between two cities with a real-time position indicator for users to always know where their bus is
A persistent status bar at the bottom at a glance without interrupting the map
This screen distinguishes Routely from basic ticketing apps by extending utility beyond the point of purchase
Upcoming trip with its necessary QR code is accessible directly from the profile, giving users a dashboard view of their travel history and plans
A rewards tracker (220 pts) gamifies repeat usage and gives users a reason to stay loyal to the platform
Settings are organized clearly so users can update any detail without hunting through nested menus