LACEWORK / TRELLIS DESIGN SYSTEM

Leading accessibility improvements and library management initiatives

Leading accessibility improvements and library management initiatives

Leading accessibility improvements and library management initiatives

As the UX Lead for Lacework's Trellis Design System, I led initiatives for managing the component library and improving in-product accessibility during product redesign.


MY ROLE

Lead Product Designer


TEAM

2 Frontend Developers • 1 Designer • User Researcher


USERS / PERSONAS

Product Designers, Software Engineers, Lacework Customers


ACTIVITIES PERFORMED

Design Systems Management • Visual Design • Interaction Design • Heuristic Evaluation • Documentation • Design Strategy • Roadmap Planning • Metrics • Business Process Design • Presentations • Collaboration • Stakeholder Buy-in • Measure Impact

Trellis Design System, the single source of truth for designing and building Lacework UI

Trellis Design System, the single source of truth for designing and building Lacework UI

Trellis Design System, the single source of truth for designing and building Lacework UI

Trellis documents the usage guidelines for a collection of foundational elements, components and patterns. It empowers feature teams to create consistent, accessible, scalable user experiences for Lacework customers.


The Platform UX team and Core UI Eng served as the creators and guardians of the design system with a mission to drive conceptual consistency powered by user insights. We connected the dots to build a coherent and unified enterprise product experience.

Trellis documents the usage guidelines for a collection of foundational elements, components and patterns. It empowers feature teams to create consistent, accessible, scalable user experiences for Lacework customers.


The Platform UX team and Core UI Eng served as the creators and guardians of the design system with a mission to drive conceptual consistency powered by user insights. We connected the dots to build a coherent and unified enterprise product experience.

Trellis documents the usage guidelines for a collection of foundational elements, components and patterns. It empowers feature teams to create consistent, accessible, scalable user experiences for Lacework customers.


The Platform UX team and Core UI Eng served as the creators and guardians of the design system with a mission to drive conceptual consistency powered by user insights. We connected the dots to build a coherent and unified enterprise product experience.

OKR: Eliminate usability as an objection to Lacework.

OKR: Eliminate usability as an objection to Lacework.

OKR: Eliminate usability as an objection to Lacework.

Customers stated a number of usability issues as the reason for not acquiring Lacework as their cybersecurity solution. The most common usability issues were grouped into themes and correlated with the volume of business that may be lost if unresolved.


It was decided to conduct a heuristic evaluation to get more specific detail on areas impacted by usability and use it as a basis for improving UI.

Customers stated a number of usability issues as the reason for not acquiring Lacework as their cybersecurity solution. The most common usability issues were grouped into themes and correlated with the volume of business that may be lost if unresolved.


It was decided to conduct a heuristic evaluation to get more specific detail on areas impacted by usability and use it as a basis for improving UI.

Customers stated a number of usability issues as the reason for not acquiring Lacework as their cybersecurity solution. The most common usability issues were grouped into themes and correlated with the volume of business that may be lost if unresolved.


It was decided to conduct a heuristic evaluation to get more specific detail on areas impacted by usability and use it as a basis for improving UI.

Projected loss of accounts and opportunities as a result of not addressing usability issues.

Projected loss of accounts and opportunities as a result of not addressing usability issues.

12

12

12

Admin

Issues with settings and notifications.

Admin: Issues with settings / notification

21

21

21

Not enough data

Insufficient info hinders task completion or making informed decisions.

Not enough data: Insufficient info hinders task completion or making informed decisions.

23

23

23

Uncustomizable

It is not possible for customers to tailor the user interface to suit their specific needs.

Uncustomizable: It is not possible for customers to tailor the user interface to suit their specific needs.

23

23

23

Weak correlation

Lost connections between elements cause confusion and ineffective navigation.

Weak correlation: Lost connections between elements cause confusion and ineffective navigation.

52

52

Deficient toolset

Lack or insufficiency of resources available to users which manifest as limited functionality, limited scope or poor design.

Deficient toolset: Lack or insufficiency of resources available to users which manifest as limited functionality, limited scope or poor design.

Heuristic evaluation

I partnered with a user researcher to develop a heuristic evaluation framework and process based on Jakob Neilen's 10 heuristics for interaction design. Later, we including an additional 4 principles — keyboard navigability, animation, localization and responsiveness. Each principle included a list of related statements that evaluators responded to with "yes," "no" or "not applicable."


Goals

  • Discover usability problems and build a set of initial impressions for user testing.

  • Prioritize issues and improve the overall usability of the product.

  • Provide the team with the next set of OKRs defined with these scores.

  • Reduce the amount of reported post-release bugs and avert critical incidents.

Presentation materials created to introduce the Heuristic Evaluation Process Framework at a product offsite.

<100% opacity affecting accessibility and cohesion


Without full opacity colors easily fall out of
compliance on depending on the background.

Redundant colors
bloating the codebase


