- Figma - Sketch - Adobe XD - Invision Prototyping: - Framer - Principle - Origami - ProtoPie Design System: - Craft - Pattern Lab - Frontify - Style Dictionary Colaboração: - Zeplin - Avocode - Abstract - Invision Studio Documentação: - Styleguide.io - Storybook - Document Up - Readme 49 Ferramentas de Design D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

1. Design Operations.
Processos de Design robustos, escaláveis
mantendo altos níveis de criatividade.

2. Emiliano

3. e sou um
Designer!

4. Timothy Morey
Designers são os otimistas, que vêem o mundo como uma gama de
oportunidades que podem ser criadas e direcionadas à própria vontade.

5. 1989 - 1996 Internship (estagio)

6. Milan - NY - London Early 2000

7. Helsinki 2008

8. E M I L I A N O C H I N C H E L L I · T D C 2 0 1 8
Artek project team
DEV
VDIXD
DEV
VDIXD UX
Creative
Technologist
Creative
Director
Content
Designer
RSC
DD
SD
Complementary Profiles
Interaction
Designer
IXD
▪Design Framework
▪Automated Ui to Frontend
▪Quick Prototyping
▪Sequential Releases
8 weeks beta launch
User Interface
Designer
UI
D E S I G N O R G A N I Z AT I O N · D E S I G N T E A M

9. Helsinki 2010

10. E M I L I A N O C H I N C H E L L I · T D C 2 0 1 8
The Nokia Perks Design
User Interface
Designer
User Interaction
Designer
UI IXD
MERCHANT SQUAD
DEV
VDIXD
DEV
VDIXD
UX
Researcher Design
Director
Service
Designer
RSC DD SD
SERVICE SQUAD
User Interface
Designer
User Interaction
Designer
UI IXD
CLIENTS SQUAD
FrontEnd
Developer
FE
FrontEnd
Developer
FE
FrontEnd
Developer
FE
FrontEnd
Developer
FE
Lead
Technologist
LT
Nokia Delivery Team Design Studio
D E S I G N O R G A N I Z AT I O N · P R O D U C T T E A M

11. E M I L I A N O C H I N C H E L L I · T D C 2 0 1 8
The Nokia Perks Dev Team
Dev
Des
▪Technology team based in India
▪Design team in Finland
▪Pilot market UK
▪Approval process - 6 Business Units
32 Months Alpha launch
MKT
PROJECT CANCELED
D E S I G N O R G A N I Z AT I O N · P R O D U C T T E A M

12. Design de Experiancia é sobre
criar oportunidade
Não podemos projetar experiências como uma entidade (um coisa por si só)
mas podemos projetar as condições para a experiência que queremos
proporcionar.
Design Ops permite que você coloque foco onde
realmente importa.

13. Como escalar o time de Design e
continuar tão criativo e bold quanto
um coletivo de criatividade?
Reduzindo o trabalho redundante
Mantendo as pessoas motivadas e focadas
Minimizando frustrações
Mantendo a linguagem consistente
Encantando os usuários

14. A estrutura da sua empresa
O Design está alinhado à estrutura de
tecnologia, engenharia e marketing
ou está sob essas funções?

15. Designers não são todos iguais
Invista tempo para aprender o conjunto de
habilidades que define os papéis e
responsabilidades da equipe de design.
Seu departamento de RH está
preparado?

16. Time multidiciplinar

17. Design é ágil por sua natureza
Adaptar-se à mudança está no Design; construa sua
capacidade visando a possibilidade de manobra acima
da velocidade.
Uma organização ágil tem um modelo operacional
altamente produtivo que reconfigura de forma fluida em
direção a oportunidades que criam valor, ao mesmo
tempo que envolvem e fortalecem as pessoas.

18. Design Operations (DesOps)
As capacidades de Design são estruturas
complexas, compostas de muitos elementos,
que precisam ser planejados com cuidado.

