Over view
Route wise is an online road trip planner that offers customizable and affordable road trips manually or with AI. The website aims to provide a seamless experience between several specified destinations, including assessing various costs, customizing their travel plan, and accessing updated prices while increasing sales for the business.
Goals
1. Ensure that the website is visually appealing and easy to navigate. It is also important to ensure that the website is user-friendly and that visitors can easily find the information they seek.
2. Improving the user experience and making it easy for customers to personalize their travel route by providing options for route packages or choosing separate options such as vehicles, accommodation, and activities.
3. It enables users to enjoy an affordable trip, maximize their time efficiency, and seamlessly locate essential services during their road trip.
Challenge
1. How to display and calculate time and budget for each route with different facilities from A to Z in the package task.
2. Applying changes to the customer's data after previous choices in the travel route, which changes all tasks.
The Process
Discover
Our research provides me with the opportunity to go beyond the users' immediate frustrations to analyze their hopes, fears, abilities, limitations, reasoning, and goals. Later, solutions can be developed on the basis of these foundations.
Competetive research
We analyzed eight road trip, Campsite & RV websites based on fourteen key features and found that Road Tripper was the most competitive, while Outdoorsy & Wanderlog focused on affordability and customization. We used our findings to develop a new website design that addressed pain points and opportunities for improvement.
Survey
To better understand our target audience and their challenges, we created an online survey and shared it with relevant communities. Within a few days, we received 46 submissions. Based on the responses, we identified four common pain points, which guided our next steps.
Intuitive and user-friendly UX/UI design / Design optimization for improved user engagement
Customizable design elements
Website/App responsiveness
Accessibility and inclusivity considerations
Interview
Learning about users' perspective
This task is a packaged part of the website and should be divided into four main parts: Road, Vehicle, Activities, and Accommodation.
Road
Vehicle
Activities
Accommodation
Audience top insight
Facility of campsite
The opinions of users are very decisive about any sightseeing place of the hotel and restaurant.
A series of information, including emergency contact details, medical information, and information about repair shops suitable for the specific car, is very important and necessary.
Checking the type of facilities for stopping is very important and crucial for me.
tedious search for suitable dining options and the difficulty in finding places that align with our preferences.
What I expect from an online platform is to show a list of the best places to visit based on my interests and save my time.
Show me the busy and peak times of a place, whether it is a natural location or a historical point of interest, such as museums, etc.
We prefer side roads over main roads and highways for the first two reasons that we enjoy the scenery on the side roads from the villages.
Facilities on the road and road safety are very important to me; I don't prefer remote places.
To choose the route, we always try to make the departure route different from the return route so that we can benefit from different tourist attractions.
size/ amenities /reliability. It's important to have a
a vehicle that suits my needs and can handle different terrains.The experience of traveling with an RV car is different because the speed of movement is different, there are restrictions on entering some cities depending on the dimensions of the car and the height, but it is good because wherever you get tired, you have the basic facilities to rest.
Affinity diagram
In our research for designing this website, an affinity diagram revealed that Customization was the most important factor for customers, followed by budget, type of Vehicle, Route, view, and time. These insights can guide the development of the website to ensure it meets customers' needs.
Ideation
Personas
Our team created a persona for our new project based on the personality traits of the target user, such as Nina Wilson, a busy 35-year-old Designer from Portland who values budget & time in the road trip experience. By tailoring our design decisions to meet her needs and preferences, we can create an engaging and effective user experience that resonates with users like Nina.
User flow
Site Map
We added a customization task to the user flow for personalized gifts, providing a seamless experience for busy professionals like Jake.
Design
Our UI kit balances casualness with a color palette of dark & light green, light orange & brown tones, modern and easy-to-read fonts.
Mood board
UI Kit
Low Fidelity Wireframe
High Fidelity Prototype
Displayed below are some high-fidelity wireframes that were created by using images from competitors' websites and google for a class project.
Usability Iterations
Following several usability tests with 10 potential users, we have made several improvements to our website based on the feedback and insights we received.
Home Page
1. During an A/B test, showed a preference for the website version that used a hero image with a road & car, compared to the version with a girl image. The road & car video led to higher engagement and conversion rates, indicating that it was more effective in capturing the attention and interest of website visitors.
2. We merged the navigation bar & search bar, so it will be more visual & user-friendly.
3. We've discovered that positioning the CTA button on the upside of the hero video can attract the most attention.
4. The How it Works section can be improved to be more regular & visible for users.
5. We removed the map section, it was like how it works section and does not make sense.
6. We change make memories photos to photos & videos while hovering and adding detail for trips.
PackagePage
1. We added a search bar on the top to change easily when the user needs it.
2. We've changed the progress bar from horizontal to vertical and it helps to have more space to show more results and changed the filter row to a filter button.
3. We remove the map on the left side and add a map button on the top right side of the page. It gave us more space for any results.
We changed the large road icons to small ones and added details under them.
