Surf’s Up! A Total Redesign for a Surf Competition Microsite

Ally Campbell
Oct 8 · 5 min read

The challenge is to create a microsite for this year’s edition of the surf festival. The website needs to include all of the information for this edition and links for the community, along with ticket sales.

I started out with some industry research, and I found that the global surfing industry generates $7.3 billion each year in revenue. The average surfer in the United States:

  • Has an annual income of $75,000
  • Has 16 years of surfing experience
  • Goes surfing 108 times per year

90% of all surfers in the United States are male, and 91% have traveled to go surfing in the last four years.

I created a competitor feature analysis to get a better understanding of what my users expect when going to a surfing competition. I found that there are not many surf festivals throughout the United States. Many surfing competitions and festivals are in foreign countries, like France, England, or Tahiti. Some are actually music festival+surfing contests.

Competitive Feature Analysis

I also created a market positioning chart, looking for gaps in the market among my competitors. I decided that a surfing competition festival for “legit” surfers would fill a gap in the market.

Market Positioning Chart
User Persona and Journey Map

Based on three interviews with surfers who have been to several surfing competitions, I created a user persona, Cutback Cameron. Cutback Cameron represents the average person in our tribe of legit surfers. This allowed me to keep my focus on the target audience throughout the project.

I then created a journey map to add context to our user’s frustrations. This let me visualize our user’s pain points and see the opportunities to ease those frustrations with design.

I created a user story with the Jobs-to-be-done framework so to identify the job the user needs to accomplish and stay user-centered. “When recreational surfers go to surfing competitions, they want to easily find parking information, so they don’t waste time and money on parking.”

I ideated on the question, “How might we make parking at surfing competition events accessible and affordable?”

The minimum viable product:

  • A Microsite for the Event
  • Parking Information
  • Ticket Sales
Current vs. New Site Map

I looked at the current structure of the site, and created a site map. I then created a site map for the new version of the site, in which I added hierarchy.

User Flow

I created a user flow which helped me to know what screens I needed to focus on while sketching my low-fidelity prototypes.

Low-Fidelity Sketch

I did paper prototyping to test my low-fidelity sketch with users. I received great qualitative feedback, both about the odontology and the layout of the menu.

“I don’t understand the difference between ‘Event Info’ and ‘About’ sections,” one user said.

I used this to create my mid-fidelity prototype.

Mid-Fidelity Prototypes

I tested my mid-fidelity prototype with 5 users. Every single tester said their first instinct was to look for parking information under the event information. Due to this, I changed the design of the high-fidelity prototype to adjust my design to my user’s mental model.

I did a visual competitive analysis on our competitors to evaluate their design strategies and determine their strengths and weaknesses.

Visual Competitive Analysis

I created a style tile for our brand, and did desirability testing with 10 users. 100% of the users said it was “beachy,” and 80% of the users said it was “exciting.” I used these words to create the brand attributes for the site.

Style Tile and Brand Attributes

I created a design system to use throughout the project. This enabled me to develop the site more quickly, and gave me consistency throughout the design.

Design System

Below, you can see the current website (on the left), and the website redesign (on the right). I created a logo for NKF Surfing, because they didn’t currently have any branding.

Old vs. New Website Design

See the high-fidelity walkthrough of the site here:

My key learnings for this project are that Adobe Xd is great for creating microinteractions, but there’s still no mouse hover tool which is important to keep in mind. It’s also very affirming when multiple people choose the same brand attributes for your style tile. Last but not least, sometimes a simple solution is the best solution.

The next steps for this project include creating a live page of the website for ticket sales, which will help with overcrowding at the events, making the website responsive for mobile and tablet, and getting better at Flinto by practicing creating behaviors.

Success metrics:

  • Click rates on the parking information
  • Increased patron satisfaction
  • Parking is less of a mess at event
  • Use of shuttles

Failure metrics:

  • Parking is a mess at event
  • Patrons are dissatisfied
  • Nobody uses feature on website
  • Less patrons at event next year

Thanks for surfing along through this case study!

Maybe it even enticed you to sign up as an amateur surfer in the competition… Better practice though! You don’t want to try to paddle out over an oncoming wave, only to end up flipping backwards!

Ally Campbell

Written by

UCF Alum. UX/UI Designer. Instagram — @ux.ally Portfolio — http://ally.camp

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade