To deliver a high-performing e-commerce system built with a headless system architecture – the most advanced approach to e-commerce technology.
This project objective was to enable the delivery of Videopro’s project requirements and establish a platform built for future growth – growth in existing markets through an enhanced digital offering and growth in new markets with a platform that enables regional e-commerce.
The headless system architecture allows the website to be composed of data from multiple sources or “microservices” while maintaining high load speeds and consistent URL structures.
Key performance indicators 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
- Akeneo PIM integration
- Fast checkout integration
- Advanced search with Algolia
- Geolocated stockist locator powered by Localisr
- A top Core Web Vitals score on Google
The discovery process began with understanding the past, present and future of Videopro. Since 2009, Videopro had been running their website on a proprietary technology and were looking to take a big leap into the future of e-commerce. Learning about their story, our director Nigel Poole consulted with the Videopro team on the best technologies in the market that would excel the company’s e-commerce component into future growth.
Nigel consulted with the team on all aspects of the tech stack, including marketing and customer service automations, reviews technology, (Product Information Management) PIM integrations, and advanced search capabilities. Matter put forward our suggestion for a headless system architecture.
Videopro is a household name in Southeast Queensland, Australia. The strategy was to build an e-commerce experience that would lead Videopro on its journey to becoming a national brand. As Videopro are known for their excellence in customer service and their exceptional knowledge of the AV world, Matter wanted to surface this expertise and human-centred approach on the website itself. “We enabled a content process to select high-end AV equipment dependant on the advice customers gain in-store. The website strategy was to make sure advice and content works hand-in-hand with the discovery process, for example, the addition of online buying guides and road tests,” Nigel explains.
The strategic direction was to build Videopro’s e-commerce experience using a headless system architecture. Given the nature of Videopro’s project objective – to offer a unified website that encapsulates the holistic brand offering – Matter knew the headless framework would lead us there. “With a headless architecture, we get to bring in content from different sources and create a holistic experience for Videopro’s online customers. This website is not just a simple add-to-cart type of website, it’s a discovery platform for high-end AV enthusiasts.“
The design focused on enhancing the B2C user journey for Videopro customers while incorporating content and UX tailored to the B2B user journey. The designs took into consideration the Videopro branding while enhancing the functionalities of multiple microservices, such as WordPress, Builder.io and Localisr, coming together to achieve a seamless e-commerce experience for the user.
Headless frontend powered by JAMM.™
The Videopro website is built on the foundation of Matter’s own Frontend Headless Framework called JAMM.TM. The framework leverages libraries GatsbyJS and ReactJS to facilitate the required functionalities, connections to platforms scoped out in the Videopro website discovery phase. For example, a connection to WordPress CMS and Builder.io allows Videopro 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.TM 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 Videopro customers. Running the Videopro e-commerce experience through BigCommerce gives the store the stability, security and scalability not offered by other e-commerce platforms. BigCommerce also offers strong PCI compliance allowing Videopro 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 M.js framework and displays on the user’s browser. It powers the product landing pages, detail pages, shopping cart and checkout.
Advanced Shipping & Checkout Options
Matter customised a built-in functionality to validate addresses based on business or residential. This function works with Shipper HQ to display the various shipping options to the user on the PDP page before checkout (based on postcode), and also at the checkout (based on address).
We also implemented a Fast checkout option for users who wish to directly checkout. The name really does say it all, offering an efficient, seamless, checkout experience for Videopro’s e-commerce customers.
Akeneo PIM Integration
Matter chose award-winning Akeneo as the PIM (Product Information Management) solution for Videopro.
Akeneo PIM is an intuitive platform that simplifies product information management. This software helps Videopro to centralize and harmonize all their product information and answer their multichannel needs. Our Akeneo integration helps Videopro quickly onboard new products, and automate workflows, detail, and extendability of data models. It also provides uniformity of data models across products in Videopro’s various categories.
Algolia Advanced Search
Algolia gives Videopro e-commerce customers seamless access to the product catalogue via AI-powered search, discovery and recommendations. The advanced search menu segments options such as related products, buying guides, articles and other suggested terms based on keywords entered.
Advanced search options allow users to access relevant content in milliseconds, rather than manually search through Videopro’s large catalogue.
Localisr Integration & Click & Collect
Videopro 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
- Click & Collect from store
These features make the web experience relevant and accurate for the customer based on their individual location.