Surf Holidays Customer Experience
Pure Surf Camps
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.
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.
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?
Pure Surf Camps
What we did
Information architecture, user interface design, user experience, interaction design
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.
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.
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.
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.
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.
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.
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.