Unified PWA frontend for Staples’ multiple legacy backends
Staples, a global office supply retailer, launched its first eCommerce site in 2001. Over the years, the company acquired other entities worldwide and their existing eCommerce systems, throughout which they continued to provide online services. Today, Staples faces the challenge of unifying their online presence across all touchpoints and has decided to test out modern Progressive Web Apps.
Providing global online services based on multiple backend systems is not an easy task, and Staples knew that well. Being the second largest eRetailer in the world (right behind Amazon.com), Staples have to provide daily maintenance of each eCommerce system separately. It brings a lot of challenges. This is a great struggle for the development teams, who have to work with the highly customized systems written in .NET and JAVA, but also for the end users.
What's more, owning entities and matching eCommerce systems in over 40 countries across the world, Staples tried to provide a consistent brand identity across all of them with great cost and effort.
Although this situation reflects the state of many seasoned eCommerce systems, the answer to such a challenge wasn't easy.
WHAT DID THEY NEED?
The eCommerce team knew that changing all backend systems on such an enormous scale would be intensively demanding and time-consuming. Instead, they decided to build a unified user interface (UI) for two backends available in the Staples technology stack.
At first, the company considered the development of a mobile native app, a new frontend, and various headless solutions, but in the end, it became clear that the best option would be a progressive web app which combines the features of a web page and mobile app in one.
At that time, Staples approached Divante, which develops Vue Storefront, a PWA storefront dedicated to eCommerce.
“We were looking for a partner who would not only take us through the steep learning curve with PWA but also build a close relationship with us to embark on a journey to transform the Staples eCommerce space” – says Luiza Warno, Head of Applications at Staples Solutions.
WHAT DID WE DO?
Staples and Divante began cooperation with workshops which helped both parties to understand the overall situation and decide on the final technology. The idea was to implement one, common user interface based on Vue Storefront in Azure Cloud and integrate it with two eCommerce backends (Genesis & Netshop).
By running this experiment, Staples hoped to answer the following questions:
The existing monolith systems, with the oldest machines from 2001, had to be switched to microservices. Staples achieved that by designing new API concepts and developing them for Genesis- and Netshop-based backends.
At the same time, they launched Azure Cloud on which the proof of concept was later built, tested and deployed. This cloud turned out to be highly available and cost-effective, and what's more, enables scalability for future developments.
In parallel, Divante focused on building a new, unified frontend that could later be connected via API to the backends. With the new frontend, the design team managed to standardize the user interface for all backends and turned it into a single, easy-to-maintain code base.
The new Staples frontend was designed as a Progressive Web App, so apart from standard web features it also provides the end user with all the typical PWA features like fast performance, offline mode, saving a webpage as an app (with an icon on the home screen) and push notifications, and significantly improved the mobile user experience. PWA technology is designed to adjust to all devices, from smartphones to desktops and perform as a mobile app.
Both teams worked with the plan-do-check-act approach which provided a unique opportunity to fit into the given time-frame and deliver even more. Thanks to that approach, the team delivered some extra features like offline ordering and product barcode scanning. While developing the product, we had we had three main Agile principles in mind: Customers first, people not process and working product.
”Thanks to cooperation with Divante we have improved our way of working and pushed even more for maturing our DevOps practices”– says Marcin Kaźmierczyk Head of eCommerce development at Staples Solutions.
WHAT ARE THE RESULTS?
The whole experiment engaged seven international teams spread across Europe, in the Netherlands (Amsterdam), Sweden (Borås), the UK (London) and Poland (Wrocław, Gdańsk) – it was approx. 30 people collaborating for 3 months. During this time, cooperating teams managed to set up an entirely new working environment using the microservice approach, design a new PWA frontend, and test it out. The final product delivered really great features like barcode scanning, offline ordering and one single point of entry for business and online customers. With a reasonable budget, Staples was able to validate four new technologies (Azure Cloud, PWA, a new API, and Vue.JS) in terms of its learning curve, simplicity to leverage and scale on the systems available globally.
“I had the pleasure to manage the New UI initiative. The key factor for success was definitely the team: very creative, adaptive and passionate, both on Divante’s and Staples Solutions’ side. In a short period of time, we delivered tangible results in the application and infrastructure area keeping in mind agile values and DevOps best practices. Apart from that, we all had fun" – says Dominika Sadkowska – Senior IT Project Manager at Staples Solutions.
What's more, running a PoC proved that it is possible to launch a unified and improved UI on the frontend without any changes in ERP integrations or impacting B2B and B2C business logic.
From a technological point of view, the Proof of Concept was fully successful. Everything thanks to the headless frontend, which gives business proof that it makes sense to invest in modern architecture.