19. CL
DSL
POL
TL
QAL
ACL
PRODUCT TRIBE
Product 1
PO
UI
IXD
DEV
QA
Center of
Excellence
AC
CEOCTOBM
The modern Company Structure
OPERATIONS TRIBE
Product 2
PO
UI
IXD
DEV
QA
AC
Product 3
PO
UI
IXD
DEV
QA
AC
4 4 4
OP 1
PO
DEV
QA
AC
3
UX
Core
PO
DEV
QA
AC
3
UX
Finance &
ERP
PO
DEV
QA
AC
3
UX
HR
Legal & Finance
LAW FIN ACC
Specialists
xxx xxx xxx
COOCMO
ARC
MKTMKT MKT
Marketing
CMO - Chief Marketing Officer
BM - Brand Manager
BA - Business Analyst
Design
CL - Chapter Lead
UI - User Interface
IXD - Interaction Design
RSC - Researcher
GD - Graphic Designer
SD - Service Designer
Technology
CTO - Chief Technology Officer
DEV - Developer
QA - Quality Assurance
ARC - Architect
Agile
AC - Agile Coach
SEO - Search Engine Optimization
Product
PO - Product Owner
SM - Social Media
Comercial
SASA CCOCCO - Chief Comercial Officer
SA - Sales Analyst
xxx
DOp
DOp - Dev Ops
Advanced analytics
DS
SUPPORT
CL
2
3
CDO - Chief Design Officer
CDO

20. Squads
CEOCTOBM
The Company Structure - Center of Excellence
HR
Legal & Finance
LAW FIN ACC
Specialists
Marketing
CMO - Chief Marketing Officer
BM - Brand Manager
BA - Business Analyst
Design
CL - Chapter Lead
UI - User Interface
UX - User Experience
RSC - Researcher
GD - Graphic Designer
SD - Service Designer
Technology
CTO - Chief Technology Officer
DEV - Developer
QA - Quality Assurance
ARC - Architect
Agile
AC - Agile Coach
SEO - Search Engine Optimization
Product
PO - Product Owner
SM - Social Media
Comercial
CCO - Chief Comercial Officer
SA - Sales Analyst
DOp - Dev Ops
Advanced analytics
DS
SUPPORT
CL
CL
Center of Excellence
Customerinsights
Community
GD SD
Content
RSC
MI
Customer Analytics
ACQ CONMKT
- Continuously innovate and pursue future-looking strategies
- Build processes that review quality backlogs while shipping good product
- Empower Executive Designers to inspire team with new inputs
- Inspire Design and System Leads to test new patterns
- Evolve the spirit of the brand, tone and copy in a coherent fashion
Design CoE guides alignment of all this within an organization.
DSL
xxx xxx xxx xxx

21. E M I L I A N O C H I N C H E L L I · T D C 2 0 1 8
The Dual Track - Discovery / Delivery
DISCOVERY TRACK
2 Sprints ahead
• Focused on preparing stories
• UX team work to design
layouts and prototypes
DELIVERY TRACK
• Current Sprint
• Focused on delivering
stories made clear through
prototypes
• UX team work to support
devs
DISCOVERY TRACK
DELIVERY TRACK
D E S I G N O R G A N I Z AT I O N · D E S I G N O P E R AT I O N S

22. D E S I G N O R G A N I Z AT I O N · D E S I G N O P E R AT I O N S
“Escalar o design por meio da contratação de designers, sem colocar padrões em
prática, é um mito. A cada nova contratação, novas idéias para paletas de cores,
tipografia e padrões aparecem no produto, aumentando a inconsistência e
aumentando o custo de manutenção. Cada novo contratado aumenta a entropia de
design. ”
“Design é escalável. Mas só é possível com um Design System.”Design scales. But it scales only with a design system.
@Marcin Treder, CEO | UXPin
SOURCE: UXPIN

23. Quando escalamos, cada nova demanda pode levar ao caos
26
Cada nova ideia, time, pessoa, projeto, aumenta o caos do processo e desacelera o trabalho.
Time Produto
!
!!
!!
!
!
New Styles,
Patterns, Ideas…
New team,
hire, ideas
New Styles,
Patterns, Ideas…
New ideas,
project
New project,
ideas, hire
New ideas,
project
!!!
Tempo de desenvolvimento do produto
!
D E S I G N O R G A N I Z AT I O N · D E S I G N S Y S T E M

24. Falta de consistência
no design pode ser um dos maiores
problemas de um serviço.

25. Sobre a inconsistência do Design
28
PROBLEMAS PARA FAZER O
ONBOARDING DE DESIGNERS
1
A introdução de novos designers e
desenvolvedores em um sistema
não documentado é super difícil.
DESACELERAÇÃO DO
PROCESSO DE DESIGN
2
Tudo é criado a partir do zero, a
falta de elementos modulares e
reutilizáveis atrasa o fluxo de
trabalho dos designers.
DESACELERAÇÃO DO
DESENVOLVIMENTO
3
Redução da velocidade de
desenvolvimento devido ao baixo
número de componentes
totalmente reutilizáveis.
EXPERÊNCIA CONFUSA E
NÃO ATRAENTE
4
O usuário fica confuso e desmotivado
devido à falta de padrões apresentados,
perdendo a atenção e muitas vezes
abandonando a experiência.
Equipes mais lentas devido à falta de organização e
processo simplificado.
Não alcançar o momento “WOW”.
A felicidade do usuário diminui.
Waterfall e ambiente não
colaborativo
D E S I G N O R G A N I Z AT I O N · D E S I G N S Y S T E M

