Bootcamp

Design
Operations
Design Ops é vivência
Não existe fórmula mágica...

+ Mais processos e mindset

- Menos ferramentas
Fundamentos

Planejamento
Design
Ops
Desenvolvimento

Manutenção
e Cultura
“ Aumentar e melhorar a escalabilidade do produto,
gerando assim maior receita para a empresa,
produtividade para as equipes e maior satisfação dos
clientes por entregar um produto mais consistente."
DesignOps
3 pilares Performance e
Pessoas
carreira

Consistência e Design
Estratégia e
Processos
Escalabilidade
Prioridades
Engenharia Visão

Branding

Design System
Mindset Equipe Cargo
 “ DesignOps pode operar em escala
empresa, quanto a nível de projeto ou
produto."
Aumentar o valor e a eficiência do design,
trabalhando em conjunto com lideranças de
Produto, Tecnologia e User Experience

Time de design como um todo, squad

ou equipe dedicada a Operations

Design Systems
E qual a função do
DesignOps?
https://www.nngroup.com/articles/design-operations-101/
DesignOps, Design Strategy
ou Design Leadership?
“ ...First from a person in a role perspective, there can be no difference at all.
DesignOps is a collection (a large one) of activities. If a Design Manager can
manage their current scale of needs, then it is the same person.
This is akin to a small startup hiring a generalist designer who can do their own
research, visual design, coding, IA, and IxD. But as the organization grows, they may
start seeing value in separating some of those activities out one by one."

https://medium.com/amplify-design/ask-me-anything-designops-edition-d06fa42693d4
 Brennan Hartich
Design Ops Leader, Intuit

Função

Responsabilidades
 1.P 2.P 3.P

Pessoas Processos Prioridades

1.P Pessoas
Recrutamento (match de cultura)

Suporte e apoio (trabalho em equipe)

Carreira (desenvolver habilidades)
Liderança (feedback, mentoria, ambiente saudável...)

Capacitação (eventos, treinamentos - interno e externo)

2.P Processos
Onboarding

Reuniões e eventos
Documentos e recursos de design
Wikis e playbooks

Ferramentas

Design System
3.P Prioridades
Alinhamento entre lideranças e equipes
Comunicação estratégica com o time

Gestão de prioridades
Gestão de recursos

Gestão de tempo
“ DesignOps é contexto e será diferente de uma empresa
para outra. E o foco de DesignOps dentro de uma única
organização pode mudar à medida que os desafios
evoluem."
 DesignOps

O que é O que não é

Fundamentos

Planejamento
Style
guide
Desenvolvimento

Manutenção
e Cultura
 O conceito de style guides não é algo novo...

https://sservi.nasa.gov/wp-content/uploads/2011/10/NASA_Style_Guide_v2.1.pdf (1976)
 Por definição é um documento físico ou digital
que representa os estilos, padrões, práticas
e princípios de uma empresa ou marca.
Fundamentos

Planejamento
Pattern
library
Desenvolvimento

Manutenção
e Cultura
 "É um conjunto organizado de componentes
relacionados e reutilizáveis, geralmente contendo
exemplos de código, diretrizes de design e casos
de uso."
Representação técnica
Representação conceitual
Modelos de página para
documentação
#ficaDica

“ O que documentar é mais importante

do que aonde documentar"
Fundamentos

Planejamento
Design
system
Desenvolvimento

Manutenção
e Cultura
Apesar dos termos serem relativamente atuais,
DesignOps e Design System não são algo novo...
Então porque estamos dando tanta
atenção agora?
 Airbnb

“ Sem um Design System, o processo de desenvolvimento

de software torna-se gradualmente mais lento e a
Design experiência dos usuários sofre de inconsistências

Systems
crescentes."

IBM

“ O mercado de software requer que o desenvolvimento seja

cada vez mais rápido e melhor, mas sem padrões bem
definidos, cada nova entrega escala ainda mais
inconsistências."
Vantagens do processo:

Mais velocidade do protótipo até a feature efetivamente

implementada (time mais estratégico).

Mais agilidade para fazer modificações em features já

existentes.

Maior consistência de identidade e interface.

Melhor alinhamento em equipe e colaboração entre as

áreas de produto e desenvolvimento.
Na teoria...
 É um conjunto de padrões interconectados e práticas
compartilhadas, coerentemente organizadas para alcançar o
objetivo de produtos digitais.
Na prática...
Entregáveis
~ Kari Saarinen
 Design System

Visual + Documentação + Código

Designers Designers, Desenvolvedores Desenvolvedores
e Gerentes de produto, etc..

Linguagem universal entre design, tecnologia e produto

 Design System Operations

O Produto O Serviço

Planejamento
Documentação
Gestão do produto
Princípios de design
Roadmap
UI Kits
Suporte e
Pattern library
comunicação
UI components
Governança
Templates
Desenvolvimento
Fundamentos

Planejamento
Acessi
bilidade
Desenvolvimento

Manutenção
e Cultura
"Hoje eu refleti sobre uma coisa, como eu
posso me considerar Senior sendo que eu
não sei o básico sobre acessibilidade?"
- Product Designer de uma consultoria global

Baixar pdf completo da apresentação

Fundamentos Antes de
Planejamento

iniciar um
Design
Desenvolvimento

Manutenção
e Cultura

System
 1. Se questione

Realmente preciso de um Design System?

Quais os problemas que isso pode resolver?
Além da consistência visual é importante saber os
benefícios do Design System...

Para o usuário
Para os desenvolvedores e P.Os
Para os designers
E para a empresa
 2. Faça um planejamento

Defina o escopo inicial (MVP)

Quem serão os envolvidos (o time)

Como será o processo de entregas (sprints?)

Stakeholders (feedbacks)

Roadmap (o quê e quando)

 3. Venda a ideia
Defina quem precisa estar presente na reunião,
principalmente os decisores e possíveis
apoiadores da ideia.
Você
Você

"Por quê a gente precisa disso?"

"Em quanto tempo vai ficar pronto?"

"Vai dar muito trabalho..."

 Está tudo bem,
nós não estamos sozinhos.
Fundamentos

Planejamento
Modelos
de times
Desenvolvimento

Manutenção
e Cultura
 Modelos de times,
para escalar o Design System.

Solitário Centralizado Distribuído

Solitário
Um determinado time de produto define
as regras do design system, mas com os
esforços focados primariamente nas
necessidades do seu produto.
Centralizado
Um único time produz e fornece suporte
ao design system, que é utilizado pelos
outros como parte do seu trabalho.
Distribuído
Designers de variados times de produto
decidem em conjunto sobre o que entra
ou não no design system.
 Cíclico
(Centralizado + Distribuído)
Fundamentos

Planejamento
Time e
Desenvolvimento
responsa
bilidades
Manutenção
e Cultura
 E o papel de O time de DS
Ops

Design - Visual, arquitetura de informação, experiência do usuário, interações...

Engenharia - Visão e conhecimento técnico de desenvolvimento, componentes...

Liderança e gerenciamento de prod. - Habilidades para estabelecer visão, os objetivos,

organizar roadmaps, monitorar a adoção e organizar backlogs...

Especialidades - UX writing, accessibility, performance, SEO...

 Beleza, vendeu a ideia?

Mão na massa!

Lembrando que tudo isso que fizemos até agora vem

antes de iniciar o Design System

Problema | Planejamento | Venda

Fundamentos

Planejamento
Princípios
de design
Desenvolvimento

Manutenção
e Cultura
“ Alguns princípios simples ou perguntas construtivas
guiarão sua equipe nas tomadas de decisões."

https://principles.design/
Salesforce
#ficaDica

“ Pense em princípios que sejam

mensuráveis
Restrito / Flexível

System Principles
Modular / Integrado
 Airbnb
https://www.smashingmagazine.com/design-systems-book/

Restrito Flexível

Modular Integrado
 TED
https://www.smashingmagazine.com/design-systems-book/

Restrito Flexível

Modular Integrado
 FutureLearn
https://www.smashingmagazine.com/design-systems-book/

Restrito Flexível

Modular Integrado
Fundamentos

Planejamento
Componen
tização
Desenvolvimento

