Slide 1

Slide 1 text

© Copyright 2024 • Directed Edges LLC Managing Design Systems By Nathan Curtis for Converge by ZeroHeight Brighton, UK • October 4, 2024 From features and releases to roadmaps and backlogs

Slide 2

Slide 2 text

© Copyright 2024 • Directed Edges LLC About me Fairfax, VA (near Washington, DC) Worked on ~85 design systems since 2006 Blog at medium.com/@nathan curtis a Socialize on linkedin.com, twitter.com @nathan curtis a Hi, I’m Nathan

Slide 3

Slide 3 text

© Copyright 2024 • Directed Edges LLC Office hours & consulting Projects like component composition, library architecture, and strategy and planning Embedded as lead Learn more at www.directededges.com

Slide 4

Slide 4 text

© Copyright 2024 • Directed Edges LLC Who am I? I’m a design system architect I ❤️ tokens and UI components

Slide 5

Slide 5 text

© Copyright 2024 • Directed Edges LLC What role do I play? I’m a design system architect ...that manages system work

Slide 6

Slide 6 text

© Copyright 2024 • Directed Edges LLC What am I called? Product manager? Project manager?

Slide 7

Slide 7 text

© Copyright 2024 • Directed Edges LLC What am I responsible for? Drive strategy Ensure quality Deliver releases Manage workflows Prioritize roadmaps Foster collaboration Align external stakeholders Develop team and individual skills

Slide 8

Slide 8 text

© Copyright 2024 • Directed Edges LLC How does it work?

Slide 9

Slide 9 text

© Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered via across and organized on a , all visible and tracked on Releases Workflow Design and code libraries Plan Design Spec Code Figma asset Initiatives Roadmap Boards?

Slide 10

Slide 10 text

© Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered via across and organized on a , all visible and tracked on ?

Slide 11

Slide 11 text

© Copyright 2024 • Directed Edges LLC Features / Things we produce Workflow process Training curriculum Strategy and plans Analytics reports Design tokens UI components UX patterns Content guidance

Slide 12

Slide 12 text

© Copyright 2024 • Directed Edges LLC Features / Things we produce Workflow process Training curriculum Strategy and plans Analytics reports Design tokens UI components UX patterns Content guidance Not features Features Today’s focus

Slide 13

Slide 13 text

Design tokens UI components UX patterns Content guidance © Copyright 2024 • Directed Edges LLC Features / Relative capacity Workflow process Training curriculum Strategy and plans Analytics reports Not features Features

Slide 14

Slide 14 text

© Copyright 2024 • Directed Edges LLC Feature Something , and as a system asset. made documented released attributes ˜ Published in 1+ ˜ Useful to and/or and/or ˜ Implicitly or explicitly librariew designers developers otherw versioned

Slide 15

Slide 15 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Workflow ?

Slide 16

Slide 16 text

© Copyright 2024 • Directed Edges LLC Tabs Checkbox Radio button Text input Dropdown Alert Button Breadcrumb Accordion {Title} {Details} {Label} {Label}

Slide 17

Slide 17 text

© Copyright 2024 • Directed Edges LLC Design Code Workflow / Steps {Title} {Details} {Label} {Label}

Slide 18

Slide 18 text

© Copyright 2024 • Directed Edges LLC Design Code Workflow / Assignee {Title} {Details} {Label} {Label} R o l e Design Developer Product/project Content Specialist “Multiple assignee”

Slide 19

Slide 19 text

{Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Design Code Document Publish Design ≠ docs Producing docs content is different than getting the design approved. Workflow / Discovery, 2016 R o l e Design Developer Product/project Content Specialist “Multiple assignee” NEW NEW

Slide 20

Slide 20 text

{Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Discover Design Code Document Publish Scope a plan Audits, exploration, and agreeing scope as a milestone. Workflow / Morningstar, 2017 NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”

Slide 21

Slide 21 text

{Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Discover Design Code Document Publish Scope a plan Audits, exploration, and agreeing scope as a milestone. Workflow / Morningstar, 2017 NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”

Slide 22

Slide 22 text

{Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Discover Design Code Accessibility Document UI toolkit Publish External collaborator Accessibility requires a review from separate team of experts. Workflow / Target, 2017 NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”

Slide 23

Slide 23 text

{Title} {Details} {Label} {Label} © Copyright 2024 • Directed Edges LLC Discover Design Code Accessibility Document UI toolkit Publish External collaborator Accessibility requires a review from separate team of experts. Workflow / Target, 2017 Late changes Finalize the design asset after the code is final, to ensure alignment. NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”

Slide 24

Slide 24 text

Publish Document Harden Test Accessibility Code UI Toolkit Production Design Discover © Copyright 2024 • Directed Edges LLC Workflow / REI, 2018 Ten steps? That’s... a lot. NEW NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”

Slide 25

Slide 25 text

Publish Document Harden Test Accessibility Code UI Toolkit Production Design Discover © Copyright 2024 • Directed Edges LLC Specifications For the first time, specs (for handoff) ≠ design (approved by design org) Workflow / REI, 2018 NEW NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”

Slide 26

Slide 26 text

Publish Document Harden Test Accessibility Code UI Toolkit Production Design Discover © Copyright 2024 • Directed Edges LLC Specifications For the first time, specs (for handoff) ≠ design (approved by design org) Testing assignee Engineers assigned testing (cases, docs, etc) as separate task. Workflow / REI, 2018 NEW NEW NEW R o l e Design Developer Product/project Content Specialist “Multiple assignee”

Slide 27

Slide 27 text

Design production Code doc Publish Design doc Figma asset Code © Copyright 2024 • Directed Edges LLC Plan Design Spec Workflow / Stable workflow, since 2020 Role Design Developer Product/project Content Specialist “Multiple assignee”

Slide 28

Slide 28 text

© Copyright 2024 • Directed Edges LLC Workflow / Potential assignee Plan Design Specification Code Code docs Figma asset Design docs Anyone, really Designer Designer Developer Developer Content or Designer Designer Content or Potential assignee Task Must have DRI (Directly Responsible Individual)

Slide 29

Slide 29 text

© Copyright 2024 • Directed Edges LLC Workflow / Outputs Plan Design Specification Code Code docs Figma asset Design docs Audits, explorations, and scope Detailed design (in Figma) Detailed specs (in a Figma document) Code package(s) Code docs, possibly within a code package Figma asset(s) published in the library Doc site content Output Task

Slide 30

Slide 30 text

production © Copyright 2024 • Directed Edges LLC Workflow / Defining done Decide not to pursue or set scope, ready to start Done when Design approved by design stakeholders Handed off to assignees, agreed on API provisionally Figma assets tested, reviewed, ready to publish Code tested, reviewed, merged, ready to release Code docs reviewed and ready to publish Design docs reviewed and ready to publish Plan Design Specification Code Code docs Figma asset Design docs Task Are we ready?

Slide 31

Slide 31 text

© Copyright 2024 • Directed Edges LLC Workflow / Relative cost Cost Plan Design Specification Code Code docs Figma asset Design docs Task Automation Assets getting complicated Not vanilla HTML & CSS anymore Eased authoring <- <- -> ->

Slide 32

Slide 32 text

© Copyright 2024 • Directed Edges LLC Workflow / Cross-functional reviewers assignee reviewers Plan Design Specification Code Code docs Figma asset Design docs Task Ensure broad participation Ensure right people review each output

Slide 33

Slide 33 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Plan ?

Slide 34

Slide 34 text

© Copyright 2024 • Directed Edges LLC Plan objective Understand what we want to make, why, and if it’s worth it Activities Audit existing cases and comparative examples Always Sometimes Sometimes Design and/or explorations code Other research

Slide 35

Slide 35 text

© Copyright 2024 • Directed Edges LLC Plan / Scope Design
 Questions to answer Anatomy 
 What might it include? Props 
 How might it work? Other areas and considerations 30-60 min

Slide 36

Slide 36 text

© Copyright 2024 • Directed Edges LLC Plan / Decision Yes, let’s make it! -> Communicate to stakeholders -> Formalize the scope -> Assign remaining tasks -> Assign to release -> Initiate next task No, will not support -> Communicate to stakeholders -> Close task

Slide 37

Slide 37 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Design ?

Slide 38

Slide 38 text

© Copyright 2024 • Directed Edges LLC Design objective Fully explore and validate a design solution outputs Figma concepts, iterated

Slide 39

Slide 39 text

© Copyright 2024 • Directed Edges LLC Start Make Test Share Review Deliver Design

Slide 40

Slide 40 text

© Copyright 2024 • Directed Edges LLC Files from template Include examples from products Styled with design tokens Content examples Behaviors and states Interactive prototypes Responsiveness Variant configurations Sizing and density Examples in-situ to stress test across products and themes Accessibility Usability With assigned developer(s) With system team With design community With design head / director With key adopting team(s) By designer peer(s) By assigned developer(s) By accessibility Final edits Transfer to begin specification Start Make Test Share Review Deliver Design

Slide 41

Slide 41 text

© Copyright 2024 • Directed Edges LLC Files from template Add examples from products Examples with real content Styled with design tokens ⚠️ Behaviors and states ⚠️ Interactive prototypes ⚠️ Responsiveness ⚠️ Variant configurations ⚠️ Sizing and density Examples in-situ to stress test across products and themes Accessibility Usability With assigned developer(s) With design head / director ⚠ With system team With design community With key adopting team(s) By assigned developer(s) By accessibility ⚠ By designer peer(s) By system team Final edits Transfer to begin specification Start Make Test Share Review Deliver Design Do you usability test every desig system UI component you make? REALLY? Be honest. Product designers Avoid or do Less Than / Minimal, the as, or system designers. Same More than

Slide 42

Slide 42 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Spec ?

Slide 43

Slide 43 text

Specification © Copyright 2024 • Directed Edges LLC nt name} Anatomy 1 {Layer name} Depends on : {Dependency} {Name} : {Value} {Name} : {Value} 2 {Layer name} {Name} : {Style/token} {Name} : {Style/token} {Name} : {Value} 3 {Layer name} {Name} : {Value} {Name} : {Style/token} {Name} : {Style/token} 4 {Layer name} Depends on : {Dependency} {Name} : {Value} {Name} : {Value} # # # # # # # # # # # # Properties {Variant property name} {Property value} (default) {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Property value} {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Property value} {Layer name} {Name} : {Style/token} {Name} : {Value} {Layer name} Depends on : {Dependency} {Name} : {Value} {Boolean property name} Property type : Boolean Default : {true/false} Associated layers : {Layer name} {Layer name} {Layer name} Layout and spacing Spacing {Layer name} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Layer name} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Name} : {Value} {Name} : {Value} 16 16 16 16 16 16 Overflow {Layer name} {Description} {Layer name} {Description} Touch targets Accessibility Screen reading For when the member is using a screen reader, including how elements should be identified, read, and in what order. ESDS Text input Reading : [ESDS Form label]. [Icon] [value/ placeholder], [role]. Example : “Cost rate, the internal cost that this person incurs on your business. Dollar 100, [role].” Role : text box {Layer name} Reading : {Reading} Example : {Example} Role : {Role} Focus order ##. {Name} {Role} ##. {Name} {Role} ##. {Name} {Role} ##. {Name} {Role} # # # # # # # # # # # # Announced order ##. {Name} {Role} ##. {Name} {Role} ##. {Name} {Role} ##. {Name} {Role} # # # # # # # Component tok ens {Subsection title} Tok en Alias Figma style Value 00 {Value} $ esds-... $ esds-... {Figma style} {Description} 00 {Value} $ esds-... $ esds-... {Figma style} {Description} Aa {Value} $ esds-... $ esds-... {Figma style} {Description} {Value} $ esds-... $ esds-... {Figma style} {Description} {Value} $ esds-... $ esds-... {Figma style} {Description} {Value} $ esds-... $ esds-... {Figma style} {Description} {Subsection title} Tok en Alias Figma style Value 00 {Value} $ esds-... $ esds-... {Figma style} 00 {Value} $ esds-... $ esds-... {Figma style} 00 {Value} $ esds-... $ esds-... {Figma style} 00 {Value} $ esds-... $ esds-... {Figma style} {Subsection title} Tok en {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... {Value} $ esds-... Version history Version #.#.# • MMM DD, YYYY New features é {Descriptioná é {Descriptioná é {Description} Enhancements é {Descriptioná é {Descriptioná é {Description} Fixes é {Descriptioná é {Descriptioná é {Description} Version #.#.# • MMM DD, YYYY New features é {Descriptioná é {Descriptioná é {Description} Enhancements é {Descriptioná é {Descriptioná é {Description} Fixes é {Descriptioná é {Descriptioná é {Description} or or, simply “ Design spec” “ Spec” A document that describes how an interface is composed, configured, visually designed, behaves and more, whether a component, page or something else.

Slide 44

Slide 44 text

Design production Code doc Publish Design doc Figma asset Code © Copyright 2024 • Directed Edges LLC Plan Design Spec Specs / Handoff as transition Role Design Developer Product/project Content Specialist “Multiple assignee” Handoff Cross-functional assignees

Slide 45

Slide 45 text

© Copyright 2024 • Directed Edges LLC Specs / Specs plugin automation

Slide 46

Slide 46 text

Anatomy {Title} {Details} Show less {Label} {Label} 1 2 3 4 5 6 7 8 ESDSV Alert Width: ESDS Sizing/ platform/iOS default width (343) Border weight: 2 Border radius: ESDS Shape/ border radius/module (4) 1 Decorative Icon Depends on: ESDS-V Icon Name: Size: 20x20 2 Title Text color: ESDS Color/ Text/Primary (#0E1114) Text style: Heading/5 3 Icon button layout container Height: ESDS Sizing/ icon/small (16) Width: ESDS Sizing/ icon/small (16) 4 Dismiss Icon Depends on: ESDS-V Icon Name: Size: 16x16 Color: Primary 5 Details Text color: ESDS Color/ Text/Primary (#0E1114) Text style: Body/Small 6 Details drawer Depends on: ESDSV Details drawer State: Open 7 Action area Depends on: ESDSV Alert actions Actions: Button + Link 8 Properties Type {Title} {Details} Show less {Label} {Label} Basic ESDSV Alert Background color: ESDS Color/ Alert/Basic/Background (#F0F1F1) Border color: ESDS Color/ Alert/Basic/Element (#A6ACB0) Decorative Icon Color: Secondary {Title} {Details} Show less {Label} {Label} Informational ESDSV Alert Background color: ESDS Color/ Alert/Info/Background (#EDF0FB) Border color: ESDS Color/ Alert/Info/Element (#0E68D4) Decorative Icon Color: Info {Title} {Details} Show less {Label} {Label} Success ESDSV Alert Background color: ESDS Color/ Alert/Success/Background (#E6FDEB) Border color: ESDS Color/ Alert/Success/Element (#097D33) Decorative Icon Color: Success {Title} {Details} Show less {Label} {Label} Error ESDSV Alert Background color: ESDS Color/ Alert/Error/Background (#FCF0EF) Border color: ESDS Color/ Alert/Error/Element (#D90936) Decorative Icon Color: Error {Title} {Details} Show less {Label} {Label} Warning ESDSV Alert Background color: ESDS Color/ Alert/Warning/Background (#FCEFDA) Border color: ESDS Color/ Alert/Warning/Element (#785F07) Decorative Icon Color: Warning Layout and spacing Type: Basic {Title} {Details} Show less {Label} {Label} 8 16 16 16 16 ESDSV Alert Direction: Horizontal Alignment: Top left Vertical resizing: Hug Horizontal resizing: Fixed Item spacing: ESDS Space/ item-spacing/half-x (8) Padding: ESDS Space/ padding/1x (16) {Title} {Details} Show less {Label} {Label} {Title} {Details} Show less {Label} {Label} 16 ]-[ Direction: Vertical Alignment: Top left Vertical resizing: Hug Horizontal resizing: Fill Item spacing: ESDS Space/ item-spacing/1x (16) {Title} {Details} Show less {Label} {Label} {Title} {Details} Show less 12 12 ]-[ Direction: Vertical Alignment: Top left Vertical resizing: Hug Horizontal resizing: Fill Item spacing: ESDS Space/ item-spacing/three-quarter-x (12) {Title} {Details} Show less {Label} {Label} {Title} 24 ]-[ Direction: Horizontal Alignment: Top right Vertical resizing: Hug Horizontal resizing: Fill Item spacing: ESDS Space/ item-spacing/one-and-a-half-x (24) © Copyright 2024 • Directed Edges LLC Specs / Aligning API

Slide 47

Slide 47 text

Design production Scoping Expressing scope as (very) rough anatomy and API Critique Cross-functional reviews of emerging design Code doc Publish Design doc Figma asset Code © Copyright 2024 • Directed Edges LLC Plan Design Spec Specs / Involving developers earlier and often Handoff Role Design Developer Product/project Content Specialist “Multiple assignee”

Slide 48

Slide 48 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Code ?

Slide 49

Slide 49 text

© Copyright 2024 • Directed Edges LLC Create code branch Generate file(s) Source reusable code Draft API Obtain API feedback Code HTML, CSS, JavaScript Create visual test cases Document API Create usage examples Update dependent code Browsers & devices Functional Unit tests Accessibility (manual) Accessibility (automated) Visual regression tests With assigned designer(s) With system team With developer community With key adopting team(s) By developer peer(s) By assigned designer(s) By community developer(s) By accessibility Final edits Write changelog Merge pull request Start Make Test Share Review Deliver Code

Slide 50

Slide 50 text

© Copyright 2024 • Directed Edges LLC Create code branch Generate file(s) Source reusable code Draft API Obtain API feedback Create visual test cases Document API Create usage examples Code HTML, CSS, JavaScript Update dependent code Browsers & devices Functional Accessibility (manual) Accessibility (automated) Visual regression tests Unit tests With assigned designer(s) With system team With developer community With key adopting team(s) By developer peer(s) By assigned designer(s) By community developer(s) By accessibility Final edits Write changelog Merge pull request 5 min 2 min ...when? 3 min Start Make Test Share Review Deliver Code

Slide 51

Slide 51 text

© Copyright 2024 • Directed Edges LLC Create code branch Generate file(s) Source reusable code Draft API Obtain API feedback Code HTML, CSS, JavaScript Create visual test cases Document API Create usage examples Update dependent code Browsers & devices Functional Unit tests Accessibility (manual) Accessibility (automated) Visual regression tests With assigned designer(s) With system team With developer community With key adopting team(s) By developer peer(s) By assigned designer(s) By community developer(s) By accessibility Final edits Write changelog Merge pull request Start Make Test Share Review Deliver Code Technical design

Slide 52

Slide 52 text

© Copyright 2024 • Directed Edges LLC Code / Technical design Developer expresses API Start with template Format as code Does designer see it? Shared in a common place?

Slide 53

Slide 53 text

Design production Code doc Publish Design doc Figma asset Code © Copyright 2024 • Directed Edges LLC Plan Design Spec Code / Collaborative moments after handoff Handoff Role Design Developer Product/project Content Specialist “Multiple assignee” (V)QA Reviews & testing

Slide 54

Slide 54 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Figma asset ?

Slide 55

Slide 55 text

© Copyright 2024 • Directed Edges LLC Create a branch in library file Create a page from template Integrate finalized design Draft API Obtain API feedback Compose anatomy and layers Apply visual style Create configurable variants Configure nested components Create visual test cases Create usage examples Update dependent assets Descriptions and metadata Anatomy and naming Property combinations Content (text/images) flow
 Layout resizing Visual style variation, modes Composition in situ Composition of slots Varying nested configurations Behaviors Common overrides With assigned designer(s) With assigned developer(s) With system team With design community With key adopting team(s) By assigned developer(s) By assigned designer(s) By community designer(s) By design lead Final edits Write changelog Merge branch (Publishable) Figma asset Start Make Test Share Review Deliver

Slide 56

Slide 56 text

© Copyright 2024 • Directed Edges LLC Create a branch in library file Create a page from template Integrate finalized design Draft API Obtain API feedback Compose anatomy and layers Apply visual style Create configurable variants Configure nested components Create visual test cases Create usage examples Update dependent assets Descriptions and metadata Anatomy and naming Property combinations Content (text/images) flow
 Layout resizing Visual style variation, modes Composition in situ Composition of slots Varying nested configurations Behaviors Common overrides With assigned designer(s) With assigned developer(s) With system team With design community With key adopting team(s) By assigned developer(s) By assigned designer(s) By community designer(s) By design lead Final edits Write changelog Merge branch (Publishable) Figma asset Start Make Test Share Review Deliver You plan Figma assets?

Slide 57

Slide 57 text

production Design Production Publish Design doc Figma asset Code © Copyright 2024 • Directed Edges LLC Plan Design Spec Figma asset / Collaborative moments after handoff Handoff Role Design Developer Product/project Content Specialist “Multiple assignee” Drafts Models, outlines, ... Code doc

Slide 58

Slide 58 text

© Copyright 2024 • Directed Edges LLC Figma asset / Architect Figma components without building them Figma Props panel components

Slide 59

Slide 59 text

© Copyright 2024 • Directed Edges LLC Figma asset / Architect Figma components without building them ESDS Card Mode Light Size Medium Action(s)? Custom areas None Card Container Type Primary State Initial Card Image Aspect ratio 16:9 Aspect ratio Cover Card Text Metadata? Description? Card Actions Variant Single Button Figma Props panel components Designers Developers

Slide 60

Slide 60 text

© Copyright 2024 • Directed Edges LLC Figma asset / Explore API alternatives ESDS Card Mode Light Size Medium Action(s)? Custom areas None Card Container Type Primary State Initial Card Image Aspect ratio 16:9 Aspect ratio Cover Card Text Metadata? Description? Card Actions Variant Single Button ESDS Card Contained? Custom areas None Action(s)? Container Surface Light primary State Initial Image Aspect ratio 16:9 Text Size Medium Metadata? Description? Actions Variant Button Size Medium Should subcomponents include Card in the name? Nathan Curtis At what level do we expose surface color? Nathan Curtis Is description shown or hidden by default? Nathan Curtis Figma Props panel components API explorations Alternative 1 Alternative 2 Alternative 3 Are actions required, and is that exposed at the top level? Nathan Curtis

Slide 61

Slide 61 text

© Copyright 2024 • Directed Edges LLC Create a branch in library file Create a page from template Integrate finalized design Draft API Obtain API feedback Compose anatomy and layers Apply visual style Create configurable variants Configure nested components Create visual test cases Create usage examples Update dependent assets Descriptions and metadata Anatomy and naming Property combinations Content (text/images) flow
 Layout resizing Visual style variation, modes Composition in situ Composition of slots Varying nested configurations Behaviors Common overrides With assigned designer(s) With assigned developer(s) With system team With design community With key adopting team(s) By assigned developer(s) By assigned designer(s) By community designer(s) By design lead Final edits Write changelog Merge branch (Publishable) Figma asset Start Make Test Share Review Deliver You test Figma assets?

Slide 62

Slide 62 text

© Copyright 2024 • Directed Edges LLC Figma asset / Testing 1. Metadata 1.1 Name Is it named consistently with code and web-based documentation? 1.2 Namespace Is it namespaced as ESDS-? 1.3. Description Does it include a one sentence introduction and any important "Use Whens? 1.4 Status Is status up-to-date with commensurate code version (X.X.X) and stability (Stable vs Experimental)? 2. Anatomy 2.1 Layer name Are element names consistent with specification and code? 2.2 Layer Are layer names formatted as actual names in sentence case, not “Frame ###”? 2.3 Layer shorthand Are naming conventions applied, such as using space between (]-[) for layers applying only autolayout or emoji for indicators like edi 2.4 Nested component names Are nested components named descriptively (such as Dismiss Icon) instead of nested component's default name (Icon)? 2.5 Default visiblity Are layers shown or hidden appropriately, including layers within hidden layers? 3. Color 3.1 Color accuracy Are background, text, and stroke colors applied accurately?? 3.2 Color styles Is every fill, stroke, solid color and gradient color applying a color style instead of a hardcoded value, when possible? 3.3 Color specificity Is each style applying the most semantically specific (Text > Link > On Dark) instead of generic (Palette > Blue > 50) style? 3.4 Hardcoded properties Where a hardcoded value is used, has it been discussed and agreed upon? 3.5 Buried Colors Are "buried" hardcoded colors - applied to shadow effects and other non-styled locations - applied accurately? 4. Text 4.1 Text styles Is each text layer associated with a defined text style? 4.2 Non-text style properties Are properties not styles - list style, vertical alignment, and horizontal alignment - accurately applied or omitted? 5. Properties 5.1. Property names Are properties named and formatted correctly? 5.2. Property order Are properties ordered sensibly, such as by priority, alphabetical, related sets, or documented order across components? 5.3. Option names Are property options named and formatted correctly? 5.4. Option order Are options ordered correctly, such as by scale order ( small then medium then large) or alphabetical? 5.5. Default option Diam quis enim loborti scelerxq. Cras semper auctor neque vitae. Quis amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna molestie at elementum eu. Sit amet consectetur adipiscing elit duis tristique. Eget felis eget nunc lobortis mattis aliquam A Custom Link Label {Title} {Details} {Button} {Title} {Label} C o n t e n t C o l l i s i o n W R O N G C O N T E N T M I S S I N G C O N T E N T

Slide 63

Slide 63 text

© Copyright 2024 • Directed Edges LLC Workflow / All the checklists, oh my! https://bit.ly/ds-tasks-and-subtasks

Slide 64

Slide 64 text

© Copyright 2024 • Directed Edges LLC Workflow / What does your team need, now? ⚠️ Let’s discuss ︎ We aren’t doing this (for now) We do this

Slide 65

Slide 65 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Design and code libraries ?

Slide 66

Slide 66 text

© Copyright 2024 • Directed Edges LLC Design and code libraries / Libraries? Yup, lots of ‘em Figma has become the single, central tool most systems for ... ...and it’s common for a design system to implement across two, three or even more code libraries for . designers developers

Slide 67

Slide 67 text

© Copyright 2024 • Directed Edges LLC How many code libraries implement the components? What is each built with? framework What support each one? team(s) How is each with the design team? connected Are releases or released independently? synced Design and code libraries / Multi-library alignment

Slide 68

Slide 68 text

Vue Svelte Web components IBM.com © Copyright 2024 • Directed Edges LLC Design and code libraries / IBM Carbon (circa 2022) React Angular 6 5 3 2 3 3 ~4 2 1 1 1 4 ~15-20 1 1 1 1 ~6 ~70 ~40 ~50 ~20 ~20 ~20 Vanilla Age (YearS) Core maintainers Contributors (1+ year) Light Contributors (Fixes, small things) Numbers derived from github.com data

Slide 69

Slide 69 text

© Copyright 2024 • Directed Edges LLC Design and code libraries / Common models 1 Figma library 3 Code libraries 1 Dev team (integrated) 1 Figma library 3 Code libraries 3 Dev teams (integrated) 1 Figma library 3 Code libraries 1 Dev team (integrated) 2 Dev teams (independent) 1 Figma library 1 Code library 1 Figma library 0 Code libraries A B C D E CSS CSS Angular Web components React or Angular or Web components React iOS Android React iOS Android

Slide 70

Slide 70 text

© Copyright 2024 • Directed Edges LLC Design and code libraries / Common models A B C D E Connectedness Synced releases Library parity Shared rituals

Slide 71

Slide 71 text

© Copyright 2024 • Directed Edges LLC Design and code libraries / Describe and link to changes... Version history April 24, 2024 j Added dismissible property, layout and spacing and X icon buttoƒ j Updated Basic Type color variables from generic values to new Alert / Basic semantic variables View Updates

Slide 72

Slide 72 text

© Copyright 2024 • Directed Edges LLC Design and code libraries / ...that highlights changes

Slide 73

Slide 73 text

Sprint Code Feature iOS L I B R A R Y VQA Sprint Code Android L I B R A R Y VQA Design and code libraries / Multi-framework dashboard {##} {##} {Component} Done Done Done Done {##} {##} {Component} Done Done Done Done {##} {##} {Component} Done Done Done Done {##} {##} {Component} Done Done Done Done {##} {##} {Component} Done Done Done Done {##} {##} {Component} Done Done Done Done {##} {##} {Component} Done Done Done Done {##} {##} {Component} Done Done Done Done {##} {##} {Component} Done Done Done In review {##} {##} {Component} Done Done Done In review {##} {##} {Component} Done Done Done In progress {##} {##} {Component} Done Done Done In progress {##} {##} {Component} Done Done In progress Ready to start {##} {##} {Component} Done Done In progress Ready to start {##} {##} {Component} Done Done In progress Ready to start {##} {##} {Component} Done Done Ready to start Not yet started {##} {##} {Component} Done Done Ready to start Not yet started {##} {##} {Component} Done Done Ready to start Not yet started {##} {##} {Component} Done Done Not yet started Not yet started {##} {##} {Component} Done Done Not yet started Not yet started {##} {##} {Component} Done Done Not yet started Not yet started Core team Library team

Slide 74

Slide 74 text

Sprint Code Feature iOS L I B R A R Y VQA Accessibility Sprint Code Android L I B R A R Y VQA Accessibility Design and code libraries / Multi-framework dashboard {##} {##} {Component} Done Done Done Done Done Done {##} {##} {Component} Done Done Done Done Done Done {##} {##} {Component} Done Done Done Done Done Done {##} {##} {Component} Done Done Done Done Done Done {##} {##} {Component} Done Done Done Done Done Done {##} {##} {Component} Done Done Done Done Done Done {##} {##} {Component} Done Done Done Done Done Done {##} {##} {Component} Done Done Done Done Done Done {##} {##} {Component} Done Done Done Done In review In progress {##} {##} {Component} Done Done Done Done In review In progress {##} {##} {Component} Done Done Done Done In progress Ready to start {##} {##} {Component} Done Done Done Done In progress Ready to start {##} {##} {Component} Done Done Done In progress Ready to start Not yet started {##} {##} {Component} Done Done Done In progress Ready to start Not yet started {##} {##} {Component} Done Done Done In progress Ready to start Not yet started {##} {##} {Component} Done Done Done Ready to start Not yet started Not yet started {##} {##} {Component} Done Done Done Ready to start Not yet started Not yet started {##} {##} {Component} Done Done Done Ready to start Not yet started Not yet started {##} {##} {Component} Done Done Done Not yet started Not yet started Not yet started {##} {##} {Component} Done Done Done Not yet started Not yet started Not yet started {##} {##} {Component} Done Done Done Not yet started Not yet started Not yet started Third team

Slide 75

Slide 75 text

Sprint Code Feature iOS L I B R A R Y A P P I n t e g r at i o n VQA Accessibility Sprint Status Release Code Android L I B R A R Y A P P I n t e g r at i o n VQA Accessibility Status Release What app PdMs care about What app PdMs care about Design and code libraries / Multi-framework dashboard {##} {##} {##} {##} {Component} Done Done Done Done Done Done Done Done {##} {##} {##} {##} {Component} Done Done Done Done Done Done Done Done {##} {##} {##} {##} {Component} Done Done Done Done Done Done Done Done {##} {##} {##} {##} {Component} Done Done Done Done Done Done Done Done {##} {##} {##} {##} {Component} Done Done Done Done Done Done Done Done {##} {##} {##} {##} {Component} Done Done Done Done Done Done Done Ready to start {##} {##} {##} {##} {Component} Done Done Done Done Done Done Done Ready to start {##} {##} {##} {##} {Component} Done Done Done Done Done Done Done Ready to start {##} {##} {##} {##} {Component} Done Done Done Done Done In review In progress Not yet started {##} {##} {##} {##} {Component} Done Done Done Done Done In review In progress Not yet started {##} {##} {##} {##} {Component} Done Done Done Done Done In progress Ready to start Not yet started {##} {##} {##} {##} {Component} Done Done Done Done Done In progress Ready to start Not yet started {##} {##} {##} {##} {Component} Done Done Done Done In progress Ready to start Not yet started Not yet started {##} {##} {##} {##} {Component} Done Done Done Done In progress Ready to start Not yet started Not yet started {##} {##} {##} {##} {Component} Done Done Done Done In progress Ready to start Not yet started Not yet started {##} {##} {##} {##} {Component} Done Done Done Done Ready to start Not yet started Not yet started Not yet started {##} {##} {##} {##} {Component} Done Done Done Done Ready to start Not yet started Not yet started Not yet started {##} {##} {##} {##} {Component} Done Done Done Done Ready to start Not yet started Not yet started Not yet started {##} {##} {##} {##} {Component} Done Done Done Done Not yet started Not yet started Not yet started Not yet started {##} {##} {##} {##} {Component} Done Done Done Done Not yet started Not yet started Not yet started Not yet started {##} {##} {##} {##} {Component} Done Done Done Done Not yet started Not yet started Not yet started Not yet started

Slide 76

Slide 76 text

Product team 2 Product team 3 Product team 4 Product team 5 Product team 6 Product team 7 Product team 8 Product team 9 Product team 1 © Copyright 2024 • Directed Edges LLC Design and code libraries / No code library

Slide 77

Slide 77 text

© Copyright 2024 • Directed Edges LLC Takeaway Design systems without code have value. They just aren’t yet reaching full potential. What to do Make specs available to all teams Work with developers bottom-up anyway Pounce on moments of major change Wait for leaders to rotate in/out Design and code libraries / No code library

Slide 78

Slide 78 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Releases ?

Slide 79

Slide 79 text

© Copyright 2024 • Directed Edges LLC Releases / Releases Release Publishing libraries of and to people to use them. design and/or code assets and/or docs communicating changes

Slide 80

Slide 80 text

© Copyright 2024 • Directed Edges LLC Releases / Release plan Plan Design Specification Code Code docs Figma asset Design docs Card Partial takeover 2024 08 2024 09 2024 10 2024 11 2024 12 Secondary accents New icons Error messaging Elevation tokens Bottom sheet FEATURE Filter menu Task Release

Slide 81

Slide 81 text

Features Tasks © Copyright 2024 • Directed Edges LLC Releases / Doneness matrix Used with permission, Target Corporation

Slide 82

Slide 82 text

© Copyright 2024 • Directed Edges LLC Releases / Releases board Release Release Release Doneness, by Task

Slide 83

Slide 83 text

© Copyright 2024 • Directed Edges LLC Releases / Communication cycle Week –2 Week –1 Release week Release announcement Release day Scope Draft Copy final Images final VQA Slack (Design) Slack (Dev) Email

Slide 84

Slide 84 text

© Copyright 2024 • Directed Edges LLC Releases / Orchestration Week –2 Week –1 Release week “Go live” Release announcement Documentation site content Design assets Code packages Code tools (Storybook) Documentation site Design tools, plugins Figma library content Slack (Design) Slack (Dev) Email Doc site version history Doc site blog Version history Sticker sheet Comp. descriptions Handoff sheet

Slide 85

Slide 85 text

© Copyright 2024 • Directed Edges LLC Releases / Orchestration Week –2 Week –1 Release week “Go live” Release announcement Documentation site content Design assets Code packages Code tools (Storybook) Documentation site Design tools, plugins Figma library content Slack (Design) Slack (Dev) Email Doc site version history Doc site blog Version history Sticker sheet Comp. descriptions Handoff sheet 54 Asana subtasks (pre)assigned individually, every release

Slide 86

Slide 86 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Initiatives ?

Slide 87

Slide 87 text

© Copyright 2024 • Directed Edges LLC Initiatives / Initiative Scope and it’s related tasks that drive towards specific outcomes and outputs to solve a problem, often within a period of time.

Slide 88

Slide 88 text

© Copyright 2024 • Directed Edges LLC Initiatives / Example Initiative Modality outcome Teams can implement diverse modal behaviors within web and native experiences to quickly inform, gather data from and progress users through complicated workflows. Outputs Partial takeover Dialog v2 UX Pattern(s) Playground(s) Training Key adopter integrations Elevation tokens Modal v2 Bottom sheet

Slide 89

Slide 89 text

© Copyright 2024 • Directed Edges LLC Initiatives / Types INITIATIVE Token taxonomy PROBLEM STATEMENT Tokens organization is poor. We can use Figma features, light and dark mode, or theming. Outcomes {z Refactor deeper token taxonom uz Align token names with commun fz Implement across all componen OUTPUTS {z Revised token taxonomk uz Figma theming approach and st fz Code integration across catalog INITIATIVE Web / native parity # PROBLEM STATEMENT Components across platforms are inconsistent with many gaps. # Outcomes {z Identify components needed across ALL platform uz Normalize names, anatomy, and props across platforms OUTPUTS {z Evolved component codeÜ uz Single Figma source-of-trutÌ fz Consolidated docs INITIATIVE Dev support PROBLEM STATEMENT Adopting developers don’t get help fixes turned around fast enough. Outcomes {z Help requests resolved 50% fast uz Fixes deployed 25% faster OUTPUTS {z Improved service desk docs, communications and workflo0 uz Improved routing of incidents fro support to sprint workflow and b INITIATIVE Feature development # PROBLEM STATEMENT Our feature catalog lacks and new and fixed features and must evolve to support the business. # Outcomes More UI components and visual foundations features are available, expanding the catalog and maintaining trust in the program. OUTPUTS {z Component code package uz Figma UI components and style fz Documentation per features including guidelines, code API and example wz Communications per release INITIATIVE Composability # PROBLEM STATEMENT Popular components require core team work to make isolated changes to support team-specific use cases. # Outcomes {z Key components afford much more flexible compositioË uz Teams deliver experiences with less reliance on system tea× fz System team support costs and irregular release demands go down OUTPUTS {z List / Row component upgradç uz Card component upgradç fz Training with playground file wz Evolved docs and usage demos INITIATIVE Theming # PROBLEM STATEMENT # {z Data visualization palette as token uz Figma components for 5+ chart fz Build your own Figma charts guidance and reference demos INITIATIVE Designer onboarding PROBLEM STATEMENT Designers lack resources to learn a apply the design system in day to d INITIATIVE Designer onboarding # PROBLEM STATEMENT Designers lack resources to learn and apply the design system in day to day work with confidence. # Outcomes {z Designer new hires can attend recurring live trainin„ uz Designers self-serve to learn the design system without live trainin„ fz Designers are better equipped to handoff work clearly to developers

Slide 90

Slide 90 text

© Copyright 2024 • Directed Edges LLC Initiatives / Attributes INITIATIVE Token taxonomy PROBLEM STATEMENT Tokens organization is poor. We can use Figma features, light and dark mode, or theming. Outcomes ~} Refactor deeper token taxonom x} Align token names with commun i} Implement across all componen OUTPUTS ~} Revised token taxonomn x} Figma theming approach and st i} Code integration across catalog INITIATIVE Web / native parity # PROBLEM STATEMENT Components across platforms are inconsistent with many gaps. # Outcomes ~} Identify components needed across ALL platform“ x} Normalize names, anatomy, and props across platforms OUTPUTS ~} Evolved component codeß x} Single Figma source-of-trutÏ i} Consolidated docs INITIATIVE Dev support PROBLEM STATEMENT Adopting developers don’t get help fixes turned around fast enough. Outcomes ~} Help requests resolved 50% fast x} Fixes deployed 25% faster OUTPUTS ~} Improved service desk docs, communications and workflo0 x} Improved routing of incidents fro support to sprint workflow and b INITIATIVE Feature development # PROBLEM STATEMENT Our feature catalog lacks and new and fixed features and must evolve to support the business. # Outcomes More UI components and visual foundations features are available, expanding the catalog and maintaining trust in the program. OUTPUTS ~} Component code package“ x} Figma UI components and style“ i} Documentation per features including guidelines, code API and example“ w} Communications per release INITIATIVE Composability # PROBLEM STATEMENT Popular components require core team work to make isolated changes to support team-specific use cases. # Outcomes ~} Key components afford much more flexible compositioË x} Teams deliver experiences with less reliance on system tea× i} System team support costs and irregular release demands go down OUTPUTS ~} List / Row component upgradç x} Card component upgradç i} Training with playground file“ w} Evolved docs and usage demos INITIATIVE Theming # PROBLEM STATEMENT # ~} Data visualization palette as token“ x} Figma components for 5+ chart“ i} Build your own Figma charts guidance and reference demos INITIATIVE Designer onboarding PROBLEM STATEMENT Designers lack resources to learn a apply the design system in day to d INITIATIVE Designer onboarding # PROBLEM STATEMENT Designers lack resources to learn and apply the design system in day to day work with confidence. # Outcomes ~} Designer new hires can attend recurring live trainin„ x} Designers self-serve to learn the design system without live trainin„ i} Designers are better equipped to handoff work clearly to developers Initiatives are described via content including: Problem statement Outcomes Outputs Opportunities Risks Stakeholders Steps Delivery Plan

Slide 91

Slide 91 text

© Copyright 2024 • Directed Edges LLC Initiatives / Gather structured stakeholder input Summarize data to generalize preferences How many stakeholders? 10+? 25+?

Slide 92

Slide 92 text

© Copyright 2024 • Directed Edges LLC Initiatives / More about roadmapping https://www.youtube.com/watch?v=4MpGxmlOf7w&t=768s

Slide 93

Slide 93 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Roadmap ?

Slide 94

Slide 94 text

INITIATIVE Feature development # PROBLEM STATEMENT Our feature catalog lacks and new and fixed features and must evolve to support the business. # Outcomes More UI components and visual foundations features are available, expanding the catalog and maintaining trust in the program. OUTPUTS w Component code packagek z Figma UI components and stylek e Documentation per features including guidelines, code API and examplek — Communications per release INITIATIVE Web / native parity # PROBLEM STATEMENT Components across platforms are inconsistent with many gaps. # Outcomes w Identify components needed across ALL platformk z Normalize names, anatomy, and props across platforms OUTPUTS w Evolved component code» z Single Figma source-of-trut« e Consolidated docs INITIATIVE Charts # PROBLEM STATEMENT The system lacks robust data visualization foundations and starting points to create charts easily. # Outcomes w Extend visual foundations to support data viz, especially colo2 z Enable teams to easily add and customize chart components ( like B ar) with reusable parts ( like Axis) OUTPUTS w Data visualization palette as tokenk z Figma components for 5+ chartk e B uild your own Figma charts guidance and reference demos INITIATIVE Composability # PROBLEM STATEMENT Popular components req uire core tea work to make isolated changes to support team-specific use cases. Outcomes w K ey components afford much mo flexible compositioj z Teams deliver experiences with le reliance on system teav e System team support costs and irregular release demands go dow OUTPUTS w List / R ow component upgrad† z Card component upgrad† e Training with playground filek — Evolved docs and usage demos © Copyright 2024 • Directed Edges LLC R oadmap / " All the w ork" +

Slide 95

Slide 95 text

INITIATIVE Feature development # PROBLEM STATEMENT Our feature catalog lacks and new and fixed features and must evolve to support the business. # Outcomes More UI components and visual foundations features are available, expanding the catalog and maintaining trust in the program. OUTPUTS w Component code packagek z Figma UI components and stylek e Documentation per features including guidelines, code API and examplek — Communications per release INITIATIVE Web / native parity # PROBLEM STATEMENT Components across platforms are inconsistent with many gaps. # Outcomes w Identify components needed across ALL platformk z Normalize names, anatomy, and props across platforms OUTPUTS w Evolved component code» z Single Figma source-of-trut« e Consolidated docs INITIATIVE Charts # PROBLEM STATEMENT The system lacks robust data visualization foundations and starting points to create charts easily. # Outcomes w Extend visual foundations to support data viz, especially colo2 z Enable teams to easily add and customize chart components ( like B ar) with reusable parts ( like Axis) OUTPUTS w Data visualization palette as tokenk z Figma components for 5+ chartk e B uild your own Figma charts guidance and reference demos INITIATIVE Composability # PROBLEM STATEMENT Popular components req uire core tea work to make isolated changes to support team-specific use cases. Outcomes w K ey components afford much mo flexible compositioj z Teams deliver experiences with le reliance on system teav e System team support costs and irregular release demands go dow OUTPUTS w List / R ow component upgrad† z Card component upgrad† e Training with playground filek — Evolved docs and usage demos © Copyright 202 4 • Directed Edges LLC R oadmap / The accountable owner’s question What’ s going on with our big bets?

Slide 96

Slide 96 text

© Copyright 2024 • Directed Edges LLC Roadmap / Board Impact Active initiatives Inactive initiatives Size (Discovery) Tasks Features give way to Initiative Initiative

Slide 97

Slide 97 text

Plan Design Specification Code Code docs Figma asset Design docs Card Partial takeover 2024 08 Feature development 2024 09 Web & native parity 2024 10 Token taxonomy 2024 11 Modality 2024 12 API alignment Accessibility upgrade 2 Charts Composability Theming Dev support upgrade Designer onboarding Secondary accents New icons Error messaging Elevation tokens Bottom sheet Modal v2 FEATURE Filter menu Task Release INITIATIVES © Copyright 2024 • Directed Edges LLC Roadmap / Relating initiatives, releases and features

Slide 98

Slide 98 text

© Copyright 2024 • Directed Edges LLC How do we produce in a of tasks like delivered via across and organized on a , all visible and tracked on Boards?

Slide 99

Slide 99 text

© Copyright 2024 • Directed Edges LLC Boards / Summary Dev React Dev iOS Design Releases Roadmap Backlog Tasks Tasks Tasks Features Initiatives Features, Initiatives includes includes How are (React) devs progressing right now? includes include includes includes How are (iOS) devs progressing right now? How are designers progressing right now? What will be delivered by when? How are big bets progressing? OBJECT What might we do, eventually? Board answers

Slide 100

Slide 100 text

Board Releases Release MM/DD Release MM/DD Release MM/DD Release MM/DD Release MM/DD Board Backlog Board Roadmap Board Dev React To be prioritized Plan Ready to start In progress In review Board Design To be prioritized Plan Ready to start In progress In review © Copyright 2024 • Directed Edges LLC Boards / Rituals anchored on boards Planning 1x / week or every other week Dev Standup 2x / week Design Standup 2x / week Attendees Dev manager (driver) All developers Product manager? Attendees Product manager (driver) Dev manager Dev lead(s) Design manager Design lead(s) Attendees Design manager (driver) All designers Product manager

Slide 101

Slide 101 text

© Copyright 2024 • Directed Edges LLC Boards / Bucketing "To be prioritized" Discuss in planning When something comes up (request, proposal, complaint, ...), where do we put it to make sure we talk about it? PROBLEM Discuss in design standup

Slide 102

Slide 102 text

© Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Board Dev Board Design To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name}

Slide 103

Slide 103 text

© Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Defect Defect

Slide 104

Slide 104 text

© Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Defect Defect Design-specific Dev-specific Trafficer Trafficer

Slide 105

Slide 105 text

© Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Defect Defect Design-specific Dev-specific Relevant to dev and design Trafficer Trafficer

Slide 106

Slide 106 text

© Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Assign Assign Slot & scope Defect Defect Design-specific Dev-specific Relevant to dev and design Trafficer Trafficer

Slide 107

Slide 107 text

© Copyright 2024 • Directed Edges LLC Boards / Intake Design Intake Dev Intake Board Releases Support request Board Dev Board Design Board Backlog Support request Feature request Contribution proposal Feature request Contribution proposal To be prioritized To be prioritized Plan Plan Ready to start Ready to start In progress In progress In review In review {Release name} To be prioritized {Release name} {Release name} {Release name} Assign Assign Respond and archive Slot & scope Refine and store Defect Defect Design-specific Dev-specific Relevant to dev and design Trafficer Trafficer

Slide 108

Slide 108 text

© Copyright 2024 • Directed Edges LLC How do we produce Features in a of tasks like delivered via across and organized on a , all visible and tracked on Releases Workflow Design and code libraries Plan Design Spec Code Figma asset Initiatives Roadmap Boards?

Slide 109

Slide 109 text

© Copyright 2024 • Directed Edges LLC Thanks!