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.
Client UX Project
2 Months / 2023
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.
High fidelity wireframes
Mid fidelity prototype
The aim of the workshop was to better understand the app’s concept, algorithm and target audience. The client explained their idea and current product, which was a very basic, rough design with the algorithm already in place.
There was no budget for user research for this project, so we had to rely on these discussions to pinpoint the end users. We focused on four user types that would account for the app's frequent users.
City Hopping Couple
Methodical Family Trip Planner
Student Trip Organizer
Culture-Seeking Solo Traveler
I researched user flows and best practices from other travel planning apps.
A few important conventions I discovered included using the tab navigation as a core element of the app, how to display routes in a list and inspiration for creative onboarding.
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.
The focus is on the core feature: planning a route. This process has been simplified and the number of steps needed to plan a route have been reduced. Other features of the app have been kept to a minimum.
Creating initial sketches of the various screens and screen states simplified the wireframing process, since the basic designs for each step were already in place.
The client's initial lo-fi wireframes had too much information, no clear hierarchies, too little color contrast and a confusing user flow.
The route 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.
The improved user flow made the app more functional and user-friendly, with less steps required to plan a route, logical tab navigation and clear hierarchies throughout.
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.
The app has a 5-star rating on both the App and Google Play Stores! ⭐
Are users successfully planning routes? Are they getting stuck at any point in the flow? Once the route is planned, is it shared?
How many users have downloaded the app, and is it continuously interacted with once installed? What is a typical session duration?
City Diver was released in the high fidelity wireframe stage (as an MVP) and would benefit from a polished visual design.
More importantly, however, the app needs to be tested with users. Ideally usability tests would be conducted with multiple participants to understand their behavior and pain points.
The route output, which is occasionally illogical, was a challenge beyond our control. Addressing lengthy transfers between waypoints and unevenly scheduled days would make the app more cohesive. Additional testing would help identify and resolve these quirks.
The app is available for download on both the App and Google Play Stores, currently only in German.
Certain aspects of the design have been altered since we worked on it, these changes were out of our hands.
Check out the next project
ⓒ Magdalena Weiss, 2024
Imprint & Privacy
