RouteWise
Road trip planner from A to Z
Responsive mobile application
Project Overview
RouteWise is an all-in-one road trip planner for North America!
It simplifies route selection, vehicle choice, booking stays, and planning stops for various activities tailored to the destination, time, and budget—all with real-time cost estimates to stay within your budget.
About RouteWise
I worked on this project from scratch during a bootcamp at UX-Land School, where I collaborated as a UX/UI Designer to understand user needs and collaborated with a group to design a platform for customizing road trip plans.
Stakeholder Needs
Challenges
Easy, Simple Design for All-in-One Booking: Design a platform to encourage ongoing use for future bookings:
Streamlines route planning
Offers vehicle selection (using your own vehicle or reserving one)
Facilitates booking accommodations
Enables scheduling stops (e.g., activities, outdoor adventures, sights, and attractions)
Clear Cost Display: Present costs for each step (each reservation) and trip subtotals clearly, along with a budget-fit indicator, without overwhelming users.
Time Constraints: One of the biggest challenges in designing this project was the limited time available. Each section required separate research, which made managing the timeline difficult.
Testing Limitations: Another major challenge was the inability to test with users in real-life booking scenarios. Instead of conducting qualitative usability tests, I had to rely on lab-based testing, which limited the accuracy and reliability of our insights.
Route Planning: Provide multiple route options.
Vehicle Management: Enable users to select their vehicle or reserve one easily.
Accommodation Booking: Simplify finding and reserving stays along the route.
Activity Scheduling: Allow users to add stops for activities, outdoor adventures, and attractions.
Cost Management: Set trip budget, present clear reservation costs, and subtotals with budget comparisons.
Road Trip Enthusiasts: Individuals or groups planning road trips across North America.
Budget-Conscious Travelers: Users who prioritize managing expenses and staying within a budget.
Families and Groups: Travelers needing a streamlined platform for multi-stop trips and shared expenses.
Adventure Seekers: Users interested in exploring scenic routes, outdoor activities, and attractions.
RV and Vehicle Renters: Travelers without their own vehicle or looking to rent one for the journey.
Target Users
key Tasks
Designe Thinking
Discover
For trip planning, I focused on designing a package that includes roads, vehicles, activities, and accommodations. Each area required individual consideration, which I addressed separately during the interview process.
To understand users' pain points and develop effective solutions, I employed a comprehensive research approach using the following methods:
Competitive Analysis
Interview & Affinity Diagram
Cart Sorting
Interview
I selected people who take road trips several times a year (cars/RVs) or tour leaders who manage travelers' needs. I used open-ended questions to foster discussion rather than a strict Q&A format.
I identified user pain points and expectations and discussed them with our stakeholders. Considering the business's value proposition and time constraints, I began defining the key contents for the information architecture.
Competitive Analysis
I evaluated 12 online platforms related to road trips planning, RV/car rentals, and hotel/accommodation reservations, by examining important features based on stockholder needs. Using these features, I designed an all-in-one road trip planning that provides essential, easy-to-use tools.
Our analysis shows that Roadtrippers was the most competitive platform. However, it does not offer direct reservations for RVs, cars, or activities. So, for accommodations, I conducted a competitive analysis on Expedia, Booking.com, Airbnb, and TripAdvisor. For car and RV rentals, Outdoorsy and similar platforms were analyzed.
Below, I outlined the key aspects that influenced our design.
Cart Sorting
Insights from interviews directly influenced the card content. Based on the competitive analysis, I adjusted the content to improve its relevance and effectiveness.
Afterward, I conducted card sorting using the Optimal Workshop and Figma (Open / Close cart sorting) .
Later, I used Excel to compare the results and identify key categories.
Over time, I made further iterations by consulting stakeholders and conducting usability tests.
Define
Affinity Diagram
Road Condition | Features
Budgeting | Costs Estimates
Vehicle | RV Reservation
pain points
Estimating Travel Costs: Difficulty in predicting travel expenses.
Lack of Budget-Friendly Planning: A feature to help users manage major travel costs within their budget
pain points
pain points
Expectations
Clear Pricing: Users expect transparent pricing by details without overwhelming.
Explore Options Based On Budget
Cost Breakdown: Users want a breakdown of trip costs for each participant that can be easily shared.
Adjust Based on Budget: Users want the ability to modify plans easily to fit their budgets without confusion.
Lack of information on road conditions, safety, and vehicle-specific routes.
Expectations
Personalized Route Suggestions: Users want routes based on options like fastest, optimal, or scenic, with filters for toll-free or paved roads.
Clear Road Comparison Info: Users need simple details to compare road options, like distance, travel time, and costs.
Size and Comfort: Users may struggle to choose the right vehicle size for comfort and amenities.
Access Restrictions: Some locations have vehicle size restrictions or limited parking.
Expectations
Clear Vehicle Information: Users expect detailed info about vehicle features, size, and suitability for their needs.
Filter Options: Users want to filter vehicles by amenities (e.g., beds, bathrooms, kitchen) and size to match their needs and budget.
Stops | Stays
pain points
Expectations
Detailed Facility Insights: Users expect information on amenities—like parking, restrooms, safety, and nearby services at each stop—to be accessible, clear, and well-defined.
User Reviews for checking reliability & Safety: Reviews help users assess safety and reliability based on others' experiences.
Clear Accessibility: Accessibility features should be clearly displayed for easy access.
Family and Pet-Friendly Options: The platform should highlight family- and pet-friendly services.
Emergency Stops Information: Clear information on emergency stops, like medical facilities, food, and gas stations, is essential.
pain points
Lack of a Dedicated All-in-One Platform: Users mention there is no platform that consolidates everything they need (like stops, attractions, and parking) based on personalized preferences.
Switching Between Apps: Users find it inconvenient to use multiple platforms to get all the necessary information.
Simplicity and User-Friendliness: Users expect the platform to be easy to use and not overly complex.
Up-to-Date Information: Keeping the platform's information updated is essential to avoid confusion and errors during trips.
Expectations
Lack of Attraction and Accommodation Info: Users have no dedicated comprehensive platform for finding information on scenic spots, tourist attractions, and accommodations—often relying on Google Maps but switching between platforms breaks the flow.
Based on Insights from the interviews, I created an Affinity Diagram and identified pain points and expectations for each key step.
Used Applications | Features
Our chosen persona represents users who value time management, budgeting, and organized planning. The users I interviewed are eager for road trips but avoid them due to limited time. They need a comprehensive platform to meet all their travel needs in one place, helping them manage both time and money while planning a memorable road trip.
Persona
Site Map
To ensure our information architecture meets user expectations, I conducted 16 open card sorting using the Optimal Workshop platform. After the initial exercise, I developed our first version and iteratively refined it based on user testing and competitive analysis.
Here is our final site map:
I added a customization task to the user flow for personalized packages, providing a seamless experience for busy professionals like Sam.
Final User Flow
Develop
Iterations- Step 1
Sketches and Wireframes
I started with hand-sketched low-fidelity wireframes to facilitate team communication during the early design stages. Later, I used Figma to create mid-fidelity wireframes, visualizing page layouts and design direction for stakeholders.
These wireframes show a part of my design that went through multiple iterations. After finalizing the layout, I moved on to the high-fidelity design for the rest of the project.
Iterations- Step 2
1- Prioritizing Steps for Trip Selection: Initially, the homepage lacked a search bar, and users selected travel type (own car or rental), before destination and time. Based on competitor analysis and stakeholder input, I prioritized destination and time first.
2- Unnecessary Field for Travelers at This Step: Traveler information is required for each specific stage (e.g., vehicle rental, hotel booking, activity reservations). In some cases, such as entering national parks, the number of travelers may not even be needed.
3- Incorrectly displayed selected options on the map was corrected in the next version of iterations (Iteration 16).
4-Big Challenge in Displaying Cost Details: From the initial sketches, I faced the challenge of showing costs without overwhelming users. Through iterations, I arrived at the best solution in the following iterations. (Iteration 18).
5-Search Bar on the Homepage: I added a search bar, but the homepage still didn’t effectively represent our goals (packages, car rentals, accommodations, and activities), so I iterated on it again (iteration 10).
6-Lack of Progress Bar in Initial Design: I added a progress bar to show users the main steps involved in planning a trip.
7- Prioritizing Planning Steps: In this design, I prioritized destination and time first, followed by vehicle selection, similar to our competitors' platforms.
8- Adding Filters for Faster User Selection: I added filters to help users make their choices quickly. However, from the stakeholder's perspective, it seemed like too much.
9- Hiding Cost Details in Trip Summary: I initially hided the cost details in the trip summary, with users needing to click a pop-up to view them. However, users preferred seeing the most important details in real-time.
Iterations- Step 3
10- Clarifying Key User Requirements: After reviewing project requirements with stakeholders, I decided to clearly display the four main user requirements (Package, Car Rental, Accommodation Rental, and Activity Reservations) on the first page.
11- Progress Bar for Trip Information: I added a small progress bar to provide users with an overview of the process while entering trip details.
12- Round Trip Option: One thing I overlooked in the initial design was the option for users to select Round Trip, allowing them to choose whether to schedule it at this step.
13- Maximum Drive Hours: Based stockholder's needs, I didn’t consider the maximum number of hours a user can drive per day in the initial design.
14- Budget Planning Feature: A key feature of the application was budget-based planning, which was missing in the initial design. I added a section for users to set their maximum budget, list accompanying people, and define the budget division method among tripmates.
15- Filter Simplification: Based on stakeholder feedback, the filters in Iteration 6 were too confusing and crowded. I simplified this by consolidating all necessary car filter options into the "Sort & Filter".
16- Removing the Add Button from Selected Option Cards: Ire moved the Add button from the selected option (RV/Accommodation/Activity selection) card because users must first review all available items and enter necessary information (e.g., tripmates [adults/children], reservation time, duration of stay, etc.) before finalizing their selection.
17- Showing Users Their Selection: I implemented a feature to clearly show users when their selection has been applied, ensuring they are aware of their choices throughout the process.
18- Cost Details Updated: Enhanced to display key cost details in real-time to users.
Deliver
High Fidelity Wireframe
Protoype
Here is the last prototype, displaying what I've achieved through our design process.
UI Kit
Our UI kit balances casualness with a color palette of dark & light green, light orange & brown tones, modern and easy-to-read fonts.
Moodboard
I shaped our mood board inspired by nature, ultimately arriving at a color palette that includes a variety of green shades symbolizing nature and vitality, along with cream tones inspired by the sunrise.
After many iterations, this represents a portion of the current high-fidelity design.
