Matter Makes Waves with a Headless Build using BigCommerce for WordPress

Surfers don’t buy surfboards every week, but they will follow a brand between purchases. That’s why content management was a key strategy when building a new e-commerce site for leading surf brand, Firewire Surfboards. The surfing community consumes exciting beautiful images and video content daily through social channels. They’ll see and be inspired by the way a surfer rides a wave and how the equipment they ride enables advancements in performance. Firewire connects directly to their audience by publishing content about team riders, technology, sustainability, and company announcements both on their podcast, The Wire, and their website. This content piques the community’s interest in the board design and makes them want to know more.

At Matter, we knew that a content-forward strategy was necessary for success in the surfing community. This was a huge driver in our decision to use WordPress for the site’s front end while powering our backed e-commerce functionality through BigCommerce.

Our role

In 2018 BigCommerce introduced my team at Matter to the team at Firewire Surfboards to work on a cutting-edge headless commerce project. For me this was a dream project, working with an innovative surfing brand owned by American world champion surfer Kelly Slater, using some cool new tech from BigCommerce.

The brief was to create a premier headless e-commerce website using the new BigCommerce for WordPress plugin. The main goal was enabling Firewire customers to easily find their perfect surfboard online and make the best damn surfboard site out there!

Using BigCommerce for WordPress

The headless commerce structure that BigCommerce envisioned with their plugin allows for a scenario where the technology fits the user journey, not the other way around. By building the presentation layer in WordPress we were able to create a website that displays rich content that’s engaging to the user and portrays the Firewire Surfboards brand the way that a surfer would want it to look.

Content is the hook which will engage the audience. The e-commerce element, therefore, needs to flow from that experience and present products seamlessly into that visit. Previously on WordPress we would have used WooCommerce to manage e-commerce, however, that system would have required plugin after plugin to reach the required functionality. And we know that the more plugins required, the more pressure it puts on site’s speed, security, and its ability to be maintained.

The use of BigCommerce for the e-commerce functionality offloads the WordPress instance, speeds up the website, adds performance, and ultimately leads to a greater user experience. The BigCommerce plugin takes care of payments, order management, analytics and all of the e-commerce functionalities required.

We were able to achieve a 1.4 second load time on mobile devices, something that would have been hard to achieve had we built the functionality using WooCommerce and multiple plugins.

A key benefit to this structure is the ability to set up system integrations between BigCommerce and an organization’s internal systems. In this case we integrated BigCommerce with Acumatica ERP, feeding live inventory and pricing into BigCommerce which in turn would sync to WordPress every 5 mins.

Headless Commerce System Architecture

How We Formulated Our Solution

Our main objective was to fulfil the key goal of Firewire Surfboards — helping surfers find their perfect board. To achieve this we would need to use the new BigCommerce for WordPress plugin to its full potential.

1. Gather data and research.

Our developers first researched the database structure to understand what information BigCommerce will store and what information WordPress will store so that we could carefully map the information systems and utilize their full potential. We also had ongoing contact with the BigCommerce technical team to best understand feature releases and timeframes.

2. Assess tooling and approaches.

We used Docker to set up a local development environment and utilized phpMyAdmin to access data from the database. Throughout the project, we would work with the BigCommerce WordPress team on the progress of the plugin and we also kept an eye on BigCommerce for WordPress plugin’s GitHub page for the latest issues and updates.

3. Implementation.

Once it was ready to implement, we set up the custom settings in the WordPress backend and build the data as a WordPress shortcode, allowing the admin user to edit/change the volume data easily.

When the user calculated the volume we stored the volume range value in the user’s browser cookie. On the ‘boards’ page, we use javascript to retrieve the user’s volume data from the cookie and use Ajax to send a request via a WordPress AJAX hook. From here we query the database to pull in the relevant information and filter with users’ volume data, then reorder the HTML to the frontend.

4. Release.

We pushed the functionality to the staging server for testing and feedback. Together with the Firewire team, we came up with a range of user test cases that we could use throughout the QA testing process, allowing us to explore all options. We also checked the functionality on different browsers and devices for usability and responsive testing.


