Design System y su organización de equipo y de carga de trabajo

1. IN MY
OPINION…
TEAMS & WORKFLOW IN DESIGN SYSTEMS

2. IN MY
OPINION…

3. Visual UX Visual
DSL Design Team

4. Visual UX Visual
DSL Design Team DSL Dev Team
Dev Dev Dev Dev

5. DSL Team?
Visual UX Visual Dev Dev Dev Dev

6. DSL Product Team
ResearchLead QA ScrumVisual UX Visual Front-end Arch. Front-end Arch.Front-end Front-end

7. THE
WORKFLOW

8. Discovery Prototype Validate Build
QA
Doc Publish Adoption
Measure success

9. Prototype ValidateDiscovery
Identify squad needs
Jira issues
Survey study
Squad interviews
User research
Audit Front end architecture
Identify adhoc components needs
Set security requirements
Research UX
Team Support & Management
Lead ScrumFront-end Arch.
Identify the impact
Do we already have solutions for that problem inside the system?
What is the impact cross squads of the problem?
How the users are getting arround the problem today?
Is it a Squad problem or is it an organization cross platform problem?
Which is the most suitable technology to build components based apps?
Which are the custom components needed for this project?
Which security policies and systems are implemented in the organization and is required to comply with?

10. Prototype Validate Build
QA
Doc Publish Adoption
Measure suc
Research UX
Team Support & Management
Lead ScrumFront-end Arch.
Insight
Low fidelity archifact creation to fix the problem
Setup engine for token generation
Develop prototype atom components
Initial version of component catalog and tooling
Visual Front-end

11. Validate Build
QA
Doc Publish Adoption
Measure success
Team Support & Management
Lead ScrumResearch
Squads &User validation
Present the solution to a group of people and listen to their reaction and feedback.

12. Build
QA
Doc Publish Adoption
Measure success
QA Checklist
#1 Visual Quality
#2 Su!cient States &Variations
#3 Responsiveness
#4 Content Resilience
#5 Composability
#6 Functionality
#7 Accessibility
#8 Browsers &Device Compatibility
Research UX
Team Support & Management
Lead ScrumFront-end Arch.Visual Front-endQA
Build &Iterate
Produce a high fidelity solution
Create the Design Token architecture
Develop Web Components consuming Tokens
Web Components Catalog
Components builder, Components Generator, Demo environment
Set up of a npm private registry to host components and dependencies

13. Doc Publish Adoption
Measure success
Focus on communicatiom
Design documentation.
Code/example demonstrations.
Compose illustrations, interactive demos, and screenshots.
Components documentation
Training &Workshop materials
Certification guides
Research UX
Team Support & Management
Lead ScrumFront-end Arch.Visual Front-endQA

14. Publish Adoption
Measure success
Platform release
Migrating DOC to the publishing platform.
Uploading assets like images, design templates, and interactive demos.
Finalizing live code/example demos.
Testing page display, links, and other publishing QA.
Web Component catalog release
Private npm registry instance release
UX
Team Support & Management
Lead ScrumFront-end Arch. Front-endVisualQA

15. Adoption
Measure success
Support & Management
Lead ScrumResearch UX Dev
Team
Measuring Design System Success
% Components Adoption
% Squad interest in critiques, review sessions, etc.
% Feedback
% of certified Squad-developed components
OKRs to Set Goals &Track Progress
- Objective: Where do we want to go?
- Key Result: How will we see if we are getting there?
Enforce adoption
Release presentation meeting (Provide all new documentation)
Answer questions channel (DSL Team availabe for squads)
Overcomunicate (Newsletter, Talks, Presentation)
Github or similar new issues channel
Training and workshops
Evangelization
Certification of Squad-developed components

16. Adoption

17. Adoption
Distribution Tooling
Education System
The design language and UI
components
The fun stuff!
Streamline how people use the
system
- Sketch plugins
- VScode plugins
- Component Catalog
Automating release and
communication of updates
- Deploying npm private registry
- Slack
- Invision DSM
Helping people use the system better
- Docs
- Guidelines
- Onboard training
- Component certification criteria
- Workshops

18. AREN’T
STEPS A
WATERFALL?

19. Discovery Prototype Validate Build
QA
Doc Publish Adoption
Measure success

20. Discovery Prototype Validate Build
QA
Doc Publish Adoption
Measure success

21. Discovery Prototype Validate
Build
QA
Doc Publish
Adoption
Measure success

22. Track 1 Discovery
Delivery Backlog Sprints DSL Release Sell Release
Publish Adoption
Adoption
DocBuild
Discovery Backlog Design Team Kanban
ValidatePrototypeDiscovery
Validated Ideas
Track 2 Delivery

23. 0%
25%
50%
75%
CAPACITY
Adoption time
commitement
DSL TEAM time
commitement
VisualVisual UXLead Research ScrumQA
A A A A A A A
Front-end Arch. Front-end Front-end Arch. Front-end

24. THE
CRACKING
MONOLITH

25. Fundamentals
Components
Templates
Pages

26. Fundamentals
Components
Templates
Pages
Design
System
S
PP P
Product

27. Design
System
S
PP P PPPP P P
Product

28. Fundamentals
Components
Templates
Pages

29. B
CountryBrand
Design
System
S
P P
5
Platform
Tools
P
3
B
M
asterBrand
Design
System
S
Speci!c
DSL
BrokerApps
S P
30
StandarProduct
P
Brazil
P
M
X
P
UK
B
CountryBrand
Design
System
S
P
Spain
B
Corporate
Brand
P
5
Adm
in
Consoles
P
5
Content&
M
edia
ProductA
P
M
edia
ProductB
P
Content
ProductC
P
5
Platform
Tools
Design
System
S
B
Division
Brand
P
15
Custom
Stes
Micro Design Systems: Breaking the Monolith

30. THANKS!