CAENES
Let's talk
Work · Case study

Barcelona Horse Tours

Barcelona from another perspective.

Web designDigital identityActivity tourismTrilingual website 2017
The barcelonahorsetours.com home page on a laptop: two riders seen from behind on a Collserola track with Barcelona and the sea beyond, the circular logo centred, and the same page on a phone
barcelonahorsetours.com · three languages · Collserola 20 min away

The brief

Centre d’Equitació Poni Club Catalunya has been teaching people to ride in the Vall de Sant Just since 1988. With twenty-five horses, sixty ponies and qualified guides who speak four languages, it had a product that was not for its own students: a horse ride through the Collserola Natural Park, with Barcelona and the sea in the background, twenty minutes from the city centre.

The audience for that ride is a tourist who has never been on a horse. The site did not have to explain riding: it had to convince people in three languages that it is worth getting on, and leave the booking one click away.

What we did

We put the photograph full screen and took everything else away. Anyone thinking about going up to Collserola does not need us to explain anything: they need to see the city from above. The hero fills the whole screen and the only text is two lines between two white rules.

We ordered the digital identity around the circle. The logo with the horse and the Barcelona skyline runs in two versions — large and centred over the home page, small in the bar — and the rest of the brand online is type and colour: Open Sans in two weights, with 3.9 px of letter-spacing that turn every heading into a trail sign.

Three languages, each with an address of its own. Catalan, English and Spanish live at /ca/, /en/ and /es/, with seven pages per language and a fixed switcher in the header. There is no machine translation: there are three complete sites kept up at the same time.

One orange button, and it leads to the calendar. The site has no form: the button opens the riding centre’s own booking calendar. Turquoise for the bands, orange only for the action, 3 px radius on the buttons alone and not a gram of CMS. In 2019 we went back in to bring prices, badges and content up to date.

The design decision

From imagining the ride to booking it.

The client already had the best sales argument and it was not his: it was the landscape. The decision was not to compete with it. A single type family, two white rules, a band of colour when the text needs one, and a button. Everything on this site that is not photography is designed to last ten seconds on screen and then disappear.

An editorial reading of the experience through Barcelona Horse Tours’ published identity and photographs: trail, woods and views. Client material, not presented as a Damos photo assignment.
An editorial composition of the visual journey, with photographs from Barcelona Horse Tours.

The project in numbers

3
languages, each with its own address structure
7
pages per language, from the home page to the booking terms
1988
the year the riding centre that runs the tours was founded
20
minutes between central Barcelona and the starting point
85
euros per person, with a qualified instructor, insurance and helmet
1
single type family across the whole site

How it's built

There is no CMS underneath: it is 13.6 KB of static HTML with our own CSS, jQuery and little else. That is a decision about the site, not a shortfall: a page you check on one bar of signal halfway up a hill cannot depend on a database. The container runs at 1,040 px, the sections breathe 104 px above and 69 below, and the only radius on the site is 3 px on seven buttons.

The type does all the brand work. Open Sans in two weights — 400 and 800 — always in capitals in the headings and with 6.8 px of letter-spacing in the inside H2s, 3.9 in the banner strapline, 3.1 in the buttons and 1.3 even in running text. The palette is short and functional: #21B2A6 for the section bands, #FF7800 for the action and nothing else, slate grey #2E3842 as the general background and white over photography.

The rest is light integrations: a lightbox gallery, a cookie notice, share buttons and the riding centre’s booking calendar, which takes every click on the orange button. From the earliest archived copy, in August 2018, the structure and the stylesheets are the same as today’s. The only thing that has changed in nine years is the content: from four packages down to one.

How it went

01The briefSelling a ride to someone who has never been on a horse
02The decisionThe photograph full screen and a single button
03The site2017: three languages, seven pages and booking off-site
04The revision2019: prices, badges and content brought up to date

Gallery · the project in pictures (click to enlarge)

A full-bleed photograph of two riders in STAFF gilets halted on a dirt track with all of Barcelona and the sea behind them; over it, the white circular logo and the headline Excursions a cavall amb vistes de Barcelona between two rules
A single image that already tells the whole story.
The Viu una experiència a cavall page: the header photograph of the riders and, below, the account of the activity from arriving at the centre to riding in the arena with a qualified instructor
No experience needed: the page that takes the fear away.
The Excursió a cavall card with its orange title bar, the price of 85 € per person and the list of what it covers — VAT, a qualified instructor, insurance, helmet, a suitable horse or pony, a 2.5-hour ride and a snack — above the orange Reserva ara button
Eighty-five euros and seven things included, with no asterisks.
Three phones in a row: the home page with its circular logo over the photograph, the experience page, and the price card with its Reserva ara button
Built to be booked from a phone, on the way to Collserola.
The Qui som page: the riders' header photograph and the text explaining that the Poni Club Catalunya riding centre was founded in 1988 and has 25 horses, 60 ponies and over 300 riders aged 3 to 90
A club founded in 1988, with twenty-five horses and sixty ponies behind it.
The Pic-nic degustació page: the riders' header photograph and, below, two green-outlined boxes holding the menu — starter, main, dessert and a drink, market cooking — and the note for vegetarians and coeliacs
Catalan, organic, zero-kilometre food at the end of the ride.
Two half-screen blocks: on the left a rider descending a pine-lined path with Barcelona beyond, beside the text Viu una experiència a cavall; below, the picnic block with an open hamper on the grass holding wine, bread and jars
Photo and text alternating: the whole structure of the home page.
A phone showing the tasting-picnic page: the header photograph and the menu stacked into a single column
What's on the menu, one thumb away.
"Excursions a cavall amb vistes de Barcelona."barcelonahorsetours.com

Want a result like this for your project?

Next project

Ajudem.cat, the volunteering platform that won Hackovid →