RoadsideAmerica.com describes itself as "a caramel-coated-nutbag-full of odd and hilarious travel destinations -- over 15,000 places in the U.S.A. and Canada -- ready for exploration."
Roadside America started as a couple of books by 3 road trip know-it-alls. The three writers continued to document their backroad discoveries online in 1994 and later created roadsideamerica.com in 1996. If you visit the website in its current state there is an overwhelming amount of information and it looks like the UI design has not been touched since 1996.
We conducted 7 user interviews. We then created an Affinity Diagram to sort and organize the qualitative data from our user interviews to see if we could find any patterns or themes.
I created a Google survey with a series of questions to better understand how users think and what they do on road trips. We received 46 survey responses.
I created a user persona named Luke Taylor directly based off of our Interviews and Survey data to help us define the user we are redesigning the website for. Creating a user persona helped us understand our users’ needs, frustrations, behaviors and goals. This helped guide us throughout the project so we could achieve the goal of creating a great user experience for users of Roadside America.
We had a brainstorming session using the “I like, I wish, What if” Method to help quickly generate constructive feedback of the current Roadside America website. This helped us to clearly see what was working on the website, what needed to be improved, and what new ideas could be implemented.
We then took the data from the “I like, I wish, What if” Method and created a Feature Prioritization Matrix with Low effort, High impact to help us decide which features should be a priority. We decided to prioritize these features in our redesign:
.jpg)
Next we created a user flow to define the complete path Luke would take when using the website to plan a road trip. We went through several versions of user flows and this is the final one we created.
.jpg)
We created a User Journey map for Luke to help us visualize his experience from start to finish while using the Roadside America website. This process was helpful for us to look at the website from the user’s point of view to better understand their feelings, motivations and experiences, so we could redesign the website to meet their needs.
After creating our User Flow and Journey map for Luke, I did some wireframe sketches to help visualize the user path and determine the main page layouts we would need to create.
Here are some of the low-fidelity wireframes I designed.
After we worked on our initial design ideas we created a user testing plan. On our first round of user testing we asked users to plan a trip, choose quirky attractions on their route, save their route, and view their saved routes. Some feedback we received was:
After the user testing I applied the user feedback we received to another design iteration.
My teammate also worked on an another iterated design. We decided to go with his design for a second round of user testing.
On our second round of user tests we asked users to plan a trip, choose quirky attractions, start a trip, and rate an attraction. Some feedback we received was:
We created a new UI Brand Style Guide for the website. We wanted the website to be clean, neutral, informative, and adventurous. We kept the style of the site classic and warm in tone. We didn’t want users to be distracted by bright colors. We wanted to keep a western-road-trippy feel.
Here is how my teammate took our design ideas to high-fidelity wireframes. The final result is a culmination of all our research, user testing, and design work.
I worked on the Front-End Development portion of the project and it was a huge lesson for me to think about how I design in the future and if a development team will be able to actually create my design ideas. It also made me want to continue learning and improving on my coding knowledge. It would have been fun to try to code out more of the website if we had more time.
.png)
Though our team achieved the UX adjustments we set out to accomplish, we recognize this project is far from complete. Here are a few items we would like to still add to our redesign of Roadside America’s website:
I was in charge of finding and researching the quirky stops and it took me hours between roadsideamerica.com and Google to find good quirky attractions that were actually open. I really got to understand the user’s frustrations through this process. Our finished design solved so many of the issues I encountered and I’m really happy with the finished product. I really enjoyed being able to go through the whole design process of UX, UI, and Front-End Development in this project.