Project snapshot
When Travis Perkins learned they needed to make a change to their eCommerce software, the task seemed overwhelming. With three sites displaying unique data, the building supplier decided they needed a custom system to handle site migration and ongoing eCommerce needs. They asked Intellias to help them develop a more efficient website management system that would allow each site to retain its unique characteristics and brand style.
Travis Perkins has more than 550 branches that generate a lot of sales, so their systems produce a lot of data. Intellias designed and built a multi-brand headless website platform for the company’s three brands:
- Travis Perkins, a building materials supplier
- Keyline, which provides civil engineering and construction services
- CCF, a distributor of insulation, drywall, and ceiling products
As a result of our collaboration, each site has maintained its fundamental brand characteristics. The front ends of all three sites now share 85% of the same code, which build its structure. Their back ends share the same application program interface (API). The API gives the websites access to the same backend data. The multi-brand headless websites use only the data they need, but more backend data (such as for checkout and payment services) can be exposed to front ends.
This is an efficient way to design an evolving end-to-end multi-brand digital retail platform. The Travis Perkins platform includes microservices that connect the website front ends to other systems and to the store’s back end, which holds the business logic. The new platform saves time and money, and it simplifies the process of launching new eCommerce websites for future Travis Perkins brands. A fresh, modern UI improves user experience. Meanwhile, the company has gained benefits from modern websites, such as better SEO. The headless approach—decoupling the websites from the backend, so the sites can be updated independently—has also given them the flexibility to add frontend services in the future.
Travis Perkins has been a leading supplier of building materials and services to trade customers for over 200 years. The company has over 550 branches, including more than 150 Benchmarx showrooms, and employs 8,400 associates.
Business challenge
When Travis Perkins contacted Intellias, the company was using a commercially licensed website management system. Although the company’s three branded eCommerce websites shared similarities, the sites had been designed with access to different data sources and using code that was unique to each site. This lack of continuity led to operational inefficiencies and an inconsistent user experience on the sites’ outdated UIs.
The retailer faced many challenges because of their legacy system, including:
- Downtime: Rolling out updates or spinning up new sites required taking a site offline, which left them unavailable to customers who wanted to place orders
- SEO: The sites were inadequate for search engine optimization (SEO), which is essential for helping customers find products
- Personalization: Users could not customize their site experience or maintain their sessions, which keeps items in a cart when a user navigates from the site
- Stock availability: Associates had to check stock availability by printing known stock and manually checking the shelves
The goal was to use the same data from the microservices for each brand. However, different brands needed different data. For example, the main Travis Perkins website accepts payments. Therefore, it needed to be connected to payment processing systems. But the others do not. Travis Perkins wanted to make data available to existing sites and choose which data they would use for future sites.
Solution
With decades of experience developing eCommerce websites, we designed and built a modular, API-driven custom headless website platform for Travis Perkins. Created for scale and speed, backend microservices make the same data available to the front end of each website and to their mobile applications. The UI of each site then displays only the data it needs from the microservices. The microservices run on AWS, are managed in Kubernetes, and are powered by real-time data streams using Kafka. Here’s how it works:
- Users interact with the websites, which request data via GraphQL APIs
- Backend microservices handle the retailer’s core functions, such as orders, product catalogs, and payments
- Real-time data streams between the services
- Integrations connect backend services to backend office systems (e.g., HR, finance, or PIM)
- Kubernetes runs the entire system on AWS and manages deployments while monitoring performance
There are many reasons to use a headless website platform:
- Flexibility: You can deliver the same data to multiple sites and still control data availability within each site’s UI
- Performance: Because the sites’ front ends function independently from their data sources, they load faster
- Development freedom: Instead of templated designs, developers can choose the layout that works best for each situation
- Future-proofing: As technology changes, the front end and back end can be updated independently
Our first step was to build new websites for Travis Perkins using ReactJS. The structure of each website allowed developers to reuse most template components across all three brands. However, the sites were flexible enough to provide distinct branding. Next, we created a new website management platform on AWS and connected microservices to the websites and backend applications (price, stock, fulfillment, HR, and others) via GraphQL APIs. We then mapped the backend components and applications to the UIs for each brand. This helped determine which microservices the sites would use. As business needs change, Travis Perkins can choose what data to use on each site.
Business outcomes
The new websites provide a better eCommerce experience for Travis Perkins shoppers and associates. They have improved customer service, streamlined data integration with third-party services, and reduced site development and maintenance costs. Additionally, the new websites have:
- Reduced the cost to launch a new brand by 83%
- Cut the time to launch a new website to six weeks
- Allowed Travis Perkins to update websites with zero-downtime releases
- Optimized SEO
As more data is exposed to the sites, more features are available to users. The platform is a continuous project.
KPIs:
83%
cost reduction to launch a site
6
weeks to launch a new brand
0
downtime releases