From a stationery offline business to a current web stack

How do you get a stationary offline business with a focus on and processes from sales into a current web stack?

Not today, but tomorrow… and with a lot of convincing!

We’ve all been there – you tell your brother or aunt all about your latest state-of-the-art website, and all you get in return is a polite smile that does little to disguise their lack of understanding. And when your achievement is not a website that ‘only’ displays the efforts of a hobby photographer but is instead an online shop with 19 different versions that are available in eleven countries, this meek smile hurts even more! Responsive design, mobile first, progressive enhancement, SPA, React, Webpack, component-based development, SSR... yep, we have a language of our own.

Proof of concept

At the end of 2017, a few developers from the XXXLdigital unit got together to show our huge mothership in which direction it must sail to be part of the future. After a short but intense period of research, we opted for React over Angular. Of course, many of the assumptions we made were based on personal experiences. When we made this decision, React was an up-and-coming star, hot on the heels of Angular. But the trend was easy to recognise, so we went for React! We requested two Sprints (= four weeks) to implement a POC and we got it! It seems that the necessity of our vision reached the most important decision-makers and convinced them.

The Arc of Suspense

The go-ahead came in February 2018. As an online shop generates important turnover, it was clear that such business-critical changes had to be field-tested first. Here, we benefited from the fact that, in addition to real online shops, the company had ‘product demos’. Just like in an online catalogue, it was possible to browse the company’s product range online but not make purchases. As a result, www.xxxlutz.se became our playground.

Many things then had to happen at the same time. We had to:

• create a new design that satisfied the latest standards (responsive design, mobile first, etc.)

• derive a new design system from the design and create a style guide (Hydra)

• give the ‘new’ frontend a name (Poseidon)

• build the frontend stack (React, Jest, Cypress, etc.)

• establish a cloud-based infrastructure with Pipeline and Deployment

• write SSR, BFF and many other microservices

Mid-Season Finale

In October 2018, we were done, and the new product demo went online! It was a complete success. However, we then had to get almost all of the other teams of the e-Commerce department onboard. We coordinated training sessions and workshops to make sure everyone was up to speed and to achieve the next goal: It must be possible to order the products online so that we can bring the other 18 online shops and product demos to the new stack as quickly as possible.

Cliff Hanger (Outlook)

If you want to know what happened next in 2019 and where we want to go in 2020, make sure you don’t miss our next blog post!

Needless to say, the race is far from over. On the contrary – the development of new microservices and frontend features, the expansion of scalable infrastructure with Kubernetes and Kyma, test automation with Jest and GUI tests, marketing features and A/B testing, SEO, and performance improvements simply never end!

We Want You

We are currently looking for Developers, Product Owners, Cloud Engineers and DevOps Engineers who would like to accompany and support us on this journey into the future.

Author: Michael Huber, Teamlead E-com Development