Zadig&Voltaire is not only top fashion. It's a top-notch eCommerce site too. The architecture they went for is headless, based on a Vue Storefront front-end and Magento back-end. Jonathan tells us his story of digital transformation in all the details. The obstacles they had with the Node.js at scale, production deployments and convincing business that the move towards Headless/PWA is the right decission!
Piotr Karwatka: I'm really excited to present my next guest, Jonathan Ribas, CTO of the famous French fashion brand Zadig and Voltaire. Hello, Jonathan. It's really good to have you here. Thanks for accepting my invitation.
Jonathan Ribas: Hello, I'm very pleased to be here also, to speak about this great topic with you.
PK: First, tell us something about your experience.
JR: I have been working in the digital area for more than 10 years, and have acted as adeveloper, a lead developer CTO, a CEO also when I was living in Brazil, when I moved back over there in 2009. It's where I learned about Magento. All the story started at this point and it's where I fell in love with e-commerce. I decided to focus my career in this very interesting area with a lot of challenges.
PK: Wow. That's, that's pretty amazing. So, you came from Brazil to Europe, started with Magento. How did you find it? Unexpectedly at the steering wheel?
JR: Yeah. So it all, it happened after, several experiences in e-commerce retail and especially in luxury. Once I started, I worked, as a solution architect, on an awesome international, brand, which is called LMS. It's a French brand. I was part of eight architects and, almost 80, developers. We were a very huge team. So for an organization like this, we were separated. So we had like a catalog team, a customer and conversion team. And other ones also. And then I had the opportunity to join Voltaire, I think I was ready to take the challenge, to build a new architecture for the next five years, and a business plan.
PK: Oh, that's awesome. working with the 80 developers surely makes you ready.
JR: Yeah, but it was a very cool. And I was moving to Paris and the team was very friendly. It was an awesome experience.
PK: How do you make 80 people working, on, like in the same area, probably different projects, but how you make them effective? It's really challenging, right?
JR: Yeah. It is. That's why we separated them in, I think eight teams, at that moment. And we were like moving developers between teams. For them to see the wall architecture that was very complex also, with a headless approach too. With APIs everywhere and a lot of Java also on the backgrounds for the catalog integration to a team and then team to Magento though to the front end. Yeah, it was quite a complex one. It was a couple of years ago. That was a very good to experience.
PK: Let's go back to projects. I remember we first met on the kind of call, Hangouts or something around 2018. What was the challenge you faced back then?
JR: I perfectly remember this call, as it was yesterday. I had a lot of challenges to be honest on this project. First of all, I had to convince the team, the digital team and the top management, for an agile way to deal with projects. And it was not the case before I arrived. They used to work with waterfall right before. Because a lot of priorities changed. so that's why they were used to work like this. I will be honest today. It happens that sometimes we change priorities during the sprint.
It's not a good way to do it, but business first, so we need to do it. And for the challenges and also showing some first results, we've a POC on the Vue Storefront that we will talk about later, choosing a partner to deal with the replatforming and also the hosting part. Choosing a rollout strategy, which is very important for our business and also giving priority on features, that we saw. It wasn't possible to do them, for the launch, for the MVP, on the initial scope, you know, so we needed to discuss about this with the team. A lot of times. And other two big challenges was the first launch on PWA. We've mentioned the two for our first country and the first, peak access we got, from newsletters.
PK: You meanthe high traffic high loads coming from newsletters and stuff like this?
JR: Yeah. And we also did a TV, approach a couple of weeks back. So yeah, it was quite challenging.
PK: Awesome.Y ou are a global brand, so I guess the whole project of unifying the front end was somehow related to your rollout strategies?
JR: Yeah, exactly. you know, we are, an international brand, Europe, USA, Middle East, Australia. So all over the world. I will say, our idea was to have the same front-end to serve all our countries and also empower all our local teams withthe same tools, just to facilitate the communication and the skills learning between, all our teams. So to make it also probably more reusable right. In between the markets.
PK: Yes.Also, and also the part of the costs, for sure, because, doing specific for every country, can cost you a lot of money. So business wise, what are the most important, I would say non-technical aspects of implementing theglobal rollout strategy?
JR: Yeah, we couldn't risk, our business, doing a big bangeffect, changing all our countries, at the same time. That's why we decided to do a progressive rollout. taking care of the SEO, which is very important for us. So how are you big first market to apply the new architecture on? So we decided to launch one of our smallest markets in Europe, for, the first launch we choose a new country. That we were addressing, before in specific websites, we choose Portugal. We also needed a small country in terms of business, you know, because we will need to maintain two platforms, at the same time, the whole management of one and the new architecture. And we have a small team, you know, so we can't, have the two ones running on the biggest countries at the same time.
PK: You said that open source also headless architecture itself was one of the key decision points. They always need to bring some business value right? There's this architecture and what does headless mean for you? What's the most important feature of implementing headless architecture?
JR: It's a ifficult question. Really? I will say performance. As you know, we want to create the best user experience for our new visitors and also our customers. The page. Speed is very important. We still have room for improvement on it. But weare very happy with the first results.
PK: So let mego back to this proof of concept a year because I guess it could be interesting for some of our listeners. So I remember we did the workshops and then thisproof of concept, organizational agenda one within just a few weeks.
JR: I don’t rememberhow long it took. It was four or six weeks. And I remember that the goal was toshowcase the PWA features.
PK: So, fromyour perspective, how does proof of concept have you, pushing this, this wholeproject, within, within the organization?
JR: So in avery short period of time, like less than a one month, we were able to integrate our current design, for the home page, the PLP and the PDP. So it was quite impressive. And all the native, features were working for. So it was a very interesting, and we saw that it wasn't stable, you know, we didn't teste everything like scaling it and things like this. But locally, it was working very fast. I did some demos for our team and the top management. they were very impressed and they couldn't wait to see the roll-outs happening. So it's where it all started. Let's say for this, PWI projects.
PK: Awesome. Ican imagine the demo, you were really stressed to show them the results, right?
JR: Yeah. It was like, I hope it's gonna run at that time, but no, I had tested quite a few times before and everything was working. Perfect. So no problem. I was not so stressed.
PK: Good to hear that. So in the end, you are on Magento 2 right now. My question is if you consider another platform than Magento 2 for migration? This is pretty often a case for, for sites right now that they are figuring out, what, what platform to choose.
JR: We were moving from Magento 1 to Magento 2 when I arrived to Voltaire. So it was quite obvious, you know, that Magento 2 was here to stay. If this migration was not in progress, I would for sure took a look at other platforms to make an architecture study on it. In the end, we was MTU for merchandising and taking orders. You know, we are not using it for the CMS bar and the other fundamental applications. So. Yeah, maybe we would have took a look at another platforms for sure.
PK: Sure. So the next question is about the process of getting from Magento 1 to Magento 2. The migration is something a lot of people are scared about. How does this process look like?
JR: The process started, for the US a team. Actually, they did a totally new project, from scratch. We just took the most important features for an MPP. And it was not an easy process because, sometimes, it happens in the middle of the road. You find that you forgot something, very important, you know, and then you have to decide and prioritize and maybe implemented instead of. Another feature, just to keep the deadlines. we have very, hard times. Our team knows about this. Alot of discussions about this happened in the past, right?
PK: It wasn't easy, but you succeeded. That's the most important thing. How long didit take you to implement the first store?
JR: It took seven months, intensive and hard work. With a team of almost six developers.Let's say we have some developers for the front end parts. And, also the back end of course, in order to implement everything. And we also built, and the in-house orchestrator to communicate between and our IT application. So it was thre eapplications at the same time. That's why, it was seven months of hard work.
PK: This orchestrator, you mean, I kind of need a wire for integrating the systems.
JR: Exactly. For example, we take, all the Magento 2 orders. That's approved in our PSP. And then we create like a file for our it team to take those files and send them toour warehouse for the picking and stuff. And then when the picking is done, okay, they send us, what we call the ship confirm. And then, we have thecapture, done by this orchestrator on the MQ and also the shipments.
PK: Okay, so it's fully automated.
JR: Yes. It's fully automated.
PK: Other than that, what was the other biggest challenge in implementing this firststore you encountered?
JR: So thefirst one, maybe simple, you know, but integrating our catalog from the team.TwoMQ and then in an elastic search and then the VSF to take the data from elasticsearch. This was not an easy one. We had a lot of trouble with the differentkind of attributes, you know, the multiple select attributes and stuff likethis. It was not very easy to do. That's why I planned like a sprint zero. Let'ssay to start this integration at that time. So in the first sprint we werealready working on the catalog integration. Because I knew. I knew it will takeseveral months. And the second one, was hosting PWI. This one was I think myworst nightmare on these projects, to be honest.
Yeah. I was not used to Node.js. I never run an application on Node.js before. So. I had no expertise on this. I was thinking it was easy, you know, like, hosting a PHP application. But you needed to have a totally different approach. Like for microservices, you know, like maybe you need to have some kind of containers just for serving the catalog and then maybe other ones for communicating with Magento 2. You don't have to have a lot of background processes running, because, Node.js. So that's why it was complicated for us. We were not understanding why it was not as fast as we were thinking it should be, you know? So it was a lot of conversations with you, but we will speak about this later.
PK: Yes. I have a special question on, scalability later on, because I, I knew that that was an interesting point with this project. But before we get into this aspect,I have a few more questions about the rollout rolling out process. You have more than 10 sites up and running for different markets ready. So if I ask you, what are the key aspects of rolling the next doors? So in the other words, what changes and what stays the same?
JR: Yeah, so he, the biggest challenge was the business window to launch new websites that are very short. As retailers, we have a lot of key moments during the year where we can’t risk any business. So the idea was doing a release with some new features for the next countries to roll out, just to have something new, you know, between this time, because sometimes we had the very, short period, youknow, where we can launch, like we have, maybe one month. So yeah. We need tobe ready for this and between them. We also have a lot of testing and bug fixing between each release is like, I think we are deploying, more than once perweek.
PK: Wow. That's awesome. Sounds pretty aggressive. The timeframes you're given. Somaybe, you already answered to this question saying like one a month, but thequestion was how long does it take to introduce a PWA into new market. Because Isaw some releases even in a two weeks span. So even shorter than you saidbefore.
JR: Yeah. After launching, all the main countries, now it's way faster to implement a newone. But just if we are using an existing language. If we are using the same shipping method and the payment methods also, right. I would say less than amonth, including all the testing parts, in all our browsers, we have the mostaccess, yeah.