Manutenção
e Cultura
 Design e engenharia,
falando a mesma língua.
Atomic Design
...e na prática?
Como isso funciona?
High Low High
Fundamentos

Planejamento
Design
tokens
Desenvolvimento

Manutenção
e Cultura
J
J
 “ Design Tokens são entidades
que armazenam atributos visuais.
J
 Controle visual sobre as
plataformas do produto

Tokens

Javascript Sass iOS Android

 Objeto

Tipografia Hello

Color Font Button

objeto + semântica + variação
color brand primary

color-brand-primary
Reuso de tokens

button-cta-secondary-color = color-brand-primary
Fundamentos

Planejamento
Auditoria
visual
Desenvolvimento

Manutenção
e Cultura
#ficaDica

“ O inventário não herda problemas"

Fundamentos

Planejamento

Desenvolvimento
Roadmap
Manutenção
e Cultura
 Nathan Curtis

A design system is a product: it has users, roadmaps, releases,

features, maintenance, bugs, documentation and support."
~Yaili de León (Microsoft)
Fundamentos

Planejamento
Design Ops
Toolkit
Desenvolvimento

Manutenção
e Cultura
Fundamentos

Planejamento
Work
flows
Desenvolvimento

Manutenção
e Cultura
https://medium.com/eightshapes-llc/system-features-step-by-step-e69c90982630
 Workflow
Design System Review
Consistência / Princípios / Estresse do fluxo / Alinhamento / Dores
 Workflow
Novo componente
 Como
Fundamentos

Planejamento

Desenvolvimento
identificar
componentes
Manutenção
e Cultura
Kari Saarinen: https://vimeo.com/262959714
Fundamentos

Planejamento
Gover
nança
Desenvolvimento

Manutenção
e Cultura
Governança é um conjunto de boas
práticas (metodologias, métodos,
processos, gestão, etc), com intuito de
garantir controles, minimizar riscos,
ampliar o desempenho, otimizar a
aplicação de recursos, orientar as
decisões, apoiar o crescimento
acelerado (escala) e também a
transformação do negócio.

- Definição adaptada de www.up2place.com.br

 Dia a dia
DesignOps

- Guilda de Design System. - UI Labs.

- Guilda de Acessibilidade. - Design System Review.

- Apresentação de Venda do - Reviews com foco em B2C e B2B.

Design System. - Organização de eventos e workshops.
- Treinamentos Acessibilidade. - Gestão de ferramentas e acessos.
- Apresentação do Fluxo de - Participação nos chapters de front-end.
trabalho do Design System.
- Alinhamento e apoio ao marketing.
- Design Critique.
- Apoio a times da empresa.
Fundamentos

Planejamento

Desenvolvimento

Manutenção
ROI
e Cultura
https://uxdesign.cc/how-to-measure-design-system-impact-guide-f1f9f0c3704f
 Ideias de mensuração
Design System
Mapeamento de % de entrega componentizada
- Planilha listando os componentes utilizados por tela, junto com o time de front.

- Front com planilha de % de elementos componentizados em seu fluxo, por tela.

- Mapeamento automático via Lighthouse ou manual, via planilha.

Mapeamento de % de adoção dos times

- Mapeamento da instalação da lib de desenvolvimento e uso.

Métricas de evangelização
- Organizar 1x workshop por Quarter

- Escrever um artigo sobre Design System nos canais da empresa.

 Ideias de mensuração
Design System

Subjetiva Objetiva
Usuário final: NPS sentindo o impacto - Tempo de carregamento da página;
das mudanças, como consistência e - DS tem uma lib de componentes?
acessibilidade na experiência.
- DS tem uma documentação robusta?

- DS tem um processo?
Usuário interno: Formulário com
- DS segue boas práticas de acessibilidade?
perguntas sobre adoção e processo.
- Linhas de códigos removidas
Ex. em uma escala de 1 a 5, como o DS
- Uso de tokens
melhora o seu fluxo de trabalho?
- Adoção por parte dos times
https://medium.com/tap-to-dismiss/a-design-systems-impact-159f4ad3c230
"Tome decisões pelo
bem do negócio, não
pelo seu ego."
designopslab
.com