Map Your Road Trip: Interactive Website

Map Your Road Trip: Interactive Website

Instructor: Matt McGlynn

Map your Road Trip is a service that makes planning a road trip easier for every type of road tripper. The service is in the form of a website and it is a tool to help users map their own unique road trips. It focuses on the customization of each user's road trip, which means suggested routes and stops that would work best for them and their interests. Users will take a quiz, answering questions about themselves, what they want from their trip, and their starting point and destination. A custom route will then be made with stop suggestions along the way that users can add to their itinerary.

Research

Initial Research & Ideation

The project started with discovering the problems in the current ways people plan road trips and the existing services for trip-planning. The research consisted of secondary research from the web and primary research derived from a google forms survey. While researching I discovered some problems in the current way people plan road trips. the problems consist of

A lot of planning and research are required for a road trip
Planning road trips can be overwhelming and confusing
Many people don’t have time to plan a road trips
Many don’t want to pay for someone to plan the trip for them
Most are unfamiliar with the area they are traveling to or through

Competitor Research

I found that there are many existing resources giving tips on road trips, so I did some competitor research to find out how Map Your Road Trip can stand out. One competitor was Roadtrippers.com and their service works by providing your starting point and destination but doesn’t give recommended stops based on the user’s specific needs or interests. They do have stop options in categories that you can filter through and trip guides if you want to go on a pre-planned trip. Another competitor is Pebblar, which provides you with an organized trip itinerary, but doesn’t give you stop suggestions or stop options, so you need to know where you are going. It’s primarily a way to create an organized itinerary for a trip you are planning. Some indirect competitors to Map Your Road Trip are GoogleMaps, Tripit, Waze, and Airbnb, but those are primarily for navigation and maps.

With this competitor research, I recognized some industry standards and trends that consist of simple interactive maps, recognizable icons, road trip tips, photography of the place, maps, and directions. None of the competitors created personalized recommendations, which would be a good opportunity for Map Yout Road Trip to stand out. One thing I noticed was that my direct and Indirect competitors have very simple and classic designs. I debated following suit with a similar feel and color palette to the other services, but I wanted to create something that brought life and energy to the stressful process of planning a trip, so I went with bright and playful colors. I also knew this was going to be an animated site and I thought the playful feel would allow me to have fun and be creative with the animations.

Survey

To finalize my research, I conducted a survey. I surveyed people between the age range of 20 to 50, with varying levels of interest and experience in traveling. Everyone I surveyed said that they would be interested in a program that would help them plan their road trip and some of their reasons were that planning a road trip is hard, time-consuming, and some don’t know how to plan a road trip or don’t know where to go. They also are interested in having access to specific information about the place that they are going to with assistance in scheduling and expertise about the best time to travel. When asked what the program would have to do in order for them to want to use it, the respondents said that it needs to have an efficient route and show stops on the way, also show traffic, stop signs, lights, alert for police, gas stations, and recommendations for stops that match saved interests, and a cost calculator. The majority of the respondents said they currently use google maps and Waze. Many said they liked those services because they are simple to use and they give up-to-date alerts and routes. They didn’t like that they can be laggy and cause you to miss turns and that it is confusing and difficult to find and add stops to your route. Finally, I ask if they like their road trips planned or more spontaneous? And the large majority said planned or loosely planned. That leads me to believe that they would be interested in planning their road trip ahead of time on my website.

Conclusions After Research

There are a lot of features that I could have included into Map Your Road Trip. In order to keep it more specific to road trips, and not just basic navigation, Map Your Road Trip will only be a website for planning and not a navigation app. However, you can open the trip itinerary on your phone to use any mobile navigation app you desire.

User Personas

I created three different user personas that each have different pain points and goals. Creating these personas allowed me to think about who potentially will use Map Your Road Trip and how they will use it. Each person has very different demographics and are going on very different trips. Users can range from avid road trippers to novice road trippers. The trip goal can also range from a short weekend trip, to a month-long adventure.

UX Process

Site Map

Once the research was collected and user personas were established, I created a site map for the Map Your Road Trip site. Researching and creating user personas first gave me a basis for what Map Your Road Trip provided and who it was served.

The site map breaks down all the ways you can create a trip itinerary that would be perfect for you. There are four ways that you can approach the task. One is by taking a quiz that allows for a curated route and stops picked just for you based on how you answer the questions. The next way is by simply inputting your starting point and destination and having a basic route generated for you, where you can then add in and search for stops along the way. Another way is by choosing an already curated trip guide, which is a common trip that has popular spots already picked out and scheduled for you, but you can still tweak the route to work best for you. The last way you can create a route is by going directly to the map and

Wireframes

After the site map was established, I started low-fidelity wireframing the website. I knew I wanted to prototype the quiz and each way that you can create a trip itinerary. I wireframed each page I knew was needed to fully complete the tasks. After the low-fidelity wireframes were complete I started to create higher fidelity screens with the Map Your Road Trip branding.

UI Process
UI Kit
When creating the UI Kit of Map Your Road Trip, I knew I wanted it to be colorful and playful because planning road trips should be a fun and exciting process. I did some design research and created mood boards that helped determine the final direction for the site.
I created my own set of cohesive icons and used a simple and recognizable button system to ensure the user experience was intuitive and didn’t create confusion. I chose two sans serif fonts that are accessible and simple and can be used for all elements of the site. I wanted these elements to be simple because I knew that I wanted to incorporate a lot of bright colors and illustrations.

Interface Design

The main focus of the interface design was for it to be accessible to all types of users at all different levels of technical experience. This was done by creating a simple and clean design system so that it can be easy and intuitive for most users. There are many features to this design that have micro animations that add an interactive and playful aspect to the design. I implemented hover and toggle states to buttons, overlay animations, and expand and collapse features throughout the site.

Conclusion

Through the process of creating this interactive website, I learned a lot about micro animations and how they enhance the website’s experience. I also became more familiar with prototyping techniques in XD that allowed me to show these micro animations.

The illustrative and playful style of this website was something different from my usual work and allowed me to step out of my comfort zone and have fun with color and different visual elements.