Back to ProjectsCity Diver is a mobile app that helps users plan personalized city trip routes. Users select sights or activities, and the app creates a route based on trip length, weather forecast, hotel location, and best transportation options.
Optimize the core feature: planning a route
Improve the user flow of the app
The project began when a rough design and the underlying algorithm were already in place. The original design was clunky and difficult to navigate.
High fidelity wireframes
Mid fidelity prototype
I was the UX lead on this project and developed the design together with two colleagues.
This project was completed while working at the agency, be water, my friend.
The aim of the workshop was to better understand the app’s concept, algorithm and target audience. There was no budget for user research for this project, so we had to rely on these discussions to pinpoint the end users.
City Hopping Couple
Methodical Family Trip Planner
Student Trip Organizer
Culture-Seeking Solo Traveler
In addition, I researched user flows and best practices from other travel planning apps. The aim was to understand if there are any established conventions that users might be comfortable with and to analyze how competitors solve certain challenges.
Visit A City
Trip Planner
Wanderlog
Travel Planner
TripIt
Travel Planner
Create clear steps for the user to follow, supported by intuitive navigation
Provide coherent features for editing the route, assisted by an uncluttered design
Present users with necessary features and information, never overwhelming them
We identified a high-level user flow, inspired by the user profiles. Our focus was to optimize the core feature: planning a route. We achieved this by keeping the app’s complexity to a minimum and guiding the users through the route planning process step by step.
The app's flow is simple: users browse city sights and activities, saving their favorites along the way. When they are ready to plan a route, they enter trip details like dates, arrival location, and accommodation. After reviewing their favorite stops, a route is calculated, which can then be customized.
Creating initial sketches of the various screens and screen states simplified the wireframing process.
This screen provides a clear overview of the route and let users adjust it by reordering or removing waypoints, changing transportation modes, and adjusting time spent at waypoints.
The route can be viewed as a list or on a map.
We decided to let the users explore the app before being forced to log in, so as not to scare them away from the MVP. If you continue to the 'Explore' screen without logging in, a city is selected by default (first alphabetically).
If you choose to log in, you are asked which city you want to start exploring.
The improved user flow made the app more functional and user-friendly. During the process, I enjoyed the challenge of collaborating with stakeholders like the marketing team and developers. A trial-and-error process, constantly rethinking design choices, helped create a logical route planning flow.
City Diver was released in the high fidelity wireframe stage (as an MVP) and would benefit from a polished brand identity and UI design. More importantly, however, the app would need to be tested with users. Ideally usability tests would be conducted with multiple participants to understand their behavior and pain points.
An issue which was beyond our control is the route output, which can sometimes be illogical. Fixing these long transfer times between waypoints or unevenly planned days would make the app more cohesive. More testing would reveal and help solve these quirks.
The app is available for download on both the App and Google Play Stores, currently only in German.
Check out the next project