26. Um sistema de design pode apresentar e conter todos os
princípios de design e marca, bases visuais, componentes
e padrões de uso totalmente documentados.
Todas as referências de código incluídas corretamente
para cada elemento e padrão de interface.
Como resultado, o design e o código juntos
compartilham o papel que impulsiona o desenvolvimento
e o crescimento de produtos.
29
O que o Design
System tem e faz?
D E S I G N O R G A N I Z AT I O N · D E S I G N S Y S T E M

27. Quais são os benefícios do Design System?
30
Coerência - SEMPRE Elementos reutilizáveis
Performance e foco no
serviço
Conhecimento
compartilhado
! ! !!
!
D E S I G N O R G A N I Z AT I O N · D E S I G N S Y S T E M

28. Modularidade e Escalabilidade
31
Identificar Organizar Criar e Escalar
D E S I G N O R G A N I Z AT I O N · D E S I G N S Y S T E M

29. Design System
O Deisgn System não é um Style Guide
Nem um repositório estático de assets
O Design System é processo e é dinâmica.

30. O Design System é baseado em e pilares:
Framework
unificado de Design
Digital
O Design para
construir Workflow

31. • Foco em princípios, conteúdo, linguagem visual, componentes
e recursos de Kit e Código UI / UX.
• Concentre-se nos comportamentos de navegação dos
produtos.
34
Shopify Polaris
Design System
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

33. • Foco no produto, branding e marketing.
• Concentre-se nos comportamentos de navegação dos
produtos.
• Vai além do produto, abordando conteúdo, data e navegação.
36
Intuit - Harmony
Design System
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

35. D E S I G N O R G A N I Z AT I O N · D E S I G N O P E R AT I O N S
Eis a simples verdade: não é possível inovar em produtos sem
primeiro inovar a maneira como você os cria.
@Karri Saarinen, Principal Designer and creator of Airbnb design system

36. D E S I G N O R G A N I Z AT I O N · D E S I G N O P E R AT I O N S
• Tenha uma visão clara para alinhar esforços;
• O ideal é que este trabalho não seja resolvido por
apenas uma pessoa;
• Colaboração e alinhamento entre diferentes áreas;
• Pense grande, mas comece peça por peça;
• Seja super organizado;
• Nada está escrito na pedra!

37. Crafted Design Framework
Um Framework de Design planejada pode acelerar os
Sprints em até 40% do tempo gasto sem Design System.

38. D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S
- Multidisciplinary Team -
Alinhando Esforços

39. 42
Meet the (DesOps) Team
UX
BM
UI
UIL DEV
DESIGN SYSTEM LEAD FRONT END DEVELOPER
USER EXPERIENCE
AND INTERFACE
DESIGNER
BRAND MANAGER
AND
CUSTOMER
EXPERIENCE OFFICER
CXO
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

40. D E S I G N O R G A N I Z AT I O N · D E S I G N O P E R AT I O N S
- Design Principles, UX/Ui Explorations, Workflow -
Criar, Alinhar & Decidir

41. O que nossa equipe deve ter em mente ao projetar, desenvolver, decidir
ou planejar?
Os Princípios de Design podem ser uma ferramenta excelente e útil para
colocar toda a equipe na mesma página com valores compartilhados.
Quais são os objetivos deste sistema? Melhor qualidade para o produto?
Mais bonito? Estabelecer consistência entre pontos de contato?
Melhores interações? Implementação mais rápida? Acessibilidade na
interface do usuário?
Discuta e liste os princípios de design!
45
Crie seus
Princípios de Design
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

42. Menos M.V.P. e mais R.A.T.
É a mentalidade que você precisa abraçar para inovar.
Be bold, get comfortable with uncertaintie!

43. Riskiest Assumption & Test
Existe uma falha no coração do termo Produto Mínimo
Viável: Não é um produto.
Em vez de construir um MVP identifique sua
suposição e Teste

44. Definindo e unificando as direções visuais
As Artboards de moodboards (ou boards de inspiração) geralmente se
encaixam no processo em algum lugar após wireframes e antes de
mockups de design.
Leve ou Robusto? dinâmico ou estático? Escuro ou claro? Placas de
humor representam as qualidades pretendidas de uma marca ou
apenas ilustram um certo sentimento ou estética que será perseguido
no projeto. Eles servem como um pontapé inicial para o alinhamento
entre todos os membros da equipe e incluem orientações sobre:
tipografia, elementos de interface do usuário, cores, iconografia,
ilustração, fotografia, animações e microinterações.
48
Explorations UI/UX
Moodboards 👍
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

