Background
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.
Phase 1: Heuristic Audit
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.
All the many styles of buttons that were identified
Phase 2: Building Components
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.
Example of Card Elevation
Phase 3: Contribution Model
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.
Phase 4: Theming
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.
Results and Future Directions
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.
