Surfing.com

Whether you’re into surfing, boating, skiing, or anything else, Surfing.com is the hub for all things water sports.

Placeholder

Introduction

Surfing.com wanted to build an online forum that was equal parts travel site, streaming service, and B2B marketing. For this UX/UI design, we used our creativity and expertise to combine all three elements into one platform.

The Challenge

Surfing.com wanted a website to showcase all things water sports and provide an avenue for businesses to advertise locations and product imagery through partnerships and sponsorships. We were tasked with creating a website that allowed businesses to natively advertise without making it too in-your-face. Users can sign up to become Wave Emissaries or Friends in the Know, which allows them to edit information about surfing locations and advertise themselves with their profiles. Additionally, we were asked to create videos for Surfing TV, their own television series.

Surfing.com wanted a website to showcase all things water sports and provide an avenue for businesses to advertise locations and product imagery through partnerships and sponsorships. We were tasked with creating a website that allowed busi...

Surfing.com wanted a website to showcase all things water sports and provide an avenue for businesses to advertise locations and product imagery through partnerships and sponsorships. We were tasked with creating a website that allowed businesses to natively advertise without making it too in-your-face. Users can sign up to become Wave Emissaries or Friends in the Know, which allows them to edit information about surfing locations and advertise themselves with their profiles. Additionally, we were asked to create videos for Surfing TV, their own television series.

Placeholder

The
Solution

What started as a simple surfing website became so much more. After doing some UX research and competitor analysis, we gathered from the client a list of features that we wanted the website to have, and we designed and developed the entire Surfing.com UX/UI design from scratch, including their own video content for Surfing TV.

Starting with wireframes and mockups, we quickly ramped up into high fidelity after approval. Because the site was so large, we took an agile approach and started developing the approved pages while we designed the remaining ones. Ultimately, we delivered a product that scratches the surfing itch and provides a home for all surfing content.

What started as a simple surfing website became so much more. After doing some UX research and competitor analysis, we gathered from the client a list of features that we wanted the website to have, and we designed and developed the entire Surfing.com UX/UI design from scratch, i...

What started as a simple surfing website became so much more. After doing some UX research and competitor analysis, we gathered from the client a list of features that we wanted the website to have, and we designed and developed the entire Surfing.com UX/UI design from scratch, including their own video content for Surfing TV.

Starting with wireframes and mockups, we quickly ramped up into high fidelity after approval. Because the site was so large, we took an agile approach and started developing the approved pages while we designed the remaining ones. Ultimately, we delivered a product that scratches the surfing itch and provides a home for all surfing content.

Research

A robust analysis of the Surfing.com competitors helped inform our team about features that worked well but could be improved upon.

Design

Starting with a site map, we planned out the basic structure of the site. Then we designed its skeleton in wireframes before ramping up to high fidelity mockups.

For the website development part of this project, we created the architecture of the site, then developed the base components and the configuration for all the necessary screens.

Development

While we continue to create video content, the biggest next step will be to create an app that allows users to take the features of Surfing.com with them on the go.

Next Steps

Featured
Solution

Because we also produced the videos for the Surfing.com team, it was easy to integrate the video into the UX design because we knew exactly what it would contain, and we had control over how it would be displayed. When we designed the page, we gave enough consideration to video placement so that everything felt natural for the user.

 

Because we also produced the videos for the Surfing.com team, it was easy to integrate the video into the UX design because we knew exactly what it would contain, and we had control over how it would be displayed. When we designed the page,...

Because we also produced the videos for the Surfing.com team, it was easy to integrate the video into the UX design because we knew exactly what it would contain, and we had control over how it would be displayed. When we designed the page, we gave enough consideration to video placement so that everything felt natural for the user.

 

Placeholder

The
Deliverables

Deliverables can consist of mockups, presentations, one-pagers, site maps, wireframes, website development, the finished website itself, and so much more. Each project is different and requires different deliverables to achieve success, but for this UX/UI design, we’re showcasing the UX research, user flows, video projects, and microsites that made this project so unique.

Wireflow and IA

Wireflow and IA

Design

World of Waves TV Spot

World of Waves TV Spot

Design

USL Site

USL Site

Design

Mobile App

Mobile App

Design

Login Screen

Login Screen

Design

Oceanic Media

Oceanic Media

Design

Project Summary

Surfing.com was one of our biggest projects to date, and it continues to be ongoing with new features added every day, as well as more content in the form of videos. We continue to improve on website development and speed/load times, as well as the onboarding flow for user profile creation. Our next steps are to create a mobile application.

Do you have more questions about Surfing.com? Interested in starting a UX/UI design project just like it? Start a project with us today!

Research

Research

Investigated competitors for features and functionality to improve.

Design

Design

Created the website, beginning with wireframes and ending in high-fidelity.

Development

Development

Turned the mockups into a live website that hosts all surfing content.

Video Production

Video Production

Created and edited episodes and highlights for their Surfing TV brand.

Google Analytics

Google Analytics 1
Google Analytics 2
Google Analytics 3

Interested in Seeing More?

Kognito
Education

Kognito

We designed marketing landing pages for Kognito to demonstrate their AI and video simulations.

GameBench
SaaS

GameBench

We built a conversion-centric site catering to GameBench’s diverse user personas and conducted a robust marketing campa...
It's Just Lunch
Arts & Entertainment

It's Just Lunch

In honor of their 30th anniversary, we created the all-new It’s Just Lunch branding and website design to celebrate the...
GĒR
Arts & Entertainment

GĒR

We built a mobile app design for GER’s unique combination of social media and e-commerce — as well as a pitch deck fo...
Kognito
GameBench
It's Just Lunch
GĒR