Hypatia: Lutron Overhaul Design System

Lutron, a leader in advanced lighting and shading solutions, engaged in a major overhaul of its web properties. As a Visual Designer on contract, I was initially tasked with executing design concepts across 100+ pages. However, with the prototype still in development, my role pivoted to creating a cohesive design system to address inconsistencies and enhance user experience across all Lutron's web properties.

This project is under NDA, so I’m sharing a high-level overview only. If you’d like more details, just reach out to me directly—I’d be happy to discuss it further!

Client

Lutron Electronics

Role

Visual Designer

Team

2 - person

Timeline

March - May 2024 (3 months)
The figure shows how the web application works.

Problem

Lutron's websites lacked consistency since there wasn’t a unified design system across teams. Each team had its own approach—some used their own mini design systems, while others had none at all. For the major redesign, building a cohesive design system was key to enhancing user experience and streamlining development.

Goal

Build a comprehensive design system to standardize Lutron’s web presence and deliver a consistent, high-quality user experience across all digital platforms.

Objectives

  • Assess the existing design system to identify what can be retained and what needs to be updated for the new system.
  • Create a comprehensive style guide that includes colors, fonts, spacing, and breakpoints to maintain a consistent visual identity.
  • Establish a library of reusable design components to streamline the creation and updating of web pages.
  • Develop a pattern library that standardizes common design patterns, ensuring a consistent user experience.
  • Clearly document all design elements with specifications to ensure accuracy and consistency. Provide comprehensive guidance for their correct usage across the website.

Process

1. Analyzing the existing system

We kicked things off by taking a close look at the design system already in use on one of Lutron’s websites. This helped us decide which elements to keep and which to update.

My contribution

Identified inconsistencies and areas for improvement to create a more unified design approach.

2. Researching best practices

I analyzed how leading companies approach their design systems, gaining insights into best practices and effective strategies. This research ensured that our design system would be both modern and efficient.

3. Developing a style guide

To maintain a consistent visual identity across all digital platforms, we created a comprehensive style guide that covered colors, fonts, spacing, and breakpoints. We built on the existing style guide, refining current elements and setting new standards.

My contribution
  • Updated the mobile breakpoints from 350px x 844px to 375px x 767px based on user analytics. This adjustment ensures that the design is tailored to the screen sizes most commonly used by our audience, improving the mobile experience.
  • Created clear naming conventions for design elements. This helps keep everything organized and makes it easier to use and maintain the design system consistently.
  • Defined tokens for colors, typography, spacing, and breakpoints. These tokens ensure that design elements are consistent and easy to apply throughout the design system.
  • Refined and standardized icons to align with the updated design style.
Styleguide: fonts, typography scale, spacing system, breakpoints with layouts, and color palette.

4. Building a component library

Building a component library was key to keeping things consistent and efficient across all platforms. During this phase, we refined existing components and introduced new ones, all defined by design tokens to ensure consistency throughout the system.

My contribution
  • Refined button styles and sizes, updating states to enhance visual differentiation. This update addressed user feedback regarding insufficient distinction between button states in previous designs.
  • Designed and implemented components for form elements, including input fields, radio buttons, checkboxes, chips, and dropdowns.
  • Improved layer naming for existing components, replacing generic names like "frame 123" with descriptive labels such as "input field" for better clarity and organization.
Component library: radio buttons, chips, dropdown groups, checkboxes, form inputs

5. Creating a pattern library

As the UI design team completed the first prototypes for the overhaul project, we started integrating these new elements and patterns into the design system, laying the groundwork for our pattern library. Although the library is still a work in progress, it will continue to grow as more pages are designed and additional patterns are added.

My contribution
  • Scaled key components for various breakpoints to ensure responsiveness and adaptability across different devices and screen sizes.
  • Continuously updated the design system with the latest design iterations.
  • Advocated for using existing design system elements whenever possible to streamline development.

6. Documenting

We document each design element, including specifications for dimensions, interactions, and accessibility. This documentation ensures that all design elements are clearly understood and correctly implemented.

My contribution

I defined specifications, outlined use cases, and identified edge cases for design elements to ensure clear and consistent implementation.

Design specifications illustrating the spacing system and radio button component. The image includes spacing guidelines, radio button anatomy, and usage instructions for consistent implementation.

Result

We established a solid foundation for the design system, allowing it to evolve and adapt over time. This ensures the system can be updated to meet future needs and trends.

Additional work

  • Designed mobile and desktop prototypes for the Lutron Support Center.
  • Helped prepare the "Caséta by Lutron" designs for developer handoff by refining layouts for various breakpoints and edge cases.
  • Redesigned the landing page for 'RadioRA 3 by Lutron' by replacing outdated components with those from the updated design system to enhance consistency and user experience.

Next project

Digital museum →