top of page

LACEWORK

Lacework Design System

CONTEXT

Inconsistent design & low dev efficiency

  • The old design system lacked customization and scaling capabilities, resulting in inconsistent user experience and development inefficiencies.

  • As the co-lead of the overhaul, I worked with 2 designers and 7 engineers to design, validate and implement a new design system in 4 months.

GOAL

Success metrics

  • Improve visual and interaction consistency.

  • Enhance the discoverability of actionable information.

  • Reduce time spent on security issue resolution.

  • Improve ease of use and task success rate.

STRUCTURE

Style foundation + components

  • Single resources of truth for all design elements.

  • Follow the atomic design to break the entire interface into predictable and cohesive blocks.

  • Utilize design tokens to communicate design with all stakeholders.

ATOM EXAMPLE

Dropdown

  • Established dropdown guidelines and streamlined variants for consistency.

  • Created easy-to-use Figma components with all variants and states.

  • Improved dropdown usability by clarifying arrow directions and using clear background and border colors to indicate state.