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

Contiki's New Homepage Design

Reading time: ~ 3 minutes

Contiki is the worldwide leader in tours for 18-35’s. This summer, they asked us to update their homepage to be more relevant for their users. They wanted more interaction and to organize many quick bits of information for potential travelers. The presentation near the bottom and middle parts of the homepage felt unorganized, and we sensed it wasn’t working as an introduction to Contiki.

Contiki’s homepage needs to create interest in the tours, draw potential travelers deeper into the site, and sell the brand as the best option for holidays. We spent a lot of time planning on how to help Contiki make a great first impression. Not everyone who lands on the Contiki homepage knows what Contiki is and what they have to offer. This inspired the first design change I’ll discuss, the Who We Are section.

The previous version of Contiki’s homepage

Contiki’s new homepage

“Who we are” is a great introduction to new visitors of the Contiki homepage, but it can be repetitive for repeat visitors. Knowing this, we moved Who We Are from a container in the middle left up to the header. Some new users may not have understood what Contiki was on first glance of the site, and we’re hoping they will quickly learn about Contiki through this change. Users can choose to see more about Contiki here, which pulls open the “Who we are” section and reveals a longer introduction to the company with a call to action to find out even more.

The updated Who We Are section

Find a tour

We tried to move the “Find a tour” section into a horizontal strip at the top of the header area. This would free up space to move up the “Who we are” box.

A glimpse into an early attempt at revising the “Find a tour” tool

The horizontal layout didn’t feel right to us, though. It wasn’t as easy to scan as a sentence despite it being straight across one line. There are too many breaks in the sentence from the pull-down menu boxes. In the vertical orientation, it feels easier to scan down the list of menu boxes without necessarily having to read the label text with it.

The current “Find a tour” tool

Promo tiles

The previous version of “promo tiles”

Promo tiles now

The promo tiles have evolved from a set of four blocks with a thumbnail and a short text description into an interactive color block with a little navigation. Three photos line up the right side, and when a user hovers over them, the color block on the left changes to reveal something new. This adds a little bit of interaction and discovery in an attempt to make it so the homepage doesn’t feel as static.

Featured tours

The Featured Tours area allows users to go directly to a tour page from the homepage. We tried a few carousel ideas, including one where the focus was on one large centered thumbnail at a time. In the end, we thought it would look and feel best to showcase three trip thumbnails at once and allow the user to optionally scroll through the list to see more.

Site navigation

Comparison of old navigation in the header and the new, simplified navigation

We cleaned up the navigation at the top of the site. The navigation listing moved from below the logo to the side of it, which helped us gain 43 pixels of vertical space. Dropdown menus have been added that fly out when a user hovers over navigation options. Sub-navigation has been added to the bottom of the homepage in the form of the Top Tools section, where we highlight the forums, Contiki’s new Part Pay system, and the Genius.

Top Tools & Social Media

A Top Tools section has been added near the bottom to highlight interactive features. Users can Ask the Genius to find tours that are a perfect match for them. Brochures are available to gather more information, and Contiki Check-in is there once a tour has been found.

Contiki’s new Part Pay feature can be found in Top Tools as well. While most users will navigate to Part Pay by using shared links from friends, the link in Top Tools can help people discover the feature if they weren’t already aware of it.

“What’s being said” social media section

On the right column, a “What’s being said” section has been added to feature Contiki’s social media updates. Facebook and Twitter updates are merged together into one timeline, and the site automatically pulls updates from the Contiki accounts in that user’s region using geolocation.

So, what are the results?

These changes have been live for a short while, so how well is it doing? Looking at Contiki’s global visitor traffic, we see an 8.44% increase in interaction rate from the previous homepage, meaning less visitors are leaving without following links deeper into the site. We’re also seeing an 7.11% increase in users’ depth of engagement on the site. This is a sign that we’re doing better at our goal of using the homepage as an intriguing introduction to Contiki, and users are more likely to want to find out more.

We’re proud of the updates we have made to Contiki’s homepage, and we hope that we’ll play a part in helping you find the trip of your dreams!

Have a project that needs help?