← Case studies page
In production and in use
Impact
Launched a 0-1 design system that is now adopted by 14+ projects
Increased Design System usage by 361%
Scored a NPS score off 86
Most of the content in this case study is subject to a Non-Disclosure Agreement. The details provided in this case study are a high-level overview and do not contain all the specific details of the project.
As an Engineer,
When I'm working on a new feature,
I want to quickly implement common Lutron UI components without building them from scratch.
Because it saves me time and reduces the risk of UX inconsistencies.
But today, I often have to wait for design specs or cobble together components, leading to delays and potential mismatches.
Lutron's products suffer from UX inconsistency due to multiple teams creating unique UI elements from scratch. This redundancy wastes development and design resources and confuses users with different product interaction styles.
This inconsistency weakens the brand.
To illustrate, imagine a user encountering a different behavior for a UI element for different interfaces.
Lutron had inconsistency in its design language and patterns that was leading to several negative consequences:
User Confusion: Users encountering different UI styles across Lutron products may become confused and frustrated as they navigate and interact with the system.
Inconsistent Properties: The previously designed UI elements were not customizable and were only used for the specific instance.
Inefficient Development: Redundant development efforts waste valuable engineering and design resources.
Brand Dilution: An inconsistent user experience weakens the overall brand image of Lutron.
To build a successful design system, it's essential to involve various stakeholders to make sure that we are all on the same page about the needs of the Design system.
Here's a breakdown of the roles of the key stakeholders:
Designers:
Responsible for creating the visual elements, interactions, and user flows of the design system.
Developers:
Implement the design system components into the codebase, ensuring consistency and efficiency.
Content Strategists:
Develop content guidelines and ensure that content aligns with the design system's principles.
End Users:
The people who will interact with the products built using the design system. Their feedback is crucial for ensuring that the design system meets their needs and expectations.
Product Managers:
Provide the strategic direction for the design system, ensuring it aligns with business goals and user needs.
Stakeholders:
Individuals or groups with a vested interest in the success of the design system, such as executives, investors, or partners.
UX Researchers:
Conduct research to understand user needs, behaviors, and pain points, informing the design system's decisions.
Accessibility Specialists:
Ensure that the design system is accessible to users with disabilities, adhering to accessibility guidelines.
To establish a robust foundation for our design system, we embarked on a comprehensive analysis of existing design systems across various industries and organizations.
This exploration allowed us to identify key components, design patterns, and best practices that have proven successful in other contexts.
Studying these design systems, we gained valuable insights into the challenges and opportunities of building a scalable and maintainable design system.
This research phase was crucial in informing our decision-making process as we defined the scope and objectives of our own system.
The main objectives of the audit for our current designs and UI screens across all products were to:
To accelerate development and maintain consistency, we selected Mantine UI as the foundation for our design system.
This React component library provided a solid base of pre-built, customizable components, allowing our team to focus on creating unique design elements and tailoring the system to our specific brand identity.
By leveraging Mantine's capabilities, we were able to streamline the design and development process while ensuring a high-quality user experience.
We have been growing our design system on the following swimlanes.
Embed components and guidlelines into designers and developers workflow
Documentation on who can change it, how and ensure consistency across different teams.
Ensure top-notch, consistent, and accessible components that boost product excellence.
Ultimate impact, guiding decisions towards a cohesive user experience
Crafting easy-to-use components with necessary properties.
We embarked on building a scalable component library using Atomic Design principles.
Working closely with developers, we aligned naming conventions and component organization to ensure seamless integration between the Design System and Storybook.
This collaborative approach streamlined the development process.
We meticulously crafted a comprehensive design language from the ground up, ensuring it is not only visually appealing but also highly accessible, scalable, and responsive.
Our design system includes -
Robust palette of accessible colors
Consistent typography hierarchy
Flexible grids
Subtle shadows
Personalized icon pack
Smooth motion transitions
These elements work together to help create a cohesive and user-friendly experience across all UI screens and devices.
Our design system was carefully structured to include components, patterns, and component groups.
By distinguishing between these three levels, we created a flexible and scalable design system that promotes consistency and accelerates development efforts.
Components serve as the fundamental building blocks, representing individual UI elements like buttons, inputs, and icons.
Patterns are combinations of components that form recurring design solutions, such as a navigation menu or a product card. This hierarchical structure enhances organization and reusability.
Component groups are collections of related components and patterns, providing a higher level of abstraction and facilitating efficient component management.
We adopted design token names from Mantine UI to ensure a consistent and cohesive design language across our project. This was a practical choice given that Mantine UI was our core technology stack, allowing for seamless integration and alignment between design and development.
Even though our design system was initially conceived for desktop applications, we've proactively designed it to be fully responsive, anticipating its future use in web applications. This forward-thinking approach ensures a seamless and consistent user experience across various devices, from large desktops to small mobile screens.
A voice and tone document is essential for creating a consistent and effective brand identity.
It outlines the desired personality, style, and language that should be used across all communication channels. This ensures that all content aligns with the brand's values and resonates with the target audience, leading to a more engaging and memorable experience.
Crafted a checklist to ensure that all new components prioritize UX by focusing on problem-solving, clear functionality, intuitive interaction, visual consistency with the design system, accessibility, responsiveness, and providing users with clear feedback throughout their interaction.
Ensure a consistent user experience by reviewing your design against this checklist before publishing.
To streamline our design process and ensure consistency across our digital products, we've meticulously crafted a comprehensive chart that outlines the workflow for adding new components to our design system.
This visual tool serves as a guideline for designers, developers, and stakeholders, providing a clear pathway from component ideation to final implementation.
By visualizing the entire process, we aim to enhance collaboration, reduce friction, and ultimately accelerate the development of high-quality user experiences.
We analyzed the data from the Zeroheight survey to evaluate the strengths and weaknesses of our design system relative to other competing systems.
By comparing various factors such as contribution model, accessibility, and version control, we gained valuable insights into areas where our system excels and where improvements can be made to enhance its effectiveness and user experience.
We conducted a survey with the users of the design system to gather qualitative feedback on what they thought of the design system.
We heard from the users that the design system was easy to use, and they liked how the code component was easy to access and make it their own
The users found it difficult to determine if the components used are the latest version.
We scored an NPS of 86.
Note:
NPS > 0 is Good
NPS > 20 is Great
NPS > 50 is Amazing
NPS > 80 is Excellent
We have analyzed the analytics of the Figma file to better understand where and how the instances are being used.
We also aimed to understand if there are any components being detached because they are difficult to work with.
In a span of 3 months, the design system usage increased by 361%
Lack of Alignment and Buy-in from stakeholder was a challenge.
Establishing clear guidelines and standards can be difficult, especially since we building the components from scratch.
Implementing a robust version control systemto track changes and prevent conflicts between the Figma file and on Storybook was difficult.
It was challenging to monitor the governance of the design system to ensure that the appropriate members contributed to the system.
Want to know more about my story? Read here >
After a discussion with our stakeholders, We realized that we can view google analytics data and set up automatic tools to track users’ trails. But it’s a lot of work to set that up and analyze the data.
More importantly-
It does not give us an answer as to why users are not clicking or following a flow.
The best way to measure success is