Engineers expend effort to identify the appropriate light/dark color pairs to use and sometimes create new colors to fill the gaps, contributing to inconsistencies and codebase bloat. This causes large files and slow load times for customers.

Color library with many redundant and obsolete colors.

Disorganized, cluttered references


Pages were littered with in-progress work,
old or obsolete versions, conceptual
components without vetted use cases

Insufficient documentation


Issues with docs included missing usage guidelines
and labels, lacking focus states and buried assets

Scorecard

Results gathered from the evaluation demonstrated gaps in several areas and presented opportunities for improvement of overall usability.

0%

Localization

28%

Help and documentation

39%

Responsiveness

42%

Recognition rather than recall

45%

Help users recognize, diagnose and recover from errors

50%

Error prevention

56%

Animation

58%

Visibility of system status

71%

Match between system and the real world

72%

Aesthetic and minimal design

73%

User control and freedom

77%

Flexibility and efficiency of use

88%

Consistency and standards

55%

Average Overall Heuristic Evaluation Score

On a scale of 0-100%

How can we ensure a reliable source of truth while supporting feature teams in our shared mission to improve the user experience?

How can we ensure a
reliable source of truth while supporting feature teams
in our shared mission to improve the user experience?

How can we ensure a reliable source of truth while supporting feature teams in our shared mission to improve the user experience?

Poor Accessibility
and Messy Libraries

Poor Accessibility
and Messy Libraries

Poor Accessibility
and Messy Libraries

A11Y Problems

Missing focus states

<100% opacity used for fills, states


Weak Library Organization

Poor library organization

Missing guidelines and unlabeled sheets

Outdated, superfluous references

Missing dark/light mode pairs

Custom values used instead of styles

Broken builds and inefficient components

A11Y Problems

Missing focus states

<100% opacity used for fills, states


Weak Library Organization

Poor library organization

Missing guidelines and unlabeled sheets

Outdated, superfluous references

Missing dark/light mode pairs

Custom values used instead of styles

Broken builds and inefficient components

A11Y Problems

Missing focus states

<100% opacity used for fills, states


Weak Library Organization

Poor library organization

Missing guidelines and unlabeled sheets

Outdated, superfluous references

Missing dark/light mode pairs

Custom values used instead of styles

Broken builds and inefficient components

Impact on Customers
and Teams

Impact on Customers
and Teams

Impact on Customers
and Teams

User Experience Suffers
No keyboard navigation in product
Opacity affects legibility and accessibility

Performance Issues
Codebase bloated with extra colors
Large files sizes; slow load times

Lower Team Efficiency
Unclear which components are available
Causes churn, extra work
Struggle to identify appropriate components
User Experience Suffers
No keyboard navigation in product
Opacity affects legibility and accessibility

Performance Issues
Codebase bloated with extra colors
Large files sizes; slow load times

Lower Team Efficiency
Unclear which components are available
Causes churn, extra work
Struggle to identify appropriate components
User Experience Suffers
No keyboard navigation in product
Opacity affects legibility and accessibility

Performance Issues
Codebase bloated with extra colors
Large files sizes; slow load times

Lower Team Efficiency
Unclear which components are available
Causes churn, extra work
Struggle to identify appropriate components

Trellis Design System Library Management Initiative


A library management initiative that
seeks to enforce better design system
hygiene while improving accessibility

Set Accessibility
Standards

Assure that the design system enables teams to build Lacework user experience that are inclusive, usable and removes barriers for interaction.

Assign light/dark theme pairs

Min. 50% keyboard navigable UI

Increase compliance WCAG Level AA


Reliable and
Complete References

Trellis must include necessary foundational elements and components to support the design efforts of the team, reduce manual labor and minimize errors.

Change styles to token variables

100% components use tokens

100% current components in library

Guidelines/specs are complete

Trellis Redesign: Enhancing UX through "Project Broadway" collaboration with marketing creative

During this time, a redesign was underway that imbued the UI with refreshed styles and new interactions. The Trellis Redesign is derived from concepts created by the Lacework UX team through "Project Broadway" which envisions new interactive workflows and new styles developed in a collaboration with Marketing Creative.


We used this as an opportunity to address accessibility, issues with color theming and functional updates.

Conceptual layouts from Project Broadway

Trellis 2.0 Foundations Testing Ground

I partnered with the feature designer who was assigned to CISO Dashboard. Together we identified accessible colors in light and dark for the dashboard. We then identified the most common layouts and began color tests with them.

Accessing accessibility for proposed dark theme colors.

Collaborative process in translating styles to tokens

I consolidated the palettes, built out color documentation and translating them into reusable tokens (variables) for use in Figma. While this was in progress, the feature designer created a spreadsheet that mapped the existing color styles in Trellis 1.0 to the new Trellis 2.0 color tokens. Feature and Core UI Eng leads were informed throughout and consulted on approach for implementation.

This was used to help communicate changes with frontend engineering.

Wireframes:
Addressing component library structure and guidelines

