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 - June 2024

ROLE

Product Designer

TOOLS

Figma, FigJam, Maze, Zeplin

TEAM

Cheryl Chen, Product Manager

David Ekunno, Front-end Developer

Kate Lueders, Back-end Developer

IMPACT

An average of 88% of users across 3 testing cycles find the product valuable and easy to use

Led the user research efforts to transition toward improved APIs, enhancing the overall user experience

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.

OVERVIEW

RouteWise helps you generate an optimized itinerary that groups the places you want to visit.

✅ Easily add the most popular sites and recommended places based on the traveler’s preferences.

✅ Customize and edit your itinerary based on your travel needs

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.

USER RESEARCH

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

I conducted a survey with 20 travelers and spoke with six additional individuals in 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

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

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

48% of users need help planning the most efficient route

71% say Google Maps is the most helpful tool when planning their day-to-day activities

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?

HYPOTHESIS

Generating an itinerary that groups places of interest by proximity will reduce the time and stress involved in planning daily travel itineraries.

CONSTRAINTS

Time, resources, and costly APIs, oh my!

During Phase 1 of the product development during the Co.lab bootcamp, not only were we strapped for time, but we also opted for free map and image APIs to avoid costs. Both of these factors had a significant impact in the design and development of the prodcut. 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.


With the help of user feedback and testing data, we ultimately upgraded from a free map API twice; first to Mapbox , and next to Google Maps APIs


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

  1. Implement autofill for increased efficiency in searching places

  2. Provide a more efficient way for users to add places to their itinerary through suggested places, and

  3. Color-code pins on a map to differentiate different days on the 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.

Create a trip

Add places

Generate an itinerary

Edit or add to itinerary

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.

Before - Iteration 1

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

  • Inconsistent with Itinerary page

Phase 1 iteration of the "Adding Places" page

Before - Iteration 2

  • Consistent with Itinerary Page layout

  • Primary user actions in proximity

  • Consistent with existing map design patterns

  • Addition of "Suggested Places" list for easy adding of places based on user preferences

Phase 2 iteration of the "Adding Places" page

Final - Iteration 3

  • Added a 'Top sites' list of popular sites through use of Google API

  • Provided more details on each place such as hours and star ratings

  • Expanded the on-ma place card to accommodate for more information

Final solution "Adding Places" page

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

90% of users found the task of adding places to generate an optimized itinerary to be very easy, but updating the API was crucial to the user experience.

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 moderated 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.

This prompted us to make the first API switch to Mapbox for a more efficient and accurate search experience. By conducting another round of user testing, I was able to share with the team that:

88%

of users wanted additional suggestions of a location's most popular places for easy one-click adding.

75%

of users would like more details about points of interest to help them decide what to do.

Having this data and feedback from users informed the decision to change our API a second time to the Google Maps API and opened new opportunities to enhance the design of the product with further iterations.

MORE FEATURES!

Providing more information on the place cards

With a change to the Google Maps API we now had access to and could provide more details about places to users in the interface. Prior to updating the API, I sent out a survey to travelers to rank the most important information they would like to know about a place when deciding whether to visit on a trip, and prioritized this information on the updated card.

'Before' iteration of the Places card

Before

  • Place name

  • Hours

  • Brief description

'After' iteration of the Places card

After

  • Place name

  • Hours

  • Star rating

  • Place category

  • Address

  • Brief description

  • Website URL

  • Phone number

  • Link to Google Maps

Color-coded pins to organize the map by day

The API update also allowed us to color-code the trip itinerary and map to to help users distinguish the activities on one day from another, especially on the map. To create a cohesive but distinct palette of pin colors, I selected colors that would not only stand out from the map itself, but also be accessible to individuals with color-impaired vision.

Color-coded location pins to distinguish places for different days

FINAL 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.