Surf Holidays Customer Experience

Pure Surf Camps
The Challenge

Imagine white beaches, blue oceans, big waves, and brave surfers. No neverlands, these palaces do actually exist, we promise. Would like to go there? Our challenge with Pure Surf Camps was to show in the best way these amazing places to users, making them easy to find and to book online. Ready to go? Let’s start exploring Pure Surf Camps’ world.

Workshop 

After the design review, we kept on working together on their website redesign, because we wanted to give people the chance to easily explore the best surf camps from their home, like in a big digital atlas for surfers empowering the relation between users and customers care. The first wave to climb was to run a one day discovery workshop in Munich. As always, we spent some time working together in order to understand needs, expectations, and desires of both Pure Surf Camps’ team members and users.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Proto - Personas and User Stories

After interviews and quantitative data analysis we created three different proto-personas with different user stories: in this way we were able to identify how to meet different goals through different touch points. Which kind of surfers are you? What would you like to find in a surf camp?

Client

Pure Surf Camps

What we did

Information architecture, user interface design, user experience, interaction design

Year

2016
 

Visit

puresurfcamps.com/

Pure Surf Camps in Numbers
1Trip to München
40Sketches
64Skype Call
98Beers
Fifth Beaters Involved
Raffaele Boiano
Raffaele Boiano
Co-Founder, CEO
Stefano Stravato
Stefano Stravato
Co-Founder
Francesco Vetica
Francesco Vetica
Head of Design
Massimiliano Mauro
Massimiliano Mauro
Creative Director
Mino Parisi
Mino Parisi
UX Designer
Silvia Bertossi
Silvia Bertossi
UI Designer

The Context

Pure Surfs Camps is first of all a community of surf lovers. A group of talented guys 10 years ago decided to share their passion with other people. How? Mixing their wavehunters’ nature with their expertise as tour operators. They arrange customize travels for amateur or professional surfers in 13 different countries, ensuring a unique customized experience. For them surfing is not just a sport, but a way of life, and we helped them to communicate their mission to the rest of the world.

 

Design Review

Impressed by the project we made with Euroglass, Pure Surf Camps contacted us for a design review, but this was only the first step of our collaboration. At the beginning we  identified problems related to usability and information architecture, such as: lack of controls on main interactions, navigation and orientation issues, content scanning and information discovery, booking issues, customer support and information.

Information Architecture

Do you know how many surf camps you can find in the world? A lot. And each camp has its peculiar features to highlight. This is why we focused on information architecture organizing categories able to improve website exploration. Our goal was give a huge number of information without strain our users. We built a new hierarchy of contents by homogenizing labels, creating consistent macro-categories, and building a new navigation tree.

Sketch & Paper Prototyping

We started putting on paper our ideas. We created a set of sketches focusing on users’ experience and navigation in both desktop and mobile, trying to meet the needs we found out during the workshop. Contents, design solutions, micro-interaction, and navigation menu: in these low-fi prototypes we started to put all pieces together shaping Pure Surf Camp’s new website.  

Wireframing

Sketches became soon wireframes. We knew what we wanted, but we needed to put things in the right place managing spaces and contents by using box elements, tabs, and captions. We designed two different structures of country pages and surf camp to facilitate holiday choice. A sticky menu inside surf camps pages helps users to reach all information they need.

Style Guide

We wanted to find a visual language able to communicate Pure Surf Camps’ souls: professional approach and surf lifestyle. We chose to use a minimal visual language without losing emotional and engaging elements. Blu was definitely our color and transparency a nice touch. Big beautiful images catch users’ eyes at first glance bringing their imagination over there, to the seaside waiting for the next wave.

Mockup & Responsive design

Every single module have been designed to fit automatically the layout of mobile version.
Creating mockups we celebrates Pure Surf Camps’ beautiful images and we used them in inside grid layouts, giving to the website a distinctive mark and creating a visual storytelling about surfers’ lifestyle. Even the mega menu uses big images with short information that appear on mouseover, helping users’ navigation.

 


 

 

Microinteraction

In details we trust! This is why we designed micro interactions, a small contained product moments that include single use case and getting more personality to the interface and a better relationship with users. We focused on accordion transitions, different call to action in the sticky menus during scrolling, and  informations just hover surf camp boxes.

 

Icon Design

A large set of icons helped us to give personality to the website empowering the brand identity and its visual language. We created a custom grid, a new notification system and we found a way to insert additional information about Pure Surf Camp’s world by using different details inside the icons.