Zilla: Criação de um Design System escalável em um produto com milhões de acessos

Um pouco do nosso processo de criação do nosso Design System na Quero Educação.

Transcript

2. Criação de um Design System escalável em um produto com milhões de acessos
3. Quem sou eu Danilo Vaz Front-End Developer @_danilovaz
4. Quem somos
5. + 600 funcionários + 5 unidades + 3 cidades (incluindo Fortaleza <3) + 55 milhões de acessos + 165k de alunos quero (alunos com bolsas da Quero) + 1.3bi de economia para os alunos quero + 2x Y Combinator + Entre as 40 empresas Endeavor do Mundo + Entre as 50 startups com maior impacto na américa latina + Entre as 100 maiores startups Y Combinator (única brasileira na lista ao lado de Rappi, Airbnb, Dropbox) + Empresa certificada Great Place to Work Quem somos
6. Se a educação somos nós, onde podemos chegar?
7. #temosvagas http://que.bo/vagas
8. Design System Vamos falar de Design System
9. Como podemos construir um Design System escalável? Objetivo
10. Comece pequeno Objetivo
11. Como Engenharia e Design levaram à criação do Zilla? Objetivo
12. Por onde começar?
13. Por onde começar
14. Style Guide ! == UI Lib ! == Design System Por onde começar
15. Consistente Analítico Assertivo Simples Flexível Escalável Princípios Jovem Fácil Transparente Confiante Flexível Escalável Voz e Tom Por onde começar
16. Onde estamos
17. Métricas Métricas do site atual
18. Métricas Tipografia
19. Métricas Cores únicas
20. Métricas Declarações de cores
21. Onde queremos chegar
22. 74 patterns na lib de Design; 74 patterns nas libs de Front; Onde estamos Onde queremos chegar 54 patterns na lib de Design; 14 patterns nas libs de Front; Métricas
23. Como o caminho começou separado para se unificar depois? Por onde começar
24. Como trocar o pneu do carro com ele em movimento? Desafio
25. Fazer a empresa ver o Design System como um produto e não um projeto Desafio
26. Fazer o time de engenharia e o time de design ver valor no Design System Desafio Engenharia Design Design System Negócio
27. “Design System” não é um nome tão apropriado e acaba gerando ruído entre os times de produto como um todo Desafio
28. “Design System” é uma solução de engenharia para um problema de design Desafio
29. “Design System” serve ao negócio ou produto específico e gera impacto em toda empresa, não só nos times de tecnologia Desafio
30. Desafio É preciso ter sinergia entre o Design Ops e o Front-End responsável por implementar e evangelizar o Design System na empresa
31. Desafio É preciso ter parceria para focar nos desafios técnicos, que são muitos, porém bem mais fáceis de se resolver do que os problemas não técnicos
32. O que temos de pacotes hoje
33. zilla-core Pacotes
34. zilla-vue Pacotes
35. zilla-dictionary Pacotes
36. zilla-icons Pacotes
37. zilla-cli Pacotes
38. zilla-react* (futuro) Pacotes
39. Não são repositórios diferentes. Utilizamos um mono-repositório Pacotes
40. O desafio é versionar o Design System na parte de design Pacotes
41. Como estamos trabalhando hoje
42. Métricas
43. storybook
44. Design System 600 colaboradores =
45. Se o design system somos nós, onde podemos chegar?
46. Dúvidas? #temosvagas http://que.bo/vagas
47. Obrigadx