Switching to a new platform can be very exciting for a company. HelloTV had grown up with its webshop on the CMS platform osCommerce, but the limits of the system came into view - were often already stretched. To advance into the future, moving to Magento was the most logical step. But how do you do that carefully, while maintaining identity and making maximum use of the opportunities that such a migration offers? That's what this case is about.
HelloTV goes back 50 years as a specialist in the field of audiovisual electronics, including the last 13 years with a webshop. The company also has 11 physical stores, beautiful showrooms where experience, expertise and personal contact set the mood. The organization strongly believes in the combination between online and offline. Many customers orientate themselves in the webshop, where in many cases a personal line is already being drawn. The final choice is often made in stores: you want to see televisions first, you must have heard that thick sound bar pump live. HelloTV understands the ins and outs of its market like few others and is among the top 3 in the Netherlands.
Thirteen years ago, HelloTV launched its webshop. The shop was built in osCommerce and HelloTV is the type of retailer that doesn't sit back. With continued ambition and a great sense of marketing, we continuously tweaked and added. Seldom were osCommerce's capabilities better used than HelloTV, but osCommerce also has its limits and the realization that the situation was not future-proof began to dawn more and more.
To build the new shop, HelloTV comes to renowned Magento builder Emico. With the primary design & CX challenge, the management ends up at Yellowgrape. In this process, HelloTV deliberately opted for two specialized agencies. The years of cooperation between Yellowgrape and Emico have been very important in this regard.
A switch to Magento is obvious, but the question is also exciting. HelloTV has built an online empire with a unique identity and a lot of traffic. Not something to just mess around - a child, too, the shop was raised with love. The caution is justified: innovation must always take place within the limits of history and identity.
The migration to Magento is not copying. It is an excellent opportunity to look at both the functional layout and the design of the shop. Magento is also a platform with far more options than osCommerce.
In fact, you are going to work with endless choices and buttons. You shouldn't want to approach that on a good note, which sometimes happens. Yellowgrape is exactly on the other end of the spectrum: we fundamentally fall back on a systematic approach, where data and test protocols are leading as much as possible. Things only get a place if we can make sure that they contribute to the shop's performance as much as possible.
Together with HelloTV, we decide on a very controlled and planned phasing:
1. Rigging the wireframe
2. Design
3. Going live with split testing
Below, we describe the three phases and highlight a number of high-profile new features. For an efficient process and new functions, it is important that design and technology fit together seamlessly. During the process, Emico developers and Yellowgrape designers have therefore continuously sought cooperation.
“Design thinking is the fuel your redesign needs to go from good to great. It's the secret ingredient that can transform your designs.”
Phase 1: Wireframe
In this phase, we design the new shop on a purely functional level. In fact, it is the blueprint of the ultimate customer journey. A customer comes to a site and then what? How are the steps going? How does someone buy something? In doing so, we work very closely with the client. After all, no one knows better how people buy televisions than the experts at HelloTV. HelloTV also has a unique style and approach in selling its products. This should also be reflected in the structure of the new shop.
In the wireframe phase, the core functionalities of the shop are therefore created. This is immediately an excellent opportunity to test them. We submit prototypes to user panels, together with our partner UseSense. We also keep Emico running when testing. Together, we validate which functional choices do and don't work best. Useful to know before you set up the frame with a design layer.
FFull speed ahead with a fast PWA: do believe the hype!
On Emico's recommendation, HelloTV chose a Progressive Web App based on Magento 2. You can see a PWA as a website that acts like an app. An important advantage is performance, because the first visit immediately loads everything in the background. That clicks through very quickly — good for conversion — and with Google, with a PWA, you immediately have a big advantage. In addition, PWAs offer a variety of unique creative and interactive options. At Yellowgrape, we are now well versed in PWAs and we can say: DO believe the hype!
Phase 2: Design
The wireframe is like a shop without colors, styles and other triggers. Only fill in that layer with the design. Care was also required here. HelloTV's existing shop was quirky and familiar territory for many loyal customers. We analyzed in detail what the unique and strong points were. This was the starting point for new design choices. Of course, we won't implement anything in terms of design without testing it with user panels. Ideally, the CRO is pretty darn sharp before we even launch.
Better connection with the showrooms
An important aspect of both wireframe and design was the connection to HelloTV's 11 showrooms. The special ambiance of the showrooms did not stand out well within the old webshop. We've brought the new shop much more in line with the style of the showrooms. There is also now a much better link with the stores. Current stocks, the options to make an appointment, a look into the store itself — the webshop invites you to go to the showroom in many places.
Phase 3: Split Testing
Wireframe and design may have been sadly tested and created with the utmost care: going live remains exciting, especially with a complete migration. Yellowgrape swears by split testing. This means that after launch, you first send only 10 percent of the traffic to the new platform and gradually increase it. In the process, you check if everything is going well and you measure everything.
An additional advantage is that you can immediately see how the new platform performs compared to the old one. Ultimately, this is the ultimate reassurance for the client: if you see that the conversion is much higher at launch, worries have usually flown quickly. In the case of HelloTV, the profit was immediately substantial and tangible. We wouldn't have wanted to see it any other way.
With the move from osCommerce to Magento, there was a lot of room for new features. We would like to highlight a few of them.
Feature: digital compare module
One of the most important functions of the shop is orientation. In order to facilitate this process in the best possible way, we offer the possibility to compare selected products at any point in the journey. You will then get a clear matrix with all properties. As icing on the cake, we've built in the option that you can only see the differences with one click.
Feature: sticky cart on the PDP
In the context of orientation, a quick insight into the specs is also very important. When testing the wireframe, we saw the best performance with a two-column layout on the product page. For each product, the most important properties and the buy button are in a handy overview that scroll along with you. This way, you always keep an overview and the choice to buy is immediately under your hand.
Feature: conversion maximization in the checkout
It's often small things that make a big difference in conversion and nowhere do you find more opportunities — and threats — in this area than in the checkout. Of course, we take our experience with us, but no shop is the same and we leave nothing to chance. The checkout in that new HelloTV shop has been tested and tweaked down to the detail level. In addition, we have provided the checkout with all possible elements that contribute to maximum conversion, such as automatic data filling, smart delivery options, confirmations and a very logical flow. In the process, we saw the conversion increase slightly each time. Add it all up and the profit is formidable.
Quite a case study, for sure, and then we can tell you a lot more about it. Most important takeaway: it's exciting to migrate an existing, well-running shop and give it a future-proof new look. This requires care. This requires an approach that is characterized by controlled steps and rücksichtless testing. This also requires good conversations about history, identity - connecting roots with new roots.
We succeeded in that beautifully with this case. And of course, that substantial conversion boost is also worth something. After all, you have to earn us back, and preferably a little bit fast. Great that you took the trouble to read all the way to the end, you are a real pro! Questions, comments? We'd love to hear from you.
