Learn from Great Design: Adventure.com

by Tom Kenny (@tkenny)


Adventure.com is exactly what the name implies. A website where you’ll find all kinds of adventures around the world. It just so happens to be very well designed too. Let’s have a look.

First Impressions

Adventure.com’s homepage
Adventure.com’s homepage

So you already have an idea of what Adventure.com is from the actual name but it could well be a magazine or a store that sells outdoor gear, so you still need to know exactly what it is as soon as you land on the homepage. Good thing the Adventure.com designers know that too:

“Discover & book unique adventures directly with locals around the world”

That headline says all you need to know. Learn from Great Design regulars will know that great copywriting is also great design and this simple, clear and concise headline certainly is great copywriting. While the headline effectively communicates what Adventure.com is, the video in the background complements it with great footage of adventures giving you a dose of visual inspiration before you’ve even started exploring.

Below the headline and video, you’ll come across another well designed headline:

“What does Adventure mean to you?”

Guiding people to the adventure they want
Guiding people to the adventure they want

As adventure can mean different things to different people, guiding the visitor to what suits them is a smart way to begin the user experience. Selecting any of the options takes you straight through to the browsing trips page with suitable adventures.


The headline for that section leads us onto typography. Typography is an expressive tool in itself and the choice of the handwritten style of Flood Std by Adobe nicely captures the adventurous mood of Adventure.com. Overusing this font can lead to a messy looking and less trust-worthy site, so it’s wisely kept to a minimum but used enough to have an impact. Later in this Learn from Great Design study, you’ll see it in use on the trip pages, combining well with inspiring images.

Browsing Trips

Now you know exactly what Adventure.com is, you’ll want to dive right in and see what they have available, so it’s a good thing they have a well designed experience to help you find just what you want.

Discovering adventures
Discovering adventures

The layout of this page is fantastic, really letting the images do the talking, making it very easy to scan through a large list of potential trips, as you’ll see with the great design of the visual hierarchy.


Filtering trips (hover effects of “family” icon and “culture shock” rating shown)
Filtering trips (hover effects of “family” icon and “culture shock” rating shown)

Large lists like this need some sort of filtering system and the one here is very clear and simple to use. I particularly like the design of the rating systems used for “physical rating” and “culture shock” because it makes it clear that 5 is the extreme end of the scale at a simple glance. We all have limited cognition and attention, especially these days, so great design helps us focus on the important things rather than sitting there trying to figure out how the UI works. Simple but effective design detail like this can’t be underestimated and they all add up.

Poor Hit Areas

The orange areas represent where you can click
The orange areas represent where you can click

Despite having a good filter system, you’ll see in the screenshot above I’ve highlighted the incredibly thin areas where you have to click/tap to select the filter options you need for “featured”, “region” and “country”. Expanding it to the full area of the dividers would make it much easier to select each one, with both the click of a mouse or the tap of a finger. Look at all that unused space! In terms of visual design, the whitespace is great but it also indicates the entire area should be clickable/tappable which could lead to some frustrating missed taps and clicks.

Visual Hierarchy

Visual hierarchy is an important aspect of web design, especially when you have a lot of information on screen at once as we have on this page.

Visual hierarchy design of a trip listing item
Visual hierarchy design of a trip listing item

Thanks to the care and attention applied to the visual hierarchy, it’s easy to scan just specific details of each listing. Take the location information under the title, for example. The icon, the capitalisation, the smaller size than the title above and the larger letter spacing all combine to give it a unique enough style for your eyes to hook onto from listing to listing.

The only complaint here is that the icons at the bottom can be a little difficult to decipher. Hovering over the matching icons in the filter to figure out what they are isn’t ideal but at least you can discover what they each mean. It would be nice if the icons in the filter column had an always visible label.

Trip Pages

Inspiring images make a great first impression
Inspiring images make a great first impression

Big background images are “trendy” right now but we also know that web design trends are a complete waste of time. As designers, we may be bored of seeing websites with background images as a design style but actual users aren’t. Sometimes we waste time with the most pointless things.

The large background image is perfect for this situation as an amazing first image can inspire people to find out more. First impressions are important. All good designers know scrolling isn’t an issue these days but the big image doesn’t take up the full screen allowing you to see there’s more information below, giving you that little nudge to explore further.

Improving Readability

One criticism of this page is that the white text can become difficult to read on brighter backgrounds. The font is already slightly difficult to read due to it’s handwritten/brush appearance, so let’s see how we can improve it with a simple change.

Improving readability on brighter backgrounds
Improving readability on brighter backgrounds

As you can see in the example above, all you need to do is add a black background with only 20% opacity which can be done with some simple CSS and it doesn’t make the image too dark. Of course, there still needs to be a good balance of making the text more readable but not taking away the impact of the image.


If anyone is still lacking inspiration, there’s another section dedicated to other people’s adventure stories.

If you look back at a previous Learn from Great Design study on Harry’s shaving service, you’ll see a similarity. Harry’s have a section dedicated to the “story” of their company, as I explained in the study itself:

“The story supplements their offering of what their audience want with the actual service without getting in the way. It exists for those who want to go exploring to find out more about the company, so it’s in a completely different section of the navigation and never distracts from the main focus of the website.”

In the same way, that section exists for visitors who want to find out more about Harry’s inspiring people to join by learning why they are different, the stories section of Adventure.com allows people to be inspired by other people’s adventures, photos and videos.

Super Simple Sign Up

So you’re inspired and want to book an adventure but of course you have to create an account first. Creating an account is almost as simple as it could possibly be.

Creating an account only requires the following details
Creating an account only requires the following details

You only actually need to enter your email address at this stage but they also ask for your name to make the service more personal. A triumph for usability! I’ve worked in teams where I would try to do something similar only for the marketing team to claim they “need” things like the date of birth and address at this stage and win out with upper management as a result. Well done to Adventure.com for doing the right thing for their users.

(The text is a little hard to read against the yellow background however, so that could do with an improvement.)

Profile progress indicator
Profile progress indicator

You’re encouraged to add more details once you’ve actually signed up, removing the need to enter numerous fields to actually create your account. A progress bar fills up indicating how much information you’ve filled in.

In the first paragraph of the edit profile page, they make you aware of the benefits of completing your profile, meaning you’ll be more likely to fill it in. After all, Adventure.com want you to be successful in order for them to be successful too.

“Make a cool first impression! When travelers are browsing the Adventure.com marketplace and deciding to book an adventure, they’ll be checking out your profile.”

Responsive Design

Adventure.com is completely responsive as is the expectation in this multi-device world and works well except for some minor issues on the text over the large images on the trip pages can sometimes escape its container.

Mobile viewsMobile views

Learn from This Great Design for Your Next Adventure

“The journey of 1,000 miles begins with the first step.”

At the bottom of the homepage, this headline sits next to a sign-up form encouraging you to take the first step on your journey by creating an account. Initially I thought it was wonderful copywriting but then I thought I’ve heard it before. It’s actually adapted from a quote be Chinese philosopher, Lao Tzu, but it works fantastically well in this case.

A web design project can feel like travelling 1,000 miles, so hopefully learning from the great design on Adventure.com will help you make the first step (and beyond!) towards creating your next great design adventure.

Improve Your Eye for Great Design

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web. Follow me on Twitter here.