Looker Design System

The LENS Design System project aimed to revolutionize Looker's UI landscape by establishing a centralized contribution-based component library and design system. The initiative spanned nine months and involved a multidisciplinary team comprising designers, engineers, and project managers.

The journey began with a heuristic audit, where we systematically cataloged, named, and organized UI elements across various product domains. The audit unveiled challenges like thousands of duplicated styles, inconsistencies in colors, sizing, and type treatments.

The next phase focused on building a foundation of low-level components and styles. To understand the existing workflow, interviews and feedback sessions were conducted, revealing that teams were duplicating efforts by copying and pasting code or creating assets from scratch.

Encouraging teams to integrate the design system into their workflow posed a significant challenge. To address this, we conducted open office hours, workshops, and webinars, providing educational resources like checklists and templates. Experts were embedded in teams to assist in the adoption process.

To seamlessly integrate the redesigned product, we first created a theme that matched the existing look-and-feel. This ensured a smooth transition, with design tokens meticulously mapped to old themes. The phased approach enabled efficient implementation and iterative validation.

The LENS Design System project successfully transformed Looker's UI landscape, creating a cohesive and efficient design and development environment. The phased approach, user education initiatives, and contribution-based model contributed to the project's success. Future iterations will continue to build on these foundations, ensuring ongoing efficiency, customization, and user satisfaction.