Legrand - Smart Lights
Optimizing a global design system
Overview
Legrand is a leader in electrical and digital building infrastructures. The Legrand Smart Light Mobile App lets you control your lights and power from any smart device, anywhere. As Legrand updated their brand identity, the Smart Light App needed to adapt to accommodate the exciting new changes.
My Role
As a UX intern at Legrand, I was tasked with redesigning the Legrand Smart Lights Mobile app. In this role, I delivered high-fidelity prototypes and wireframes for a mobile application to improve site experience by employing iterative design processes, comprehensive user research, and extensive testing.
Highlights
Problem
“Are we using Roboto or Roboto Flex?”
Legrand’s original design system was static and decentralized. This rigid system made scaling design elements across different platforms and brands challenging. This led to inconsistent product design as designers struggled to locate necessary resources.
Solution
Harder, Better, Faster, Stronger
The solution was to create a token-based design system called Lumen in Figma that Legrand's global design teams would adopt. The phased approach began with integrating simple token elements like color and fonts. In later phases, we moved on to more complex integrations, like creating a Figma plugin for our icon library. This overhaul also allowed the design teams to update Legrand’s look and feel to be more modern and accessible.
Approach
advocate for adopting a new design system on a global scale?
I decided to use my Smart Lights redesign to showcase the effectiveness of Figma variables. Using variables, I went above and beyond my project requirements to create dynamic and high-fidelity prototypes. These prototypes showcased the ability to dynamically change between light/dark modes, languages, and font sizes.
Another improvement was reducing screens used to create complex interactions with conditional statements. These prototypes were presented to Legrand's leadership to demonstrate how leveraging these existing tools can create more product value for customers.
Design
Creating a system that can scale with the company
To avoid creating a design system that would end up like its predecessor, we engineered a system that could scale and adapt. The new system structure allowed designers to submit changes and request updates, which lead designers reviewed to ensure consistency. By giving all our designers a voice, we can leverage the full ability of our incredible teams.
Impact
Average production time of hi-fidelity prototypes decreased by 50%
After launching Lumen, the new design system, teams saw an overall increase in productivity. Deliverables became more consistent across products, helping to unify Legrand's design language and image. These results not only improved the design team's efficiency but also had a domino effect of positivity on adjacent teams like developers and industrial designers. The new system made it easier for adjacent teams to collaborate with UX design teams.
Reflection
Be the change you want to see
I learned not to let my position dictate my level of influence in a company. As a UX intern advocating for change, it was inspiring to see my efforts have a significant global impact.
Measure twice and cut once
When creating a global system, I learned it's easier to do it right the first time. You can drastically reduce the number of corrections you need to make in the future by being organized, deliberate, and patient.