“The decision to hire Matter Design was so easy. They researched our business and industry in a way that other agencies we interviewed did not. They also illustrated how intuitively they could understand our customers and community.”
To capture the Firewire Surfboards brand experience and allow customers to easily find their perfect surfboard online.
To enable Firewire’s digital commerce strategy, by building a platform that gives them optionality for regional markets. The first release would be a digital shopping experience at the Kelly Slater Surf Ranch in Lemoore, California.
The opportunity to work with the innovative team at Firewire Surfboards, using the latest technology by BigCommerce for use at Kelly Slaters Surf Ranch was a dream project for our Director Nigel Poole, a keen surfer since being hooked as a young grom on Sydney’s Northern Beaches.
Firewire Surfboards and Kelly Slater Surf Ranch are majority owned by Kelly Slater, 11-time World Champion, and undoubtedly the most influential surfer ever.
Firewire Surfboards is well-known in the surf industry for advanced products, innovation, and eco-friendly materials and processes. They are also known for making boards for some of the worlds best surfers, including Kelly Slater.
Their website would need to communicate all aspects of the brand, products and team riders with an advanced design and high-quality execution. E-commerce would be rolled out in stages at specific locations, for customers in other locations they would see the full product catalogue with detailed information and links to where they can buy the products.
Matter Design was introduced to the team at Firewire by BigCommerce to build the premier headless eCommerce site using their new WordPress-BigCommerce integration. The technology enables the primary frontend to be built on WordPress to allow for greater customisation and support for their blogs and content pages, with BigCommerce running the e-commerce securely behind the scenes.
“What Matter Design did fantastically was take this insight from my team, and reconceptualize what the product discovery process on our website could be.”
The main challenge for us was how to fulfil the key goal of Firewire: helping surfers find their perfect board. For someone landing on the website, it can be information overload trying to find the correct board shape and size for their needs, and that was exactly what Firewire wanted to address. Innovation is a key part of Firewire, their mission being #TheFutureUnderYourFeet. Therefore this online experience needed to ingeniously emulate the ease, simplicity and outcome of a consultation in store.
Matter’s designers sat down with the development team and they brainstormed options to capture that experience. Led by Director Nigel Poole, the team was able to conceptualise a digital shopping experience that would give customers similar product selection guidance to what they would experience in a physical surfboard store.
The result was a proprietary volume calculator coupled with useful product filters that would refine Firewires extensive range of board designs and sizes down to a list that is suited to each customer. Designed with an intuitive UX and UI the user is prompted to select their weight and skill level. Using those inputs an algorithm calculates their ideal volume and volume range to apply as a filter across their range of boards.
Stored for their browsing session, the filters enable the user to browse the site with board shape and size recommendations personalising the experience and making it easy to find the perfect board.
Firewire Surfboards are technically advanced, pushing the boundaries in design and materials usage. Innovation is at the core of their brand, with the ultimate goal to give surfers the best wave riding equipment. The web experience had to reflect these values and mission – immersing the user in visual content, with a minimalist interface and intuitive functionality integrated into the experience.
Surf photography is so nice to work with – vibrant colour, natural beauty and the best riders pushing performance limits. The images are the hero, and our design intent was to bring this content to life with animation and sophisticated interaction design. Analysis of traffic data revealed equal usage on desktop and mobile, so the experience and design needed to work seamlessly across all devices.
Custom Animation and Styling
When you first land on the site, you are greeted with beautiful high-quality imagery of the boards in action. We applied a slider with a varied animation to be emblematic of the movement of the sea. We also used a parallax and slide in highlight function over the buttons to sustain the modern style and movement across the site.
To stay on brand style, we customised the store locator map, incorporated animation when hovering over images and menu items. On individual product pages, the site uses a sticky bar for highlighting board images and includes an embedded Youtube video on some boards to help shoppers see the potential product in action.
We set ourselves the goal to design a beautifully elegant experience on all devices. There are a number of features built into the site to enhance the mobile experience. The site uses a swipe motion when viewing boards from the home page to make the site more mobile friendly. The menu collapses into a hamburger menu in mobile and extends out with items scaled to be easy to press and an overlay over the remaining section of the screen. Images and text are also resized and layouts reformatted at different breakpoints to allow for visibility optimised for mobile screens.
To achieve deliver a highly immersive experience with powerful e-commerce, we built the site using the innovative BigCommerce headless commerce for WordPress technology, a structure that gives powerful e-commerce with the fully customisable WordPress content management system.
Having been in discussion with the BigCommerce for WordPress product team for a number of months about how this structure could be best employed, we felt Firewire Surfboards was an ideal candidate – a rich content led experience that needed the backing of the powerful e-commerce capabilities offered by BigCommerce.
So why build with BigCommerce and WordPress structure?
Well, it offers the best of both worlds…
- WordPress is the worlds most popular content management (60% market share of CMS websites), BigCommerce is a feature-packed SaaS e-commerce platform built for mid-market merchants.
- Building with WordPress feels unrestrained. Our designers can create visually rich interfaces and sophisticated interactivity. Our approach is design-led and innovative, knowing WordPress provides highly customisable post types we can use to deliver unique online experiences, perfect for immersing the user in the Firewire brand.
- BigCommerce is our platform of choice for serious e-commerce stores. Running the Firewire e-commerce through BigCommerce gives the store stability, security and scalability not offered by other platforms through WordPress.
- BigCommerce APIs allow fast stable connections with other business systems. On this project, Accumatica is the companies ERP and source of truth for data. The integration to BigCommerce built by Cloudsnap keeps the website up to date with accurate product data.
What was achieved by this website
- Create a site that easily enables the customer to find their perfect board
- Digital shopping experience to allow purchasing at the Kelly Slater Surf Ranch
- A global brand website promoting products, innovation, sustainability ethos, team riders and company news
- Develop a site that is innovative with high-quality design execution, animation and interaction design elements to bring the brand experience to life
- ERP integration, payments, shipping and tax configurations managed by BigCommerce
- Fully responsive development to suit all screen sizes and devices
- Custom product filters for enhanced product browsing
- Structured site search functionality
- Provide a source of detailed product information
- Promote Firewire’s network of physical and online retailers around the world
“We are providing our customers at Surf Ranch with an elevated ecommerce experience that represents our brand well, and enhances the real world experience at Surf Ranch. We’re so proud of it.”