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
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:
Implement autofill for increased efficiency in searching places
Provide a more efficient way for users to add places to their itinerary through suggested places, and
Color-code pins on a map to differentiate different days on the itinerary
DESIGN IDEATION AND ITERATIONS
Capturing the essence of planning and travel.
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
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
