The Legrand Product Configurator aims to revolutionise the customer experience by providing an intuitive, immersive platform that empowers users to personalise and configure bespoke solutions within the realm of lighting, automation and other home electrical infrastructures.
By combining a complex logical framework with user-driven customisation, the tool endeavors to simplify the selection process to a style-focused journey, whilst ensuring precision and usability.
There were numerous complexities we had to consider, such as ensuring a smooth user experience while providing flexibility in configuration and maintaining scalability as more ranges are introduced. Furthermore, the combination of B2B and B2C customer journeys made it tricky to match the demands of the entire user-base with one cohesive solution.
User Research: Having redesigned the primary Legrand website, we already had some groundwork established for user research. We extended existing personas (since the configurator users would be traffic redirected from that domain) and tailored them to the style-first configurator experience.
Competitor Analysis: Market analysis was comprised of two main sources of inspiration. Legrand France already had a configurator experience on their website, which had many opportunities for improvement in terms of the heuristic usability principles and general visual hierarchy. We also analysed similar applications from other industries, such as automotive configurators, which gave us insights into how they incrementally revealed information and options so as to not overwhelm the user with more than 7 options at any one time.
Information Architecture: An IA and sitemap was created, stemming from the primary website and establishing the configurator as its own domain, complete with a dashboard and account services (for instance, a 'my BOQs' section to instantly recall previously configured bills of quantity, making the re-ordering process a lot more concise for the B2B user base.) A workflow was also produced, which fed into the rest of the functional specification document. For this project, I worked with a business analyst to produce this.
Prototyping: The usual formula of rapid prototyping, low-fidelity through to high-fidelity wireframing was adhered to, this time, with 2 options designed side by side as per the client's request. For the final approved visual mockup, we ended up combining my wireframes for the configurator and dashboard with my partner's wireframes for the account services.
The difference between Legrand France's Switch Configurator and our Visual Mockup
The prototype I designed was approved for launch across 19 regional platforms for the company, and is currently in development.
The launch of the platform is expected later this year, with more product ranges expected to be worked into the system, including an AR experience and an AI-driven configurator, for which we are in the prototyping stage. A mobile-responsive design is also currently underway.
This project provided me a rare opportunity to take ownership of an entire module. I felt that I pushed the boundaries creatively whilst simplifying the user journeys and adding the error forgiveness that a configurator should have. This project was particularly challenging because of the sharp turnaround between briefing and delivery times; the threat of a commercial penalty if the prototypes were late convinced me to focus on optimising my workflow as much as possible. I tried to pick quality references that really encapsulated what I wanted to achieve, and I conducted a crazy 8 activity with a few colleagues to get onto designing those wireframes as soon as possible. On reflection I felt that I did well to tackle the complex logic and hundreds of scenarios, and I made sure not to compromise on the quality of my deliveries.
