LACEWORK / DESIGN SYSTEM CONTRIBUTION MODEL

Reducing tech debt
by 62% through a collaborative process

Reducing tech debt
by 62% through a collaborative process

Reducing tech debt
by 62% through a collaborative process

As design systems UX lead, I strategized the adoption of a collaborative process that empowers and supports feature teams in making contributions to the Trellis Design System.


MY ROLE

Lead Product Designer


TEAM

Staff Frontend Eng Lead


USERS / PERSONAS

Product Designers, Software Engineers


ACTIVITIES PERFORMED

Design Systems Management • Documentation • Design Strategy • Roadmap Planning • Business Process Design • Presentations • Collaboration • Stakeholder Buy-in • Measure Impact

Before the structural changes in engineering, the Core UI Eng team was responsible for developing the design system.

Before the structural changes in engineering, the Core UI Eng team was responsible for developing the design system.

Before the structural changes in engineering, the Core UI Eng team was responsible for developing the design system.

Post-restructuring, this team was reassigned to working on features. As a result, considerably fewer resources were devoted to design system tasks.

Post-restructuring, this team was reassigned to working on features. As a result, considerably fewer resources were devoted to design system tasks.

Post-restructuring, this team was reassigned to working on features. As a result, considerably fewer resources were devoted to design system tasks.

Before Reorg

~10 frontend engineers
Design system tasks per FE: 100%

~10 frontend engineers
Design system tasks per FE: 100%

After Reorg

1 frontend eng lead
Design system tasks per FE: 20%

1 frontend eng lead
Design system tasks per FE: 20%

Challenges in maintaining and updating the design system due to resource allocation and team practices

Challenges in maintaining and updating the design system due to resource allocation and team practices

Challenges in maintaining and updating the design system due to resource allocation and team practices

Observed Gaps

Observed Gaps

Observed Gaps

Design system lacks resources for regular updates. Core UI Eng team were distributed to feature teams and no longer dedicated solely to design systems.


Feature teams don't scope design system updates. Trellis work is not seen as part of feature team responsibilities.


Unfamiliarity with contributing to design system codebase. Trellis is often sidestepped with hard-coded solutions mimicking current styles without relation to the library.

Design system lacks resources for regular updates. Core UI Eng team were distributed to feature teams and no longer dedicated solely to design systems.


Feature teams don't scope design system updates. Trellis work is not seen as part of feature team responsibilities.


Unfamiliarity with contributing to design system codebase. Trellis is often sidestepped with hard-coded solutions mimicking current styles without relation to the library.

Design system lacks resources for regular updates. Core UI Eng team were distributed to feature teams and no longer dedicated solely to design systems.


Feature teams don't scope design system updates. Trellis work is not seen as part of feature team responsibilities.


Unfamiliarity with contributing to design system codebase. Trellis is often sidestepped with hard-coded solutions mimicking current styles without relation to the library.

How can we make progress against tech debt given resource constraints from the engineering reorg?

How can we make progress against tech debt given resource constraints from the engineering reorg?

How can we make progress against tech debt given resource constraints from the engineering reorg?

Consequences

Bandaids result in extra work.
These workarounds are discovered during updates, leading to customer tickets and additional work to fix the resulting UI bugs.
Accumulating tech debt.
The growing disparity between Trellis Storybook and Trellis Figma is due to a lack of available resources to address the work.
Suboptimal user experience impacts Lacework customers.
We will delay delivering value to customers in terms of feature-to-feature consistency, accessibility, and usability improvements, which have been identified as barriers to customer adoption.

Consequences

Consequences

Bandaids result in extra work.
These workarounds are discovered during updates, leading to customer tickets and additional work to fix the resulting UI bugs.
Bandaids result in extra work.
These workarounds are discovered during updates, leading to customer tickets and additional work to fix the resulting UI bugs.
Accumulating tech debt.
The growing disparity between Trellis Storybook and Trellis Figma is due to a lack of available resources to address the work.
Accumulating tech debt.
The growing disparity between Trellis Storybook and Trellis Figma is due to a lack of available resources to address the work.
Suboptimal user experience impacts Lacework customers.
We will delay delivering value to customers in terms of feature-to-feature consistency, accessibility, and usability improvements, which have been identified as barriers to customer adoption.
Suboptimal user experience impacts Lacework customers.
We will delay delivering value to customers in terms of feature-to-feature consistency, accessibility, and usability improvements, which have been identified as barriers to customer adoption.

Approach: Adopt a new governance model

Approach: Adopt a new governance model

Approach: Adopt a new governance model

Governance model structure with…


A centralized team that maintains the system components, tools, processes and acts as a consulting body.


Contributors who consume AND influence the evolution of the system




Benefits of approach


Value to customer. Ensures that we are shipping a product that meets high standards of quality that our users expect.


Reduce tech debt and provide references that are up-to-date. Over time, teams may see less need to update components as the libraries achieve near parity.


Many hands make fast work. This approach ensures that there is a regular cadence of updates to Trellis.


All ships rise together. The effort of one team has a ripple effect, improving velocity and efficiency of other teams and vice versa.

Governance model structure with…


A centralized team that maintains the system components, tools, processes and acts as a consulting body.


Contributors who consume AND influence the evolution of the system



Benefits of approach


