ROUTEWISE

Designing a 0→1 MVP to help travelers create optimized routes for their daily travel itinerary.

CONTEXT

It often takes weeks and hours of scouring the web and doom-scrolling social media apps to collect a list of the best places to visit, things to eat, and activities to experience. Yet, just having a list is not enough.


I worked with a team to design the initial MVP as part of Co.lab’s 8-week Product Bootcamp. Following the program, we decided to continue collaborating on the product to fix bugs, improve the MVP experience, and add new features.

TIMELINE

Oct 2023 - May 2024

ROLE

Product Designer

TOOLS

Figma, FigJam, Maze, Zeplin

TEAM

Cheryl Chen, Product Manager

David Ekunno, Front-end Developer

Kate Lueders, Back-end Developer

Cheryl Chen, Product Manager

David Ekunno, Front-end Developer

Kate Lueders, Back-end Developer

OVERVIEW

Generate an optimized itinerary that groups the places you want to visit and recommendations personalized to you by proximity.

This case study focuses on the main product value of creating an itinerary and encompases two phases:

  • Phase 1, which occurred between October-December 2023 and encompasses the Co.lab 8-week bootcamp

  • Phase 2, which occurred between January-May 2024 and addresses iterations additional MVP features.

PHASE 1: USER RESEARCH AND DEFINING THE PROBLEM

Travelers find planning the day-to-day activities of their trips to be time-consuming

Building on the preliminary research conducted by our product manager which provided sound direction toward the time-consuming challenges of itinerary planning and fear of missing out on interesting locations and activities, I extended the research by using a survey to collect additional data on the behaviors, motivations, and challenges experienced by 20 travelers and conducted six user interviews to gain deeper insights into how people plan their day-to-day travel activities.


Sorting user insights into an affinity map showed us that:

62% of users find travel planning time-consuming

citing the use of multiple platforms to search and save activities to be a contributing factor.

52% of users find it challenging to track and organize information

across multiple platforms, with 57% of interviewees preferring to plan on a desktop/laptop computer.

48% of participants are afraid of missing out on fun.

FOMO (fear of missing out) may have been popularized in the 2010s, but the feeling lives on!

48% of users need help planning the most efficient route

to ensure that they are not missing out on anything fun and to ensure their travel plan does not cause any unwelcome wasted time.

This led us to a crucial question in solving travelers’ planning needs:

How might we provide travelers with an efficient way to plan complex itineraries in order to save them time in planning while ensuring a smooth trip?

PROBLEM STATEMENT

Planning daily travel itineraries can get chaotic. Travelers need an efficient way to plan their day-to-day itineraries to save time and evade stress while ensuring an enjoyable trip.

HYPOTHESIS

Enabling users to create a location-based itinerary with preferred points-of-interest can streamline planning, optimize the itinerary by proximity, and mitigate FOMO with personalized recommendations.

With a strict deadline to design and develop a live site with 6 weeks to go, we narrowed our focus to the two primary value propositions we wanted to provide our users:

Users will be able to…
  1. Complete a brief travel preference survey…

to receive recommendations based on their interests, so they don't miss out on opportunities they may be interested in.

  1. Add desired places and generate a proximity-based itinerary…

…to receive an optimized itinerary of places* they want to visit in a fraction of the time.


*For clarity in communication among the team and product, we used the word places to refer to individual points of interests within a city, and location or destination interchangeably to refer to the city destination of travel)

Create a trip

Add places

Generate an itinerary

Edit or add to itinerary

DESIGN IDEATION AND ITERATIONS

Capturing the essence of planning and travel.

Recognizing the importance of the visual experience in travel and travel planning, I prioritized a simple interface to compensate for the limited control provided by a the use of a free photo API.

I focused on creating interface options to minimize visual conflict, especially on screens delivering the core value of our product.
Adding Desired Places to a List

The initial Phase 1 design of the step users are adding their desired places to a map had the map located on the left and the list of places on the right.


Based on user feedback, I decided to swap layout of the map and the list to be more consistent with existing mental models and expectations of maps on desktop screens and for more consistency to the Itinerary page, which is the next step of the user flow.

Phase 1 iteration of the "Adding Places" page

Before

  • Left-to-right, top-to-bottom flow

  • Inconsistent with Itinerary page

Phase 2 iteration of the "Adding Places" page

