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.
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 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
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.
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 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.
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.
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.
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.
- Click rates on the parking information
- Increased patron satisfaction
- Parking is less of a mess at event
- Use of shuttles
- 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!