Value to customer. Ensures that we are shipping a product that meets high standards of quality that our users expect.


Reduce tech debt and provide references that are up-to-date. Over time, teams may see less need to update components as the libraries achieve near parity.


Many hands make fast work. This approach ensures that there is a regular cadence of updates to Trellis.


All ships rise together. The effort of one team has a ripple effect, improving velocity and efficiency of other teams and vice versa.

Governance model structure with…


A centralized team that maintains the system components, tools, processes and acts as a consulting body.

Contributors who consume AND influence the evolution of the system



Benefits of approach


Value to customer. Ensures that we are shipping a product that meets high standards of quality that our users expect.


Reduce tech debt and provide references that are up-to-date. Over time, teams may see less need to update components as the libraries achieve near parity.


Many hands make fast work. This approach ensures that there is a regular cadence of updates to Trellis.


All ships rise together. The effort of one team has a ripple effect, improving velocity and efficiency of other teams and vice versa.

Creating a collaborative and technically refined process for stakeholder buy-in

Creating a collaborative and technically refined process for stakeholder buy-in

Creating a collaborative and technically refined process for stakeholder buy-in

In developing the process, I defined each step taking into consideration existing ceremonies and workflows. I collaborated with engineering to refine the technical aspects of the process and define the tasks that engineers would handle. This was used to get buy-in from internal stakeholders.

In developing the process, I defined each step taking into consideration existing ceremonies and workflows. I collaborated with engineering to refine the technical aspects of the process and define the tasks that engineers would handle. This was used to get buy-in from internal stakeholders.

In developing the process, I defined each step taking into consideration existing ceremonies and workflows. I collaborated with engineering to refine the technical aspects of the process and define the tasks that engineers would handle. This was used to get buy-in from internal stakeholders.

Trellis Design System Component Contribution Process

Trellis Design System Component Contribution Process

Trellis Design System Component Contribution Process

I drove the adoption of a three phase process that guided Lacework feature teams through the steps of contributing a component, identifying the teammates involved and their activities.

I drove the adoption of a three phase process that guided Lacework feature teams through the steps of contributing a component, identifying the teammates involved and their activities.

I drove the adoption of a three phase process that guided Lacework feature teams through the steps of contributing a component, identifying the teammates involved and their activities.

1

Review and consult

Review and consult

Review and consult

Visit Trellis Storybook and Trellis Figma libraries. Confirm whether existing components can address needs.


Inform the team. Raise a flag and see if teammates have already solved this or are actively working on something similar.


Sign up for Trellis Office Hours. The Trellis Leads can help you select the best tool for the job.

2

Design and iterate

Design and iterate

Design and iterate

Find and assign yourself a Trellis JIRA ticket. This helps us track work on the component.

Develop a design proposal. The proposal should demonstrate need, include explorations, a defined scope and guidelines for Trellis.

Review with teams. The design proposal should be the product of team feedback.
Find and assign yourself a Trellis JIRA ticket. This helps us track work on the component.

Develop a design proposal. The proposal should demonstrate need, include explorations, a defined scope and guidelines for Trellis.

Review with teams. The design proposal should be the product of team feedback.
Find and assign yourself a Trellis JIRA ticket. This helps us track work on the component.

Develop a design proposal. The proposal should demonstrate need, include explorations, a defined scope and guidelines for Trellis.

Review with teams. The design proposal should be the product of team feedback.

3

Build and launch

Build and launch

Build and launch

Schedule a handoff meeting. After approval during Design System Review, meet with the assigned engineering team, PM and Trellis Leads

Organize pixel review. Time box the effort, solicit volunteers from UX and Eng go through Lacework and capture UI Bugs in JIRA tickets. Refine and repeat as needed.


Announce availability. Update TPS, publishes release notes in Workplace and Slack


Post GA support. Bug fixes, updates, usage metrics and tracking, etc.

Socializing the strategy among teams in cross-functional forums

Socializing the strategy among teams in cross-functional forums

Socializing the strategy among teams in cross-functional forums

I translated the diagram into a presentation and shared with feature teams. I provided detailed project background, outlined responsibilities, process phases, ceremonies and support for teams undergoing the process.

I translated the diagram into a presentation and shared with feature teams. I provided detailed project background, outlined responsibilities, process phases, ceremonies and support for teams undergoing the process.

Results six months following launch

Results six months following launch

Results six months following launch

We built momentum for delivering customer value through design systems as shown by our backlog burn down. Responses from the Bi-annual Trellis Design System Engagement Survey and Trellis Office Hour attendance rates further indicate process adoption and effectiveness.

62%

Less design system related JIRA tickets contributing to tech debt


42% previous vs 16% current backlog

71%

Average office hours attendance rate per month


3.3 out of 4 sessions per month

5.0

Understand the component contribution process


1=strongly disagree, 5 = strongly agree

4.0

Awareness of design system support channels


1=strongly disagree, 5 = strongly agree

62%

Less design system related JIRA tickets contributing to tech debt


42% previous vs 16% current backlog

71%

Average office hours attendance rate per month


3.3 out of 4 sessions per month

5.0

Understand the component contribution process


1=strongly disagree, 5 = strongly agree

4.0

Awareness of design system support channels


1=strongly disagree, 5 = strongly agree

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

LET’S CONNECT