To deliver a world-class e-commerce website, delivering a high-end customer experience equal to the Forcite brand experience.
Our objective was to build a system that would perform for Forcite’s unique e-commerce strategy which exhibits high page traffic at specific times due to click frenzies when new batches of helmets go on sale.
Matter. proposed an advanced e-commerce system built on BigCommerce with a Headless system architecture. The headless system architecture was chosen to maintain high load speeds and consistent URL structures, as well as connection to various microservices.
Key performance indicators included:
- High-spec presentation of product
- Product configurator that gets the user educated on the Forcite helmets
- Interactive visual content – 3D animation
- Odoo integration to manage inventory
- App-like experience
- Fast path to purchase
- Promotion of dealer locations (plus dealer sales tagging)
Matter. director, Nigel Poole, and Forcite co-founders and industrial designers, Alfred Boyadgis and Julien Chew, happened to complete an industrial design course at the same university. It was their common interest in advancing technologies that intrigued Nigel about the project and so Matter. put forward a proposal to take on the build.
After learning the backstory of the brand – how in 2016 biking enthusiast and now Forcite co-founder Alfred Boyadgis took a fall going through an oil slick, seriously injuring his knee and compromising the protection of his head, prompting the inspiration for a more advanced helmet technology – Nigel worked with the Forcite team to learn more about the brand and scope out an e-commerce solution.
Matter. learned that Forcite enjoys the enviable position of high demand for its unique product in anticipation of supply. This demand has been achieved by seeding the market at a grass-roots level with high-quality product hardware, software and an ecosystem that has created excitement.
The current product scarcity makes the digital channel the place to engage the market and community, inviting them to opt in to become a Forcite customer through pre-sales of the MK1S.
The strategy for the build was to optimise the aforementioned detail – how to excite, engage and entice Forcite customers about their world-renowned product.
Sleek and futuristic design, progressive inventory management and advanced product configuration capabilities were at the forefront of the proposed solution.
Headless formed the basis of the strategic proposal because, in headless architecture, the front-end is decoupled from any platform and provides more flexibility to control how content is displayed to the user which ultimately leads to faster page-load speeds.
“In this specific case, headless would offer a frontend experience that delivers the sort of performance you would expect from a pioneering brand like Forcite,” said Matter. CEO Nigel Poole.
Matter. focused on the mobile experience when creating the UX/UI for the Forcite e-commerce website and designed the site to enable user journeys that had already commenced through social channels. For example, Instagram story > Configure your Forcite Helmet > Product configurator > Pre-order now. The sitemap was therefore designed with consideration of where the user has been prior to landing on the website.
The look and feel of the site brought in interactive visual content, both 3D and animation, to complement the futuristic nature of the Forcite Brand.
“We want the website to give the feeling of a traditional motorcycle brand with a technology startup twist,” said Matter. e-commerce designer, Alberto Varone.
The design approach included:
- A visually rich design aesthetic
- Technical typography
- Dynamic animation
- Functional navigation
- Pixel perfect execution of design in the frontend
- Editorial content to enhance the feeling of community
Matter.’s solution for the Forcite e-commerce system was to build with a Headless system architecture. This architecture enabled the delivery of the project requirements and established a platform built for future growth – growth in existing markets and growth in new markets through an enhanced digital offering.
The technology approach included:
- A SaaS-based platform
- E-commerce-first technology
- Headless frontend with microservice architecture
- Fast frontend especially for mobile devices
Headless frontend powered by JAMM.™
The Forcite website is built on the foundation of Matter.’s own frontend Headless framework, JAMM.™. The framework leverages libraries GatsbyJS and ReactJS to facilitate the required functionalities, and connections to platforms scoped out in the Forcite website discovery phase. For example, a connection to Contentful which allows Forcite to manage their content on a variety of content management systems and have it display on one centralised front-end, visible to the user. One major advantage of the JAMM.™ framework is that it offers lightspeed user experience and significantly improves page load speed times by reducing the time to compose the elements on each page. This improvement in page load time is rewarded in Google’s SERP metrics.
BigCommerce is the backbone of the e-commerce experience for Forcite customers. Running the Forcite e-commerce experience through BigCommerce gives the store stability, security and scalability as well as strong PCI compliance. BigCommerce is connected via an API that runs through the M.js framework and displays on the user’s browser. It powers the product landing pages, detail pages, shopping cart and checkout.
Odoo Inventory Management
Odoo was chosen as the preferred ERP which would nurture the unique inventory requirements of Forcite. Due to the high level of complexity around the management of the Core MK1S product, which is sold as a single product but is made up of many parts manufactured and assembled separately – all of which need to be tracked, Odoo offered the best ERP solution.
CMS via Contentful
Contentful CMS gives Forcite control over all content on the website. This fits with our philosophy of empowering our clients with the systems we build for them. The structured CMS gives precise control over content without risking the output published to the website.
As a headless site, we run a build process to send content live, which is all managed by the client in the JAMM.™ user interface.