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
These workarounds are discovered during updates, leading to customer tickets and additional work to fix the resulting UI bugs.
The growing disparity between Trellis Storybook and Trellis Figma is due to a lack of available resources to address the work.
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
These workarounds are discovered during updates, leading to customer tickets and additional work to fix the resulting UI bugs.
These workarounds are discovered during updates, leading to customer tickets and additional work to fix the resulting UI bugs.
The growing disparity between Trellis Storybook and Trellis Figma is due to a lack of available resources to address the work.
The growing disparity between Trellis Storybook and Trellis Figma is due to a lack of available resources to address the work.
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.
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
3
Build and launch
Build and launch
Build and launch
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
Explore more projects
Explore more projects
Explore more projects
