Spencil-Headless-Feature-Image

Project Objective

To deliver a cohesive technology solution for the Spencil B2C & B2B e-commerce experience and launch a new website built with a headless system architecture.

The headless system architecture allows the website to be composed with data from multiple sources (microservices) while maintaining high load speeds and consistent URL structures.

Key objectives included:

  • JAMM.™ Headless Frontend Accelerator
  • BigCommerce SaaS e-commerce system
  • WordPress CMS for blog curation and publishing
  • Builder.io CMS for drag and drop editability on homepage and landing pages
  • Klaviyo marketing automation for managing customer engagement
  • Gorgias for multi-channel customer service
  • Backend API connection to CIN7
  • Geolocated stockist locator powered by Localisr
  • A top Core Web Vitals score on Google
Spencil-Home-Page-Example

Discovery

Matter started the discovery with a series of three workshops inviting the Spencer Brands Group to explore, in detail, their:

  • Brand and customers
  • User journeys
  • Technical solution

This was then supplemented by organising demonstrations with technology partners Klaviyo, Gorgias, and Reviews, plus additional workshops to cover specific aspects of the project in more detail, for example, order management, content management, B2B vs B2C customer journeys.

Strategy

Our strategic direction was to build Spencil’s e-commerce experience using a headless system architecture – the most advanced approach to e-commerce technology. Given the nature of the Spencer Brand Group’s project objective – to manage multiple websites and microservice connections – Matter agreed the headless framework would offer the best solution. 

The reason headless formed the basis of the strategic proposal is 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. The headless system architecture can be set up to pull data from multiple sources via an API, for example when data is coming from WordPress, BigCommerce and Builder.io to display on one centralized front-end. 

Spencil Childrens Toys Feature Image

Creativity

In order to achieve the most value within the project budget, Matter proposed a holistic approach to the Spencil website design. The creative strategy was to develop layouts and functionality that can be used across both the Spencil website and other websites in the Spencer Brand Group’s pipeline.

The design focused on enhancing the B2C user journey while incorporating content and UX tailored to the B2B user journey. The designs took into consideration the playful Spencil branding while enhancing the functionalities of multiple microservices, such as WordPress and Localisr, coming together to achieve a seamless e-commerce experience for the user.

Spencil Mobile View

Technology

Headless frontend powered by JAMM.™

The Spencil 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, connections to platforms scoped out in the Spencil website discovery phase. For example, a connection to WordPress CMS and Builder.io allows Spencil 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.

Spencil PLP example

BigCommerce Integration

BigCommerce is the backbone of the e-commerce experience for Spencil customers. Running the Spencil e-commerce experience through BigCommerce gives the store the stability, security and scalability not offered by other e-commerce platforms such as WooCommerce. BigCommerce also offers strong PCI compliance allowing Spencil to safely and securely accept, store, process, and transmit cardholder data during credit card transactions to prevent fraud and data breaches.

BigCommerce is connected via an API that runs through the JAMM.™ framework and displays on the user’s browser. It powers the product landing pages, detail pages, shopping cart and checkout.

PDP Example

Localisr Integration

Spencil has a number of stores across Australia. Customers buy through stores serviced by experienced and knowledgeable staff giving the brand a local feel. It was important that the website experience reflected this type of customer interaction, and using Localisr we enabled the following features:

  • Find a store
  • Nearest store by postcode
  • Contact store

These features make the web experience relevant and accurate for the customer based on their individual location.

Find-Your-Store

WordPress CMS

To achieve optimised website design and user experience we built the site using the innovative headless commerce for WordPress technology, a structure that gives the Spencil team the ability to fully customise sections of the site using the WordPress content management system. WordPress is connected via an API that runs through the JAMM.™ framework and displays on the user’s browser. 

WordPress powers the vibrant and colourful Spencil blog pages which can be viewed here.

Spencil Blog Example

Builder.io CMS

Similarly to the WordPress scenario, Spencil wanted to maintain control over the design of their internal pages. They do this using the Builder.io CMS. Builder.io is connected via an API that runs through the JAMM.™ framework and displays on the user’s browser. The CMS powers Spencil’s competition pages.

Builder.io-Example-Page