How Hirmer modernized its Oxid webshop with a headless frontend
Hirmer, the Munich-based retailer for men’s fashion, wanted to migrate its online store to a more modern system. To minimize the risk, the developers docked a modern headless frontend onto an old Oxid backend. Although the project was complex, the conclusion of the project managers is, “We would do it again.”
Source: Dennis Diatel / Shutterstock.com
With its three brands Hirmer, Hirmer Large Sizes and Eckerle, the Munich-based family business Hirmer has been considered Germany’s top address for men’s fashion for three generations. At Hirmer’s flagship store in the middle of Munich’s pedestrian zone, everything revolves around men on 9,000 square meters and five floors – including wedding services, made-to-measure clothing and personal shopping. For men who need fashion in plus sizes, Hirmer operates 15 stores of the offshoot Hirmer Large Sizes. And men will also find a rich selection of business and casual menswear in premium quality at Eckerle’s nine stores.
Customers are used to first-class customer service from the Hirmer and Eckerle stores. This customer experience The retailer also wants to offer this customer experience in its online stores and has already developed a range of digital services for this purpose in the past. For example, customers who don’t have time for a stationary purchase at the moment can book a consultation with the sales staff on site via the Internet and thus have the latest collections presented to them. “The online store is an important channel for our regular customers to research. And for us, the store is an important sales channel that we naturally want to develop further,” says Michael Hobelsberger, Head of E-Commerce at Hirmer.
An outdated tech stack allows for little innovation
There was one hurdle, however. The tech stack on which the online stores Hirmer’s online shops were based on ran reliably and stably. But individual systems and especially the frontend were so inflexible that extensions and new features could only be programmed with great effort. “We had various challenges and our desired concept was originally to replace everything,” says Frederic Worm, Head of Shop Technology at Hirmer. “But if we had also replaced the store backend, we would have had a complete construction site from merchandise management to the front. The risk just seemed too high for us. That’s why we opted for a different approach.”
However, this one was no less courageous: With the support of its technology partners SHOPMACHER and Deutsche Daten Portal- und Plattformlösungen, Hirmer decided to keep its existing Oxid backend as a first step towards modernization and to replace the frontend with the Frontend-as-a-Service solution from Frontastic (now: “commercetools Frontend”) in Headless conversion. In addition, the developers implemented a modern PIM from ACL and a new order management solution from the company ACL. “We are not using the latest Oxid version, but an older version. There was definitely a certain risk that the project would fail,” Hobelsberger states.
Many front ends in one fell swoop and more flexibility for the marketing team
But the hoped-for benefits outweighed the fears. The Hirmer team was particularly convinced by the fact that the developers could use a headless solution to rebuild not only the front end for the store, but also other digital customer touchpoints. And that’s exactly what the menswear retailer plans to do: “A frontend for our loyalty card holders has to look and function differently than the store frontend, even if it’s built with the same technology and serves the same interfaces,” says Hobelsberger. And the e-commerce boss is also already thinking about app technology and PWAs.
Frederic Worm also hopes that the changeover will enable marketing to work in a more content-driven way in the future and to play content more flexibly: “One of the big problems with the existing solution, for example, was that the way page types are structured is very rigid. There’s the detail page, the category page, and the brand page. And on all of them, you’re fixed as to where content can be played,” describes the Head of Technology. With Frontastic, you can build landing pages in addition to the standard ones, where lists, for example, interact in a completely different way without requiring a lot of new development effort.
Project goal was not a ready-made online store, but competent in-house developers
Together with the agency partners SHOPMACHER and Deutsche Daten, the migration was planned in detail. An important goal of the project was also to support Hirmer’s internal developers in building up their own knowledge piece by piece so that they can continuously develop the online store in the future. Michael Hobelsberger does not take for granted that the cooperation between the three different project partners worked smoothly. “We had no specifications and took a very agile approach,” he says. “The fact that everyone worked together perfectly and didn’t blame each other, even though there was a lot of explosives in the project, really speaks highly of SHOPMACHER and Deutsche Daten.”
In fact, the whole project was much more complex in its dependencies than originally thought. “We all thoroughly miscalculated,” Worm and Hobelsberger openly admit. An example: The search solution Algolia can be easily connected with the control module of Frontastic, but only if Algolia is filled with the standard modules of commercetools. In Hirmer’s case, however, commercetools’ standard stack did not fit Hirmer’s data format requirements at all. So Frontastic’s standard solution was not applicable for the retailer at all. Instead, a complete module had to be developed to talk to Algolia in the way Hirmer’s data required.
A “flawless result” was worth all the effort
Nevertheless, Hobelsberger and Worm do not regret their decision. “The result is flawless and I would do it again,” they both say. One of the positive things that Hirmer’s digital staff found was that the user experience of the store improved almost by itself, even though there were no specific specifications originally. Here, too, the agency teams from SHOPMACHER and Deutsche Daten and Hirmer’s internal developers have put their heads together and reworked product lists and filters, for example. Based on the new PIM in combination with the headless frontend, online customers can now have their desired products filtered not only on the basis of color, brand, price or size, but also have numerous different criteria available depending on the product category, such as collar shape or number of buttons on the collar. “This would not have been so elegantly presentable in terms of usability and clarity without the new technology in the front end,” Worm is convinced.
Ultimately, the traditional Munich-based retailer also hopes to find suitable employees more quickly by switching to modern front-end technologies. “You can’t get developers anymore with the old monolithic technologies,” Worm said. “They can pick their jobs, after all.”
The first store with a new front end, Eckerle.de, is already online. Hirmer and Hirmer Large Sizes are to follow successively in February. For other retailers who are sitting on legacy systems and don’t want to replace them in one fell swoop, Hirmer can serve as a blueprint. Experience shows: It is possible to connect a modern frontend to an old backend. This is admittedly exhausting and sometimes more complex than expected. But it’s worth the effort.
Digitization in B2B is complex, but if you take a structured approach, you’ll get there. The experience of the e-commerce agency SHOPMACHER from numerous large and small B2B digitization projects shows: Many companies have similar problem areas – and the problem with digital transformation is not the digital.
There is a lot of talk right now about MACH, a software architecture that is microservice-based, API-first, cloud-native and headless – but for historical reasons there are hardly any consistent implementations. The e-commerce agency Shopmacher presents sport2000.de, one of the first major cases in the field.
After two years in which gamescom was held exclusively online, the world’s largest games event will become a hybrid event this year. Shopmacher is responsible for the further development of the digital customer experience on the “gamescom now” content hub.