🚀 See the 2024 Ruby on Rails Community Survey results!
Article  |  Work

Finding the right design for Contiki's Trip Finder

Reading time: ~ 3 minutes

With more than 200 itineraries in over 40 countries, finding the perfect trip with Contiki can be daunting if you’re not given the right tools. In collaboration with Contiki, our latest deployment of Contiki’s Trip Finder adds more functionality, improves the design, and has some added perks.

Here’s a look back at a few trip finders from the past:

One of our first trip finders, which was just a list that you could sort.

contiki-trip-finder-results.jpg

A snapshot of the early design of our previous version

contiki-europe-landing-201009.png

Another view of the previous version

Search Results for paris 2014 Contiki Tours

Before this redesign, a user would be presented with search results that more prominently displayed the tours that matched their criteria while offering the ability to filter the results further. Other search results like articles or photos appeared in a column to the right.

While the filters were easy to use and the placement of the other results made the tour results more prominent, the space was confined for both.

The Redesign Process – Tour Results

To add as much space as possible for the tour results, give more room for the filters, and provide distinction for other results, we created a new framework with filters on the left and a new tabbed page for other results.

Here’s a look at our first set of wireframes

2_Search-Tours-Summary.jpg

With the added room to grow, our team was able to make filter interaction easier to use with an enhanced location filter, country checkboxes to filter down to one or multiple countries within a region, and the ability to selectively check choices, making it a snap to find exactly what you want and refine your search. The added space allows us to add more filters and interactions down the road as user needs change and trips expand.

Here’s a sketch of the filter interaction we put into place

Cam

This move also cleared the area at the top, allowing us to add new perks to the redesign of the tour results: view a quick list of all tours, provide a detailed summary of tours, or show a map to see the route of the entire tour. Add on the ability to sort by price, duration, and relevancy, and a user can now quickly scan what’s available within their search criteria.

Here’s a look of the list view of tours

Europe Tours 2011, Experts in Travel for 18-35s 2014 Contiki Tours

The summary view

Europe Tours 2011, Experts in Travel for 18-35s 2014 Contiki Tours

And the map view (showing the drop down sort options)

Europe Tours 2011, Experts in Travel for 18-35s 2014 Contiki Tours

The Redesign Process – Other Results

As for the “other results”? While the tour results are likely the most critical piece in the trip finder search, the Contiki website is full of information and connecting the user to this in a clear and concise manner is just as important. Moving these categories to their own page and allowing a user to tab between these results and their matched tour results has enabled us to organize these results in a more categorical manner, giving more room to expand the information and provide more detail than before.

Originally we had designed the page as a dashboard of all results.

Here was our first wireframe

4_Search-Other.gif (1000ձ200)

But as we went through the design stage with Contiki we realized we were adding more complexity with our pagination concept. Given the concern for user issues and time constraints in building this function, we opted to go with a simpler solution that allowed us to add more types of content to search for. The new design utilizes an arrow bar that highlights the chosen categories such as posts, reviews, and photos, and a user can click through these results to find relevant information.

Here’s a view of the final design showing “Forum posts”

Search Results for paris 2014 Contiki Tours

With this new space for each result we were able to show more of the content than small titles/thumbnails, so the results themselves are more useful to look through. Additionally, in this new format, if someone clicks the back button on any of these results, they’ll come back to where they were in their result set.

Here’s a view of the “Community photos.” The new design allowed space for more and larger images.

Search Results for paris 2014 Contiki Tours

To round out the experience, users can share their Trip Finder results with social apps like Twitter and Facebook, or send a direct link to friends and family to check out their options with Contiki (and maybe get them excited about an upcoming trip).

Here’s our social media center

Search Results for paris 2014 Contiki Tours

We will continue to enhance and refine this feature in the future, like enabling cross-regional filters (so a user can look up tours in Brazil and Italy in one search), but for now, we hope this next phase will make it that much easier for a user to find the trip of their dreams!

See for yourself!

Check out the Trip Finder for yourself. Just type in a city, region, or country in the search field and see what Contiki has as far as tours and resources for travelers. Or just use the link below for one of our favorite searches.

Show me Contiki trips to Paris!

Have a project that needs help?