45. Hoje em dia existem muitas opções de ferramentas de design voltadas
para a criação de interfaces, praticamente todas as semanas são
lançadas novidades, plugins, integrações, novas ferramentas etc ...
A seguir apresentamos algumas ferramentas e integrações, que em
nossa visão ajudam muito em o processo de criação de design e um
sistema de design.
49
Conheça
as ferramentas
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S
Sketch Illustrator Abstract invision Marvel Zeplin Jyra
Ai

46. D E S I G N O R G A N I Z AT I O N · D E S I G N O P E R AT I O N S
- Shared Library Design System Creation -
Design + Código
!

47. Design + Código. Ótimos Amigos
A partir das decisões tomadas pela equipe durante a criação do Design System,
muitos guias e documentos detalhados são gerados e compartilhados como uma
necessidade por designers e desenvolvedores, a fim de facilitar a compreensão
do que está sendo projetado.
No entanto, esse processo muitas vezes acaba dando errado ou torna-se muito
complicado devido a vários motivos, como tempo gasto, localização diferente
entre equipes, processo em cascata e não dinâmico, falta de direção e visão do
produto, entre outros.
Para melhorar esse processo, os designers e desenvolvedores devem colaborar
regularmente e procurar focar na criação de uma biblioteca compartilhada
contendo o idioma da interface, o repositório e a apresentação da arquitetura
de código usada no projeto.
52
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

48. Em vez de delegar uma pessoa para criar documentações, com o
sistema de design, planejamos um novo fluxo de trabalho que continue
adicionando, subtraindo e modificando todas as informações
necessárias para criar as experiências do usuário.
Ele fornece uma visão clara para alinhar os esforços, permitindo
conduzir decisões com princípios de design e reunir designers,
engenheiros e gerentes de produto.
É um sistema vivo que precisa evoluir com o tempo.
53
Design System
Workflow
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

49. D E S I G N O R G A N I Z AT I O N · D E S I G N O P E R AT I O N S
- Interact & Validate -
Planejamento de Sprints
!

50. Criando um plano pro
Design System
Criar um roteiro para o seu Design System não precisa ser exaustivo.
Juntamente com sua equipe, através das rotinas de trabalho, definimos:
“Estamos trabalhando nisso agora (para esta semana), o próximo (para o
próximo mês) e a outra coisa em breve…”
Um roteiro permite:
• Compromisso de entrega de valor, justificando o investimento feito
• Prioridades transparentes, alinhamento claro entre os membros da equipe
• Cria cadência, define o ritmo do trabalho
• Hora de antecipar mudanças, prevendo possíveis erros
57
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

51. D E S I G N O R G A N I Z AT I O N · D E S I G N O P E R AT I O N S
- Implementar, Testar & Evoluir -
Métricas de Sucesso
!

52. Success Criteria
Design System Rating
• Como o Design System está agora e como está sendo aplicado
• Quão fluidos os fluxos de trabalho de Design e Dev são
• Como a estratégia do produto se manifesta por meio do design da experiência
Product Experience Rating
• Quão reconhecidas como boas são as experiências?
• Como os clientes estão avaliando a experiência?
Time to Design and Develop
• Taxa na qual as alterações são projetadas / desenvolvidas (mantendo-se
consistentemente)
• Taxa na qual novas ideias são testadas
59
D E S I G N O R G A N I Z AT I O N · O P E R AT I O N S

53. Aqui estão quatro etapas que ajudarão na implementação do DesOps:
1.Designe alguém para assumir a responsabilidade pelo DesOps. Eles podem ser um diretor de
design, um designer Lead ou um diretor de produto
2. Avalie a estrutura existente do negócio. Trabalhe com equipes de design, produto e
desenvolvimento para idenQficar como elas poderiam ser alinhadas.
3. Revise seu soTware de design, ferramentas e práQcas de trabalho. Eles estão aptos para o
propósito e consistentes em toda a empresa?
4. Comece com um projeto. Ele oferece a você a oportunidade de testar e repeQr seu sistema
incipiente e envolver a gerência e as equipes com essa nova maneira de trabalhar.
A eficiência operacional é primordial e o DesOps não é apenas uma tática de curto prazo,
mas uma solução essencial e de longo prazo.

54. Much Love.Emiliano Chinchelli