Building a Custom Volume Filter

Keeping in mind that innovation is a key part of Firewire Surfboard’s mission #TheFutureUnderYourFeet, our focus was to code an experience that emulated the ease, simplicity, and outcome of an in-store consultation.

When selecting a surfboard, the most important product attribute to get right is to match the board volume to the rider’s weight and skill level. Volume determines the buoyancy of the board and the way it floats the rider and responds to their movements.

My project team of developers Kevin, Jeremy, and James, along with our lead UX/UI designer Alberto conceptualized a digital shopping experience that would give customers similar guidance on product selection to what they would experience in a physical surfboard store. The idea of a custom Surfboard Volume Calculator and product filter was born.

Conceptualizing this component kicked off with a look into Firewire’s previous volume matrix, which would allow the user to work out their volume, but without integrating that information into the user experience, and the filtering of products. Our team came up with the idea of a custom volume calculator that would allow the user to determine their ideal volume and filter results based on an algorithm providing a range suited to them.

The user flow starts with the selection of ‘weight’ and ‘skill level’ using a drop-down menu. The system runs this calculation on the user’s browser, which enables the filter to calculate the volume and recommend a surfboard.

Once the user calculates the volume the interface prompts the user to navigate to the ‘boards’ page where their recommended boards will be displayed. This calculation is done through the database located in the WordPress backend linking with the attributes of the BigCommerce product. The calculation simplifies the e-commerce experience for the user, removing steps from the user experience process and enabling a simpler conversion.

The volume formula data is saved in the backend of WordPress, allowing the Firewire team to have full control over the data and add or edit a record with ease. The volume filter range slider allows the user to slide through the volume range, changing the calculations depending on size.

Volume data was fed through from the ERP level meaning we were able to utilize data from their central source of truth and avoid manual updates and data going out of date.

UX for Surfboard Volume Calculator and Product Filter

Global Rollout

One of the appeals of the headless commerce structure is the variety of options we have to control the user experience in different regions. Firewire currently operates through a network of bricks and mortar retail stores. Enhancing business for these stores was a primary objective for the project. By integrating a store locator into the user experience we’ve been able to make the Find a Surf Shop page one of the most popular pages on the website.

Shoppable pages are restricted by region. This allows us to ‘turn on’ regions as Firewire is ready to fulfil orders. To do this we use two methods: geolocation for broad regions, or in the case of Surf Ranch, we use a cookie to enable a kiosk device that allows visitors to browse and buy a Firewire Surfboard.


What We Learned

Through this project, we became very familiar with the BigCommerce to WordPress plugin and its roadmap. I think this is a really exciting progression for both BigCommerce and WordPress as it opens up more possibilities for the user experience and content-driven user flows.

We found that working with a WordPress frontend encourages a more creative approach to the project requirements. Whilst we don’t get the full benefits of the BigCommerce hosting infrastructure to serve up the front end, we do have control over the hosting and functional technology that we build into the website.

The project as a whole really brought our team together as it was an honor to work on one of the pioneering websites using the BigCommerce to WordPress plugin.

The Results

We reviewed data from Google Analytics comparing the month post-launch with the month before launch. Results across the board show a strong report for the improved user experience and content available on the new website:

  • Page views — increased by a massive 325%
  • Session duration — increased by 67%
  • Revisits — increased by 44%
  • Bounce rate — decreased by 41%
  • 2 x Site speed — page load time cut in half!

Conclusion

Our aim was to develop a site that is innovative, with high-quality design execution, animation, and interaction design elements that bring the Firewire brand experience to life. We really feel that we achieved this as a team and have had only positive feedback from the wider Firewire team as well.

“We’re so proud of it.” — Chris Grow, Global Marketing Manager Firewire Surfboards

You can check out the website at https://firewiresurfboards.com and the volume calculator at https://firewiresurfboards.com/surfboard-volume-calculator

For more information on the build team visit https://matter.design