SURFING

Go wave-chasing anywhere in the world

  • Product Design

The Challenge

Surfing.com came to us with an innovative idea: build the ultimate online hub for all things water sports. What began as a simple surfing website was evolving into a multi-faceted travel website for wave-chasing.

On top of showcasing the best surfing locations, they wanted to provide an avenue for businesses to natively advertise without being too in-your-face.

The Goal

Develop a new website targeting multiple personas, allow partnerships and sponsorships with local businesses, design and create video content for an original streaming platform.

The Solution

A unique online surfing hub that’s equal parts travel website, B2B marketing platform, and streaming service. We combined all three elements into one platform to provide the ultimate home for surfing content.

world of waves
Let’s get granular

Discovering what drives surfing enthusiasts

The Research

Since we were starting from scratch on the UX/UI design, we began our research with a robust user and competitor analysis. We wanted to understand what drives users to pick up their boards in order to create features that let them immerse themselves in their favorite pastime.

The Takeaways

Pain Points

Lacking original content, no community aspect, overly-focused on tourists, outdated events, unreliable weather forecasts

User Goals

Network with active users, view weather forecasts, discover competitions and events, organize trips, stay on top of news and trends

Defining the target

Proto Personas were developed based upon answers from real user interviews. Their personality traits, skills, and goals were brought to light, allowing the design team to empathize with them on a deeper level.

Structuring the website and features

Since the website had multiple features and flows, we needed to carefully construct the sitemap and create a smooth navigation that enabled users to find the pages they need without friction.

blockimage2

Designing the ultimate online surfing hub

Wireframes

After creating the sitemap, we realized how much ground we had to cover on first glance. A goal-driven information architecture was a must.

Because the site was so large, we took an agile approach with weaving the features into the home page’s content hierarchy. The “skeleton” of the website had to be right before we transitioned to high-fidelity designs.

High-fidelity design

Once the wireframes were approved by the client, we went to work applying graphics and branding elements to the website. We wanted the look and feel to speak to the culture of surfing.

We created each page’s visuals and started developing the client-approved ones while we designed the remaining ones.

surfing.com logo

“The team had done such an awesome job at understanding our
users and provide them with a tool they now love to use”

Ben Dordrige - VP of Product

Creating brand that scratches the water sports itch

Poppins H1 140px

Poppins H1 140px

Poppins H2 80px

Poppins H2 80px

Poppins Large text 35px

Poppins Large text 35px

Inter body 20px

Inter body 20px

Inter small text 17px

Inter small text 17px

PRIMARY

003742

f89017

SECONDARY

0075b2

28acae

4c686d

dc0000

SHADES

50bdbf

ddf2f2

e6ebed

surfing.com homepage
surfing.com gallery grid
surfing.com video mockups
surifng.com promo and deals
Next Case

What Are You Creating?

Tell us a little bit about your project and someone from our team will get in touch!

what_are_you_frame

"*" indicates required fields

What do you need help with?*
Project Budget*

What Are You Creating?

Tell us a little bit about your project and someone from our team will get in touch!