After

  • Consistent with Itinerary Page layout

  • Primary user actions in proximity

  • Consistent with existing map design patterns

Viewing and Editing a Generated Itinerary

One of the key factors I considered when designing the itinerary page was how to present all the required details of a trip and available product features without overwhelming the user interface.


After multiple iterations, I decided to focus on the following elements:


  1. Utilizing a sidebar for easy navigation and to organize product features available for planning individual trips

  2. Conserving a hierarchy of information by ensuring the design and interactions of the itinerary itself are intuitive and easy to use

In contrast to the Adding Places page, was designed for the map to sit on the right for two reasons:

  1. To differentiate between pre- and post-itinerary-generated list of places


  2. To accommodate additional features, such as a menu bar and ability to edit the itinerary by moving place cards and adding additional places to the itineary

High-fidelity wireframe of the Itinerary Screen

High-fidelity wireframe of the Itinerary Screen

High-fidelity wireframe of the Itinerary Screen

USABILITY TESTING / PHASE 1

90% of users found the task of adding places to generate an optimized itinerary to be very easy.

Due to time constraints during the initial product sprint, I conducted an unmoderated usability test of the prototype using Maze. Ninety percent of users found this task very easy, citing the organized and intuitive interface, and clean visual design.


Shortly after the completion of the 8-week bootcamp, I conducted modersated tests of the live site with a small sample of users. These users echoed the feedback of the prototype testers regarding the visual design and the usefulness of the product's core feature. However, they also unanimously had difficultly in one area:

In using the search bar to type in places to add to the itinerary, users had to wait longer than expected for the search results to load drop-down suggestions. This process added unnecessary time to achieving user goals and made the task feel tedious.

CONSTRAINTS

Money and Resources and Costly APIs, Oh My!

During Phase 1 of the product development during the Co.lab bootcamp, we opted for free map and image APIs to avoid costs. As confirmed through live site testing, one of the biggest challenges regarding the user experience was the lack of speed and accuracy in searching for places to add to the itinerary.


To enhance the user's experience with our core product, upgrading our API seemed crucial. While the Google suite of APIs would have been ideal, we decided to switch to Mapbox as we continued to fix bugs and implement other minor features.


From a design and user experience perspective, this decision enabled us to:

  1. Implement autofill for increased efficiency in searching places

  2. Color-code pins on a map to differentiate a selected place from the other saved places

"FINAL" (PHASE 2) SOLUTION

Receive recommendations based on your interests. Generate an itinerary based on proximity.

Explore and add suggested places based on traveler's preferences

Select from a list of categories to receive a list of suggested places catered to your travel needs and interests so you can focus more on the fun and less on the FOMO (fear of missing out).

Generate and edit your proximity-based itinerary

Generate an itinerary that automatically groups the places from your added list together by proximity. Continue to edit and add you your itinerary as you please.

Keep it optimized!

Adding more activities to your itinerary after it's been created? No problem! We'll help you keep it optimized by suggesting a recommended date to keep your activities for the day in proximity (but you don't have to take the suggestion if you don't want to!)

LEARNINGS AND NEXT STEPS

Teamwork makes the dream work

I have gained a profound understanding of the significance of working within technical constraints and fostering adaptability in design while anchoring solutions to users and product value. Working on this project has given me a platform to improve my ability to communicate design decisions, and work collaboratively to build something from the ground up. I have deep gratitude and respect for this little cross-functional team of ours who have yet to back away from a challenge!

Laying down foundations as a design team of 1

As the sole product designer, balancing a wardrobe of different hats has allowed me the opportunity to adapt to the many design needs of an MVP product. As we continue to grow RouteWise, I am eager to build a more robust component library and scaling it into a design system as well as get creative with the visual aspects of the brand and marketing strategy.

Looking ahead…

Phases 1 and 2 of this case study took us from bootcamp project to side project. Stay tuned for Phase 3 where we upgrade to Google APIs and take this into a startup venture! Upgrading our API will require me to iterate on current the designs to make room for the additional information we hope to provide our users with the new APIs.

Next up…

ADD A FEATURE | CONCEPTUAL PROJECT

Spotify Podcast Clips

Spotify Podcast Clips

Spotify Podcast Clips

A conceptual feature to help podcast listeners save text and audio clips to aid their learning.

A conceptual feature to help podcast listeners save text and audio clips to aid their learning.