Clipsal offers a selection and design service to homeowners and home builders for their electrical, lighting and smart home needs. Underpinning this service is the Clipspec Electrical Design Application, which consultants use to create plans for their customers.
The challenge
Clipsal by Schneider Electric has been a leader in electrics and lighting in Australia for over 100 years. The company’s Clipspec product is a critical business application that enables Clipsal consultants and builders to help customers define their electrical, lighting and smart home needs for new build homes and renovations.
Clipspec was launched nearly a decade ago as a desktop app and, while it had seen minor upgrades along the way, the existing app had become dated and was difficult to operate efficiently. The time had come to give the app a major overhaul and bring it into line with Clipsal and Schneider Electric’s position as innovators in the electrical and lighting industry.
Our approach
At the outset of the project, we undertook a deep immersion process to fully understand how Clipspec was being used. We ran workshops with the Clipsal team to uncover the pain points of the existing app and their vision for the future. We also sat in on live consultations to get a feel for how the app worked in practice and what sort of tools the consultants were using in collaboration with the app. We even put ourselves in the shoes of the customer, attending a Clipsal Electrical Design consultation to experience the product from the customer’s point of view.
Everyone in the Luminary team, from the producer to quality analysts, played a part in the immersion process to gain a thorough understanding of the app. In addition to conducting an in-depth investigation of the existing app, we explored competitor and comparator applications, including modern design products like Figma and Sketch.
Quick stats
The solution
The project was delivered using the Scrum methodology, with a high level of collaboration between the Luminary and Clipsal teams. A program of regular testing and refining from an early stage ensured that the solution met and ultimately exceeded the expectations of all key stakeholders.
A cloud-based application
Through the discovery process, it became clear that the app needed to move from being a desktop app to a cloud-based experience. As a desktop app, it could only run on Windows and the user had to have a very powerful PC to run it. Every piece of information in the database had to be downloaded locally, which was causing significant performance issues and projects were unable to be easily shared across different devices.
The app now runs on any internet-enabled device, it’s far more efficient, and projects can be accessed from anywhere. From Clipsal’s point of view, the product is also much easier to update.
Browser optimisation
As well as working across all modern web browsers, the new Clipspec app has been optimised for use on desktop monitors right up to industrial sized showroom televisions.
Improved consultation experience and performance
Significant design and user experience updates have vastly improved usability of the app for consultants and builders.
New and improved design tools
Common, best practice user interface patterns have been used where possible to reduce the learning curve for new users, while tools and options are only presented when they are relevant to the task at hand – keeping the interface out of the way until it’s required. A floating toolbar keeps the most frequently used tools at the user’s fingertips, and intelligent notifications provide an alert when an action is performed that may impact other areas of a plan.
Product search and filtering
The new app offers far more options for filtering products. The user can even create their own custom categories. Azure Cognitive Search has also been integrated with the app to leverage features such as prefix and suffix searching and typo tolerance.
Auto save functionality
One of the challenges of the old desktop app was that it could take several minutes to save the project, and if the app crashed, all the changes made since the last save would be lost. With the new web-based app, changes are automatically saved in real time.
Self-management of products, pricing and users
Whereas the old app left building companies heavily reliant on Clipsal to make changes to their products, the new app puts control back into the hands of the builders.
Builders have full control over products and pricing
Previously, if a building company wanted to change pricing or other details about their products in the app, they would have to go through Clipsal, with changes being managed manually via a spreadsheet. The new version represents a significant move towards self-sufficiency, with a multi-tenant platform that enables builders to make their own changes to their products.
Builders manage own staff access
Builders are now also able to manage user roles and permissions, controlling which members of their staff can access different areas and functions of the app.
Builders can schedule consultations
Another aspect of the app that builders can now self-manage is consultation bookings. Previously, appointments conducted by builders were typically managed manually by Clipsal. Now, thanks to an integration with Microsoft Bookings, builders can manage bookings themselves, which has greatly streamlined the process and eliminated double handling.
Technology
The development of the new app was a completely custom development within Microsoft Azure. There was no CMS – everything was built from scratch. The app was built using .NET Core, with Entity Framework Core being used to manage database operations and migrations, and IDMS to deal with user identification and authorisation.
The key Azure services utilised included Azure Cosmos Database, Azure Cognitive Search, Azure Functions, and Azure Cache for Redis.
Azure Cosmos Database was used for the product drag and drop functionality in the app’s editing mode. This allowed for the storage of high volume data with minimal impact on the app’s performance.
Azure Cognitive Search was used to facilitate fast and flexible search capabilities, enabling users to quickly search for products and drag them onto their floor plan.
Azure Functions was used for scheduled tasks such as product imports, image processing, rebuilding the search index, and report generation. Azure Functions plays a critical role in facilitating more efficient development and maintenance of the app.
Azure Cache for Redis has been leveraged for all the app’s caching needs, to provide faster load times for users.
From a front end perspective, the app was written in React, using Typescript. For the app's Project Edit Mode, HTML5 Canvas API was used for rendering SVG elements such as lines, text, iconography and the linking of products. While the design tools in the old desktop app were based on AutoCAD, the tools in the new web app were entirely custom built to accommodate all of the app's specific needs and user feedback.
Cypress and Puppeteer were also used to facilitate a comprehensive automated regression testing suite which enabled effective testing of the different features within the app. This approach minimised the margin for error, while enabling the team to make changes quickly and efficiently.
Outcome
The new Clipspec app has been extremely well received by consultants, builders and customers alike. It delivers a best-in-class web-based experience, with key benefits being a vastly improved user experience for consultants and customers, improved self-sufficiency and control for builders, and far greater ease of development and maintenance for Clipsal.
The app can now run on any internet-enabled device, projects can be accessed from anywhere with all progress being saved in the cloud, and reduced tech spec requirements make it far more widely accessible.
Since the app’s launch, Clipsal has seen an uplift of nearly 20 percent of sales going through the tool. Finally having the ability to easily update the app has also been a highlight for the Clipsal team.
“Tweaks and refinements are now much easier to make,” says Sam Youssif, Director – Digital Customer Experience. “They just get done. It’s no longer ‘maybe can we do this’, they're just prioritised, put in the backlog, and then they happen. This is important because we need to be continuously improving. What worked for yesterday will not work for tomorrow.”
This was a very structured, disciplined project. At the start it seemed like an impossible task but Luminary maintained composure and stayed true to how you go about business, even in times of strain [due to pandemic lockdowns]. Luminary kept their eyes on the end goal throughout the project and kept us in check on how to get there. Many of the big new feature items that we used to dream about are no longer a dream. We’re finally able to implement them. We’re done dreaming – now it’s time to do!
Keep reading
Want more? Here are some other examples of our work that you might be interested in.