In Trellis 2.0, I reorganized the library according to increased complexity and included statuses per each component. I then planned out the component documentation using the Figma component menu as a map for dividing guidelines into Variants and Options. Components are labeled vertically by name, type, and size, and horizontally by state.


All conceptual work were relocated to separate files.

Obsolete components were marked for deprecation and set for removal based on a plan for component deprecation.

Trellis Design System 2.0

Trellis Design System 2.0

Trellis Design System 2.0

Focus States for enhanced accessibility

Focus States for
enhanced accessibility

Focus States for enhanced accessibility

Engineers used the new focus state specs to introduce Lacework's first keyboard navigable functionality.

Engineers used the new focus state specs to introduce Lacework's first keyboard navigable functionality.

Engineers used the new focus state specs to introduce Lacework's first keyboard navigable functionality.

A new foundation library

A new foundation library

A new foundation library

The new Trellis Design System Foundation Library shifted from style based values to tokens for Color, Typography, Corner Radius and Space. This creates more cohesion and control for future planning, localization and responsive use cases.

The new Trellis Design System Foundation Library
shifted from style based values to tokens for Color, Typography, Corner Radius and Space. This creates
more cohesion and control for future planning,
localization and responsive use cases.

The new Trellis Design System Foundation Library shifted from style based values to tokens for Color, Typography, Corner Radius and Space. This creates more cohesion and control for future planning, localization and responsive use cases.

Component documentation revisited

Component
documentation revisited

Component documentation revisited

Our new structure and templates provides Platform UX with the tools needed to build references that are organized and easy to follow.

Our new structure and templates provides
Platform UX with the tools needed to build
references that are organized and easy to follow.

Our new structure and templates provides Platform UX with the tools needed to build references that are organized and easy to follow.

The Read Me section is a reference for how the file is organized, best practices for composing guidelines and templates for documenting guidelines, specs and component sheets.

New documentation template

Designed to provide the UX team and XFNs easily digestible documentation for contributing to or building with Trellis.

Overviews have component category definitions based on Atomic Methodology and a change log listing related components and their statuses.

New documentation template

Designed to provide the UX team and XFNs easily digestible documentation for contributing to or building with Trellis.

Link to Storybook

In an effort to build more connective tissue between our react library and our Figma files, each guideline should include a link to its counterpart in Storybook.

Link to Storybook

In an effort to build more connective tissue between our react library and our Figma files, each guideline should include a link to its counterpart in Storybook.

Link to Storybook

In an effort to build more connective tissue between our react library and our Figma files, each guideline should include a link to its counterpart in Storybook.

Component set annotation

Side and top labels allow at-a-glance recognition of component variants and options.

Component set annotation

Side and top labels allow at-a-glance recognition of component variants and options.

Overviews have component category definitions based on Atomic Methodology and a change log listing related components and their statuses.

Impact after six months

Based on data gleaned from Figma Analytics, adoption of Trellis 2.0 was successful with over 8,000 more inserts of components over the old component library. Responses the Bi-annual Trellis Design System Engagement Survey indicate positive reception for the library management initiatives and component improvements.

Impact after six months

Based on data gleaned from Figma Analytics, adoption of Trellis 2.0 was successful with over 8,000 more inserts of components over the old component library. Responses the Bi-annual Trellis Design System Engagement Survey indicate positive reception for the library management initiatives and component improvements.

70%

70%

Keyboard navigation coverage enabled in UI


Previously 0% keyboard navigation in UI

89%

89%

Overall library compliance with Level AA WCAG


Success metric: 80% Min. WCAG AA

94%

94%

More Trellis 2.0 adoption compared to old library


11.9k Trellis 2.0 vs 4.3k Trellis 1.0 inserts

More Trellis 2.0 adoption compared to old library


11.9k Trellis 2.0 vs 4.3k Trellis 1.0 inserts

4.5

4.5

Design system components are easy to use


1=strongly disagree, 5=strongly agree

Design system components are easy to use


1=strongly disagree, 5=strongly agree

5.0

5.0

Component documentation is helpful


1=strongly disagree, 5=strongly agree

Component documentation is helpful


1=strongly disagree, 5=strongly agree

3.4

3.4

Overall satisfaction rating for Trellis Design System


1=strongly disagree, 5=strongly agree

Overall satisfaction rating for Trellis Design System


1=strongly disagree, 5=strongly agree

70%

Keyboard navigation coverage enabled in UI


Previously 0% keyboard navigation in UI

89%

Overall library compliance with Level AA WCAG


Success metric: 80% Min. WCAG AA

94%

More Trellis 2.0 adoption compared to old library


11.9k Trellis 2.0 vs 4.3k Trellis 1.0 inserts

4.5

Design system components are easy to use


1=strongly disagree, 5=strongly agree

5.0

Component documentation is helpful


1=strongly disagree, 5=strongly agree

3.4

Overall satisfaction rating for Trellis Design System


1=strongly disagree, 5=strongly agree

I'm currently available for new opportunities. Feel free to reach out.

LET’S CONNECT