NKF Surfing

The Brief

The client is asking for an event microsite with a one-year life cycle — it will be stored in the main platform’s archive after this period.

The Goal

My goal in this four-day sprint was 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.

The Research

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.

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 based on my competitors.

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 put 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 jobs-to-be-done framework which is a concept to help guide me toward innovation — “When recreational surfers go to surfing competitions, they want to easily find parking information, so I can not 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

Information Architecture

I created a sitemap for the current website (on the left), and a sitemap for the website redesign (on the right). They define the structure and hierarchy of the pages through grouping of related content.

Interaction Design

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


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.

I tested my mid-fidelity prototype, using Maze, 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 fit 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.

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.

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.

The Current Site vs. The Redesign

View the High-Fidelity Walkthrough:

Next Steps

● Building out the rest of the website
● 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

Success & Failure Metrics

● Click-through rates to the parking information
● Increased patron satisfaction
● Use of shuttles
● Less/more patrons at event next year

Check Out My
Other Work

Got something in mind? Let's talk.