Clipsal Virtual Smart Home
With the retail experience increasingly transcending the showroom environment, Clipsal by Schneider Electric was looking for a way to demonstrate the value of its new Wiser Smart Home product range to customers through 3D visualisation.
Clipsal’s new Wiser smart home product range is a scalable, automated smart home solution that lets the user control almost anything in a home with a smartphone or voice assistant.
From opening blinds and closing blinds, to adjusting air-conditioning, dimming lights, or turning appliances on or off, the Wiser range allows the user to adjust their environment to suit their needs. It can also provide warnings for abnormal situations, such as when motion is detected inside a house, or when there is water leakage, or high levels of heat or humidity.
Wiser also allows the user to program combinations of settings, based around the smart home products they have in their home. These combinations of settings are referred to as ‘Moments’. So, for example, a ‘Movie Time’ Moment might be set to lower the lighting in the living room, close the blinds and turn the home entertainment system on.
In the past, Clipsal would have relied predominantly on its physical showrooms to demonstrate a new product range. However, with many of its customers affected by pandemic-related lockdowns at the time of the launch of the Wiser range, and with a general shift towards the convenience of online shopping, the company wanted to enable its customers to experience the range in a virtual setting.
What we did
The Clipsal team had already decided that it wanted to provide customers with a virtual smart home tour to showcase the Wiser range.
To realise this vision, it enlisted the help of Luminary and a 3D visualisation studio called Plattar. While Plattar was tasked with bringing the 3D animation of the Virtual Smart Home to life, Luminary was responsible for creating the user interface (UI) around the experience and integrating it with product information from the Clipsal website.
While there is an extensive range of Moments that can be programmed using the Wiser app, the Virtual Smart Home showcases six examples: Dinner Time, Movie Time, Cooking Time, Bedtime, Holiday Mode, and Away From Home. To experience each of these Moments, the user simply clicks on an icon that opens up that experience.
At the completion of each animated Moment, the user is presented with the Wiser products needed to create the Moment. In each room, there are also Product Hotspots, where the user can click to open a product detail screen to find out more and add products to their Favourites list. They can also send the list to themselves and others, such as an electrician or builder.
Throughout the virtual tour, the experience seamlessly transitions between the animation layer into the UI layer. Features contained within the UI layer include Product Hotspots, Favourites, Find a Wiser Stockist/Installer, a ‘How to’ guide for navigating around the Virtual Smart Home, and a comprehensive downloadable product brochure.
One of the challenges of creating such a feature-rich 3D animated experience is that it can be quite demanding on the device being used to operate it. In order to ensure that it didn’t cause older mobile devices to crash, lazy loading was introduced for JS modules. This means that only the scripts required for each particular page would be loaded at any one time. This reduced browser UI memory usage by around 35 percent, bringing the main script size down by roughly 75 percent and resulting in much faster load speeds and user interaction – not just for the Virtual Smart Home but across the entire Clipsal website.
The Wiser Virtual Smart Home is a groundbreaking product that required Clipsal, Plattar and Luminary to navigate largely uncharted technical terrain. As such, it necessitated a highly collaborative approach, with daily standup meetings and frequent communication and iteration. The result was a virtual experience that has set new industry standards and laid the foundation for an immersive and engaging platform to launch future Clipsal product ranges.
Luminary’s skills base and strong collaborative spirit was the backbone to the success of this project. Exploring cutting edge technology with multiple vendors within an incredibly tight timeline was extremely challenging; but Luminary was up to that challenge. Many lessons were learned on both sides on the fence making the continued journey within the 3D/AR space much easier to navigate. Kudos to the team who helped bring this amazing Wiser virtual smart home project to fruition.
Want more? Here are some other examples of our work that you might be interested in.