Bunger Surf Shop
Web-Redesign For an Iconic Surf Shop
Project Overview
Bunger Surf Shop, a cornerstone in the surfing community with a legacy as one of the nation's oldest surf shops, lacked a website that mirrored its rich heritage and physical presence. My goal was to overhaul their website through advanced UX design and usability testing, resulting in a high-fidelity, clickable prototype that truly represents Bunger's esteemed reputation and serves its wide-ranging clientele from New York City to Montauk.
Problem Statement
John needs to purchase a good wetsuit so that he can continue to surf in the cold weather.
Objectives & Goals
-
Establish the biggest pain points on the Bunger Surf website
-
Ideate solutions for solving pain points
-
Design a high-fidelity prototype for Bunger Surfs' re-designed website
Role and Responsibilities
My role as the Lead UX Designer for this project was to conceptualize and execute a comprehensive redesign of Bungers' website.
My tasks included:
-
Research
-
Ideation
-
Wireframing
-
Prototyping
-
Iteration
-
Testing
Scope and Constraints
-
Conducted user research and competitor analysis to inform the redesign of Bunger Surf Shop's website, focusing on improving information architecture and user flow.
-
Developed a modern visual design and a high-fidelity, clickable prototype, followed by usability testing to ensure the online experience aligns with the shop's esteemed reputation.
-
Execute a comprehensive website redesign for Bunger Surf Shop within a tight 3-week design sprint despite limited access to store statistics and data.
Research
Competitive Research
To start the research, I wanted to look at what the best-in-class competitors were doing on their websites and what a local competitor's website looked like.
​
I used a task analysis to buy a wetsuit online, and the results shaped the usability test and interviews for the next research step. Attempting to purchase a wetsuit online from Bunger was frustrating compared to best-in-class sites like RipCurl and DaKine. The most notable difference was in the navigation and the product information.
Key Takeaways
In my analysis, I identified Unsound Surf as Bunger Surf's most direct competitor. Both shops offer a similar range of products, with Unsound Surf presenting a logically structured navigation and a comprehensive inventory of surf gear available online. For a broader perspective, I benchmarked against industry leaders like RipCurl and DaKine, which currently dominate the market. This comparative study revealed several opportunities for enhancing Bunger Surf Shops' online presence to match or exceed the offerings of local competitors and align with best-in-class standards in the industry.
Usability Test
The next research step commenced by selecting 6 individuals with recent experience shopping online for beach or surf gear. I conducted a usability test and interviewed tasking participants with navigating from Bunger Surf's homepage to find a wetsuit, add it to the cart, and start the checkout process. These sessions were recorded with consent, providing valuable data for analysis.
​
User Persona
Utilizing the collective data from the user interviews, I developed a persona that embodies the typical customer for Bunger Surf. This persona, named John Smith represents the core characteristics, preferences, and behaviors observed among the target audience, providing valuable insights for tailoring our user experience and product offerings.
Design
User Flows
After establishing the user persona, I set to work designing the app. For the scope of this project, I decided to focus on a single-user flow for buying a wetsuit since that was what I did my task analysis on at the beginning of the research phase.
Sketches
Once I had an idea of the user flow, I sketched out each stage of the flow. Below are some of the key sketches that would have the biggest impact on the user experience. Since navigation was an issue in the usability test, that was one area that needed the biggest overhaul. And given the rich history of Bunger Surf, a comprehensive about page would add to the sites credibility and reliability.
Home page with drop-down navigation
About page with images and Bungers story
Wireframes
After completing a group sketching session, I took them into Figma to create wireframes that I could then apply for a Low-Fidelity Usability Test to validate my user flow before I moved on to the mid-fi frames. For the test I used Maze.co to track the heat map and completion rate of the task to find a wetsuit and complete the checkout process.
Validation
Mid-Fidelity Usability Test
I decided another round of usability testing on a clickable mid-fidelity prototype would be a good idea to see where users spent the most time on each page and where any problems would arise. I gave the users 4 tasks:
​
-
Navigate to find the wetsuit page
-
Select a wetsuit in the desired size
-
Locate reviews of the wetsuit
-
Complete purchase through checkout sequence
Test Parameters
-
Unmoderated test
-
6 New Test Participants
-
Used Maze.co
Mid-Fidelity Usability Test Results
This test had a 100% Completion rate, further validating my user flow and navigation setup. While the success rate was high, from the heat map, I found that there were some areas that could use improvement regarding button sizing and spacing.
Final Design
Next Steps
While I could have continued working on this project happily for longer, this was only a three-week design sprint, and I had to stop here. If I were to continue working on the Bunger Surf Shop website, the next most important steps would be to build out the inventory and populate all the menu items. I would also create a dedicated page for Bungers board shaping services; he has been making custom surfboards for decades. The last feature I would build out is an events page on their website that would feature local surf competitions and partnerships with local surf schools to reinforce the local community vibe that Bunger Excels at.
-
Build out other pages with updated inventory for online retail
-
Showcase Bunger Surfs custom surfboards services
-
Create a local events page to highlight surf competitions and local surf schools
