TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho de design empoderando o mindset e os objetivos das DevOps.
2 gostaram•440 visualizações
- 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
TDC2018SP | Trilha UX Design - Design Operations (DesOps) - mapear o trabalho de design empoderando o mindset e os objetivos das DevOps.
- 1. Design Operations. Processos de Design robustos, escaláveis mantendo altos níveis de criatividade.
- 2. Emiliano
- 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
- 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
- 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?
- 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.