Wanderu

Everyone looks forward to their vacation days and are eager to choose the best destination but there are hundreds, if not thousands of sites to choose from to help book your vacation. Wanderu is a great site that helps users cut down on the search for the best prices. But what is Wanderu? Wanderu is a travel search platform that helps travelers find the best deals on bus and train tickets across North America and Europe. With just a quick search on the Wanderu website or the Wanderu app for iOS and Android, you can compare bus and train schedules and prices from hundreds of travel companies in one convenient place to find the bus or train that works best for you.

Overview

Challenge

How can we redesign an existing travel e-commerce site to offer user-friendly navigation that will maximize its strength and bring the site to its full potential?

Solution

I began this redesign by researching how users book vacations. I wanted to know the what they looked for, what the process was, and what are the deciding factors that make them book the trip. The new UI of this site features a visually friendly informative homepage, user friendly booking system that helps user choose their mode of transportation, and a fast check-out process.

Role: UX/UI Designer

Tools: Figma, Google Forms, Photoshop

Process

Research

Initial Research Goals

The goal of this research study was to learn what travelers look for in booking sites, so that we can make the process easier and more user friendly. Using the objectives below, we hoped to reach these goals:

Determine what makes a travel site a first choice

Determine if a loyalty program helps in recruiting users to sign up

Determining if suggested itineraries for trips are a good feature

Comparative Analysis

I focused my design on simplicity and functionality in executing the key elements of the site. I began by sketching and wire-framing and went through several iterations after gaining insight and feedback from my mentor. Based on my understanding of Wanderu's objectives, mission, and research findings, I was able to decide who I wanted to do competitive analysis of.  Below is the information found:

‍

Initial observations‍

The user goal of most travel sites is simple: book a trip. The steps to get to that goal is a little more complex. When searching for tickets on any site, it's common to have dozens of tabs open comparing prices and finding the best deal and wanting the most straightforward check-out process. These are the main features I look for when booking my own trips. My research intended to find out if these were key features for other like minded users too.

Research, Gains, & Pains

With a general idea of a redesign in mind, I set out to discover gain and pain points on booking travel tickets on other e-commerce sites. I launched a survey for people who have experienced booking tickets online with various websites. Here is the main demographic info that resulted from my survey:

I wanted to know how users browsed travel sites and kept up with itineraries. Based off the survey, here are the results I acquired:

My research questions were open ended and focused on the process of booking a trip. Some of my research questions were as follows:

1. What would make booking online travel easier?

2. Are there any issues or lack of features that would stop the process of booking online travel?

3. What is the process of planning and booking travel/lodging?

Answers to these questions resulted in several gain and pain points that could result in a great e-commerce travel website:

Key Gains

Easy web navigation

Comparable prices on one site

User friendly

Popular site (established)

Daily updates on price comparisons

Reviews

Key Pains

Finding better deals on other sites

Having too many windows when comparing prices

Too many ads

No complex booking

Suggested Solution

Using this research to supplement my initial ideas, I developed the following elements to begin Wanderu's redesign:

User friendly visual design of important homepage information

Suggested ideas for planning your next vacation

Opportunity for users to create an account with Wanderu

Clear visual elements to help users book trips

Sketches

The Wanderu site homepage provides a lot of informative information about traveling and the site. When working on the sketches, I wanted to focus on making that information visually appealing to users.

‍

‍

Task Flow

The goal of this user task flow was to visualize the steps a user would take in using the site to purchase tickets. The process begins with users entering their starting location, destination, selecting dates, and ticket quantity. The results page offers many options for users to choose from. Once the ticket is chosen, the user proceeds to the checkout phase.

‍

User Flow

The user flow follows the same concept as the task flow, however the user now has some choices to decided from. The begin the process by deciding if they are booking ticket for a round-trip or one-way. The next decision the user has to make is deciding if they want to purchase tickets for the morning, afternoon, or evening. The user decides on the ticket or tickets they like and proceed to the checkout phase. Below is a cropped image of the user flow:

‍

‍

Wireframes

During this phase, I started with the Wanderu homepage. The original homepage offered a lot of information that was put into long text fields. I decided to take these paragraphs and add visuals that would help divide the information and engage users in reading. When redesigning the results page, I wanted the starting point and destination to be clear. Adding a calendar type date picket would help users see different prices per day by choosing another date. On the original design layout the sign-in or sign-up links were on the far corner of the screen. Adding a separate screen and step to the check out process makes it clear for users to decide.

UI Kit

The UI kit contains typography for both mobile and desktop sites, buttons and icons, cards, the color palette, and fields. Since this project focused on redesigning an existing website, I decided to create a UI kit to help make the designing process easier. I designed more icons that fit the theme of the site and added a date picker that allows users to see the dates selected.

‍

‍

Responsive UI Design

With booking sites I wanted to keep the dates and times repetitive. Often people look for reassurance when purchasing tickets. They want to make sure its for the right date and time. I added those elements and made sure they were visible. I also added other elements that made choosing times and other amenities easier to locate.

My goal was to redesign the Wanderu site. I drew inspiration from familiar booking user flows and focused on a clear top to bottom process. Check out some of Wanderu's new design layouts:

‍

Test

I presented my prototype to my peers in a group critique. They provided great feedback about my site, as well as gave advice on how to change some designs. The hero on the home page was my largest issue. I tried multiple ways of laying out the hero behind the travel picker element. Some suggestions they provided were:

Adding a tagline to the right side of the element

Extend the hero image past the margins

Turn down exposure

Prioritize one element at a time

Final Outcome

Final Design

After acquiring helpful feedback for peers and mentor, I made the changes suggested to the site. Below are images of the Wanderu site before the redesign and after:

‍

‍

Prototype

Click the photo below to try out the desktop prototype

‍

Takeaways

Redesigning an e-commerce travel site to stand out from hundreds of others online was a bit of a challenge. Discovering pain points and creating elements that help users maintain an easy flow helped me develop problems that users are neither aware of nor anticipating. Using a competitive analysis to compare popular e-commerce travel sites allowed me to learn more about what successful UX looks like.