Design Thinking

Aula sobre a importância do UI/UX nos times ágeis no contexto de das construções de aplicações digitais ministrada para os alunos do 7º período do curso de Sistema da Informação da Uninassau

Transcript

1. Design Thinking Sistema da Informação | 7º período
2. Olá, sou Wagner Profissional de Tecnologia da Informação com foco no Design de Produtos Digitais. #design #agilidade #usabilidade #acessibilidade 2 Fale comigo: http:/ /sumo.pe
3. Introdução O que é ou o que faz o Designer? Acesse: https://www.menti.com/e1xzszjme7 ou aponte a câmera do celular para o código QR ao lado. 3
4. Índice 1. Apresentação …………………………………………………………………………………………………………………………… 3 2. Introdução ………………………………………………………………………………………………………………………...……... 4 3. Mundo Mobile ………………………………………………………………………………………………………………………….. 5 4. Design Thinking ……………………………………………………………………………………………………………………….. 14 a. Definição ……………………………………………………………………………………………………………………….. 15 b. Etapas …………………………………………………………………………………………………………………………… 19 i. Empatia ……………………………………………………………………………………………………………… 23 ii. Definição ………………………………………………………………………………………………………….… 43 iii. Ideação ……………………..……..……..……..……..……..……..……..……..……..……..……..……..…….. 58 iv. Prototipação .……………………………………………………………………………………………………... 73 v. Testes .………………………………………………………………………………………………………………… 80 vi. Implementação ………………………………………………………………………………………………...… 85 5. Agradecimentos ……………………………………………………………………………………………………………………….. 87 4
5. 5 Resultado da Pesquisa “O que é o que faz o Designer? 14 pessoas participaram na pesquisa e responderam:
6. O que é um Designer? Profissional que desempenha a atividade especializada de caráter técnico-científico, criativo e/ou artístico para elaboração de projetos passíveis de serialização ou industrialização e que atendam, tanto no aspecto de uso quanto no aspecto de percepção, a necessidades materiais e de informação visual. É um agente que “especifica as propriedades estruturais de um objeto de design”. Profissional que trabalha na criação esquemática de um produto. 6 Fonte: Wikipédia
7. Experiência X Interface! 7 UX Pesquisa Protótipos Etnografia Personas Objetivos UI Design Visual Tipografia Cores Layouts Design System
8. Outros ramos de atuação do Designer UX Research 8 UX Writer Design Estrategista Design Ops Design de Produto Ícones: Flaticon
9. Atuação do Designer na construção de soluções digitais 9
10. Mundo mobile 10
11. Aplicações mobile: receitas comerciais Cerca de 11,4 milhões de brasileiros dependem de aplicativos para ter uma renda. Em fevereiro de 2020 - ou seja, antes do início da pandemia de Covid-19 -, essa fatia era de 13%. • 34% citaram os apps de redes sociais, como o Facebook, e 33%, os de mensagens, como o WhatsApp; • 26% recorrem a tecnologias de vendas online, como Mercado Livre e Magazine Luiza; • 14% às de entrega, caso de Rappi, iFood e Uber Eats. 11 Fonte: CNN Brasil
12. Relato da Pandemia Como pai de família, entrei em desespero. A gente sabe que arrumar um trabalho é complicado. Minha única solução foi começar a trabalhar com aplicativo. — Weidson, pai de duas meninas, uma de 9 anos e outra de 2. 12 Fonte: CNN Brasil
13. 10 apps mais baixados na Play Store em Março 2022 1. WhatsApp 2. Messenger 3. TikTok 4. Facebook 5. Instagram 13 6. ShareIt 7. Like Video 8. UC Browser 9. Biugo 10. Disney+/Hotstar Fonte: Os 10 Melhores Aplicativos Android 2022: Os Mais Baixados até Agora
14. Aplicação prática: Design Thinking 14
15. O que é Design Thinking 15 É uma abordagem que busca propor soluções de problemas de forma coletiva colaborativamente, em uma perspectivas de empatia máxima com seus stakeholders (interessados): as pessoas são colocadas no centro do desenvolvimento de produtos - não somente o consumidor final, mas todos os envolvidos na ideia. A primeira informação que deve ficar clara é que não é uma metodologia, e sim uma abordagem. Com essa abordagem “humana” e focada em resolver problemas, o design thinking pode ser utilizado nos mais diversos segmentos de negócios.
16. 16 É um processo de pensamento crítico e criativo que permite organizar as informações e ideias, tomar decisões, aprimorar situações e adquirir conhecimentos. — Charles Burnette Fonte: Charles Burnette | O Futuro do Design Thinking
17. 17 A História por trás do Design Thinking Tim Brown é CEO e sócio da IDEO — uma das maiores consultorias de design no mundo. Designer por formação, Brown e David Kelley, professor da Universidade Stanford (Palo Alto, Califórnia, EUA) e fundador da IDEO, foram responsáveis pela metodologia design thinking. Fonte: Tim Brown - Designers, pensem grande!
18. 18 Segundo Tim Brown, em seu TED nomeado como “Designers – Pensem Grande” As necessidades humanas são o ponto de partida, a metodologia de design thinking rapidamente passa a aprender criando. Ao invés de pensar o que construir, construir para pensar. Protótipos aceleram o processo de inovação. Porque apenas quando liberamos nossas ideias para o mundo que começamos a compreender suas forças e fraquezas. Quanto mais cedo fizermos isso, mais rapidamente nossas ideias evoluem.
19. Etapas da abordagem 19
20. 20 A essência do Design Thinking FASE 1 IMERSÃO FASE 2 IDEAÇÃO FASE 3 PROTOTIPAÇÃO
21. Vaca Doida 1. Cite características da vaca (o que é, o que ela dar, o que ela faz) 2 minutos - Ex. se fosse uma galinha, o que ela faz? Ela dá ovo! 2. Tenha ideias de negócios com as características citadas antes 2 minutos - Fuja do óbvio! Não tenham medo de parecer ridículo! Ex.: delivery de ovos com galinhas de jetpack 3. Compartilhe suas ideias com o time e criem uma solução única que represente todo mundo 4 minutos 21
22. A Galinha Doida Empatia: “O cliente herdou uma granja com 1 000 galinha e não sabe o que fazer com elas” Definição: Coloca ovos; Pode servir de carne; Utilizar as penas e ossos para algo; Ideação: Ovos pintados artesanalmente; Delivery de ovos com galinhas de jetpack; Frota de carro de ovo pintado; Ovos únicos para malabarismo; Kinder Ovo com pintinhos de verdade. Prototipação: Barraca itinerante que comercializa ovos pintados, ovos de malabares, kinder ovo com pintinhos e que seja divulgada por galinhas com jetpack. 22
23. Design Thinking Empatia (imersão) 23 É o momento de levantar todas as informações possíveis e obter uma visão geral do cliente, mapeando suas dores, expectativas e aspirações
24. 24 Design Thinking: “Imersão Profunda” DIZEM PENSAM FAZEM USAM SABEM SENTEM SONHAM ENTREVISTAS OBSERVAÇÕES SESSÃO GENERATIVA EXPLÍCITO OBSERVÁVEL TÁCITO LATENTE TÉCNICAS O QUE AS PESSOAS CONHECIMENTO SUPERFÍCIE PROFUNDIDADE
25. Imersão Pesquisa Desk 25
26. Imersão: Pesquisa Desk (ou de mesa) O QUE É? Desk Research baseia-se em dados secundários: informações que são coletadas a partir de pesquisas feitas para outros projetos, por outras pessoas. COMO FAZ? “dar um Google” RESULTADO ESPERADO Reunir informações de documentos já existentes para adquirir conhecimento sobre o “desafio”. 26
27. Imersão Pesquisa Quali/Quanti 27
28. Imersão: Pesquisa Qualitativa/Quantitativa O QUE É? É um método de pesquisa durante o qual um pesquisador faz perguntas aos usuários sobre um tópico de interesse (por exemplo, uso de um sistema, comportamentos e hábitos) COMO FAZ? Formulário compartilhado para diversas pessoas ou uma conversa com um ou mais usuário. RESULTADO ESPERADO Aprender sobre as dores do usuário. 28
29. Imersão Matriz CSD 29
30. Imersão: Matriz CSD O QUE É? Serve como ponto de partida para pensarmos abertamente sobre o desafio proposto. COMO FAZ? A matriz é preenchida em conjunto com todos da equipe e pode ser revisitada/alterada durante todo o desenvolvimento do projeto. RESULTADO ESPERADO Levantar e alinhar as Certezas (o que já sabemos), Suposições (o que supomos, mas não temos certeza e precisamos confirmar) e Dúvidas (o que precisamos descobrir, quais perguntas precisamos fazer) sobre o desafio dos clientes ou do público de estudo no projeto. 30
31. DÚVIDAS SUPOSIÇÕES Exemplo Matriz CSD CERTEZAS Concursos públicos exigem muito preparo Há muitos sites e aplicativos sobre o assunto Os editais são longos e com uma linguagem complexa Há muito benefícios financeiros atrelados Os candidatos raramente são aprovados na primeira tentativa Não existe distinção por raça, gênero ou idade para ingressar O excesso de conteúdo disponível prejudica a organização? Dificuldade de gerenciar os estudos com as demais atividades A falta de foco faz muito desistirem rápido? Concurseiros são atraídos pela estabilidade financeira e profissional? Muitos são guiados pelo impulso: adquirem materiais sem planejamento? Editais são difíceis de entender? Estão dispostos a pagar por uma solução? Estudam sozinhos ou em grupo? Quantas horas estudam por dia? Como escolhem qual concurso prestar? Onde e como buscam conteúdo de estudo? Costumam reprovar por não terem tempo suficiente para estudaram? Fonte: Preparação para concursos públicos — Um case de UX Research 31
32. Imersão Benchmarking 32
33. Imersão: Benchmarking O QUE É? Benchmarking é um termo de negócios cujo significado — e possível tradução para o português — seria Análise de Competidores. COMO FAZ? Escolha os principais concorrentes do mercado para analisar e compare os resultados, visualizando os pontos positivos e negativos. RESULTADO ESPERADO Coletar informações que ajudarão nas tomadas de decisões. 33
34. Necessidades Quais necessidades atendem? Benefícios Quais benefícios oferece? Experiência Como é a experiência? Tecnologia Qual tecnologia é utilizada? Benchmarking: Possíveis características analisadas 34
35. Imersão Mapa de Empatia 35
36. Imersão: Mapa de Empatia O QUE É? É utilizado para detalhar a personalidade do usuário e compreendê-la melhor. COMO FAZ? O mapa da empatia faz 6 perguntas para identificar seu público-alvo e assim conhecer seus sentimentos, dores e necessidades. RESULTADO ESPERADO Adentrar na mente do seu público-alvo, compreender o que ele deseja e, assim, oferecer uma solução mais adequada. 36
38. Imersão Personas 38
39. Imersão: Personas O QUE É? Persona é o termo que define a personificação do comprador do seu produto, reunindo características, hábitos, desejos e objeções. É quase como criar um personagem baseado em informações reais para “dar um rosto” ao perfil de pessoas que consome seu produto. COMO FAZ? Esse personagem deve ter nome, idade, história pessoal, motivações, sonhos, objetivos, desafios e preocupações, como se fosse de verdade. RESULTADO ESPERADO Tornar as decisões sobre o produto mais seguras, baseadas na realidade. 39
40. Persona: características Nome e imagem: Coloque um nome e faça um desenho dessa persona. Dados demográficos: Cite alguns dados como idade, sexo, onde ela mora, onde trabalha, formação técnica e renda. Comportamentos: Como ela se comporta geralmente? Como ela se relaciona com o tema? Quais são as suas crenças? Necessidades/Metas: Quais são as necessidade, metas e objetivos da persona com o tema ou na vida. 40
41. 41 Fonte: Agência Sumô
42. 42 Fonte: Agência Sumô
43. Design Thinking Definição 43 É dedicada à definição do problema a partir das informações coletadas. Esse processo deverá ser realizado em equipe, para chegar ao problema central do consumidor a partir de várias hipóteses e perspectivas.
44. O que devo perguntar para definir o problema? 44 Uma das formas de definir um problema é respondendo essas perguntas: 1. Qual é a questão principal que você está tentando resolver e por que ela é importante? 2. Para quem isso é um problema? 3. Que fatores sociais/culturais moldam esse problema? 4. Quais evidências você possui para mostrar que esse problema vale o investimento? 5. Você consegue pensar nesse problema de uma maneira diferente? Você consegue reformulá-lo?
45. Dicas para definição do problema 45 1. Olhe o problema de diversos ângulos. 2. Observe pontos de vista diferentes. 3. Apresente fatos que ajudem a configurar o problema. 4. Não encare um problema como algo único. 5. Amplie sua visão evitando o “olhar viciado”. 6. Troque palavras para descrever o problema.
46. Imersão Mapa Mental 46
47. Mapa Mental 47 O QUE É? Mapas mentais são uma representação visual de um sistema ou processo. COMO FAZ? Pode ser feito utilizando ferramentas como o Miro. RESULTADO ESPERADO Alavancar as tendências de nossa mente para entender um assunto fazendo associações.
48. 48 Fonte: Dicas de Estudo: Como criar um mapa mental?
49. Imersão 5W2H 49
50. 5W2H 50 O QUE É? A ferramenta funciona como uma espécie de checklist composto por sete perguntas específicas e que tem as iniciais de suas palavras-chave (em inglês). COMO FAZ? Responder às seguintes perguntas: What, Why, Where, When, Who, How e How Much. RESULTADO ESPERADO Auxiliar no planejamento de ações, esclarecendo questionamentos, sanar dúvidas sobre um problema ou tomar decisões.
51. Exemplo: 5W2H Uma empresa enfrenta o problema de alta rotatividade de colaboradores. Neste caso, a empresa possui um processo de recrutamento e seleção definido, porém o indicador de rotatividade de colaboradores encontra-se muito acima do desejável. Além disso, devido à grande maioria dos colaboradores não residirem na cidade onde a empresa está situada, o risco de perda de mão de obra qualificada é ainda mais alto. 51
52. 52 5W O que? (What?) Capacitar a equipe de recrutadores. Por quê? (Why?) Porque recrutadores não estão conseguindo identificar candidatos com o perfil adequado para a empresa. Quem? (Who?) Colaboradores da área de Recursos Humanos, incluindo assistentes e analistas de Recursos Humanos da empresa. Quando? (When?) A capacitação iniciará no dia 01/09/2018 e terminará no dia 31/09/2018. Onde? (Where?) A capacitação será realizada no SENAI e na empresa através de repasse de informações. 5W: Capacitar recrutadores
53. 53 2h Como? (How?) A capacitação será feita em duas etapas: 1- Capacitação externa: todos os analistas de RH irão se locomover para cidade de Londrina e realização o Curso de Técnicas de Recrutamento e Seleção oferecido pelo SENAI. 2- Capacitação interna: os analistas que participam do curso devem realizar um repasse à equipe de assistentes de todas as informações que foram ensinadas no curso. Quanto? (How much?) Inscrição do Curso de Técnicas de Recrutamento e Seleção: R$ 1000,00 (cada) x 2 analistas = R$ 2000,00 Locomoção e Diária: R$ 350,00 x 5 dias = R$ 1750,00 Repasse para os demais recrutadores da empresa: R$ 1500,00 (horas de trabalho dos colaboradores envolvidos no repasse) TOTAL: R$ 5250,00 2H: Capacitar recrutadores
54. Agora é com vocês. Pensando no problema passado anteriormente, iremos pensar: Identificação de falhas no processo atual . Responda: o que é, por quê? quem? quando? onde? como? quanto? Exercício 5W2H 54
55. Imersão Os 5 porquês 55
56. Os 5 Porquês 56 O QUE É? Ferramenta muito ligada à gestão da qualidade total e à melhoria contínua nas empresas. COMO FAZ? Ela consiste na repetição da pergunta “Por quê?” diante da questão a ser aprofundada na organização. RESULTADO ESPERADO Chegar à raiz do problema com mais clareza.
57. Exemplo: Os 5 Porquês O carro não pega. ➝ Por quê? ➝ Não tem bateria. ➝ Por que a bateria ficou sem carga? ➝ Os faróis ficaram ligados durante horas com o motor desligado. ➝ Por que ficaram ligados? ➝ Não houve nenhum apito de alarme nem se acendeu nenhuma luz de aviso no painel de controle. A partir daqui, o nosso diagrama divide-se: ➝ Por que não houve nenhum alarme? ➝ O sensor falhou. ➝ Por quê? ➝ O sensor nunca foi substituído. ➝ Por que não se acendeu nenhuma luz no painel? ➝ Houve um problema elétrico. ➝ Por quê? ➝ Os fusíveis estão danificados. 57
58. Design Thinking Ideação 58 É aqui que a criatividade entra em ação, com sessões de ideação que podem usar técnicas como brainstorming, mapa mental e bodystorming para gerar ideias inovadoras
59. Ideação 59 É hora de olhar para todo material pesquisado e para o problema definido e pensar na solução. Momento de pensar grande! De trazer todos os insights obtidos nas etapas anteriores. Dicas • Incentivo ao registro das ideias • Não existe má ideia • Faça um brainstorming híbrido • Quantidade maior que qualidade
60. 60 Design Thinking: Ideação (Resultados e Benefícios) As sessões de ideação permite reunir um grupo para um esforço concentrado para a criação e análise de ideias de inovação. Isso permite: • Gerar ideias de boa qualidade e em número significativo em um curto espaço de tempo. • Integrar participantes com diferentes perspectivas e competências para gerar ideias inovadoras. • Focar esforços para buscar soluções para um desafio específico.
61. Imersão Crazy 8 61
62. Ferramenta de Ideação: Crazy Eights O QUE É? A ideia do Crazy Eights é ajudar o time a sair da sua zona de conforto e das ideias mais óbvias. COMO FAZ? Basicamente, cada indivíduo do time é convidado a esboçar 8 ideias em 5 minutos. Sim, se você já fez as contas, isso é cerca de 40 segundos por esboço, o que é um pouco “CrAzY“ RESULTADO ESPERADO 8 ideias diferentes para o problema por cada pessoa participando. 62
63. 63 Fonte: Crazy 8s – Brainstorming & Sketching (GV Design Sprint Technique)
64. Imersão Matriz de Impacto vs Esforço 64
65. Matriz de Impacto vs Esforço 65 O QUE É? A matriz de esforço e impacto é uma ferramenta para priorização de tarefas. Ela divide os afazeres em 4 grupos, classificando-os de acordo com o impacto gerado e o esforço despendido. COMO FAZ? Apesar de serem bastante intuitivos, os quadrantes da Matriz de Esforço X Impacto podem ser analisados mais de perto para aumentar a compreensão. RESULTADO ESPERADO A grande vantagem dessa ferramenta é entender como gerar ganhos rápidos, otimizando tempo e recursos para maximizar a produtividade.
66. 66 Fonte: Priorizando seu Design com 4 Ferramentas simples
67. Junto com a equipe, analise os requisitos e defina de acordo com o entendimento do problema o preenchimento da Matriz Impacto X Esforço Acesse: https://www.menti.com/e1xzszjme7 ou aponte a câmera do celular para o código QR ao abaixo. 67 Preenchimento da Equipe Fonte: Priorizando seu Design com 4 Ferramentas simples 1 3 4 2
68. Configurar LGBD nos formulários 68 Resultado da pesquisa “Demandas para o site” 5 pessoas participaram da pesquisa e decidiram distribuir as tarefas de acordo com a representação ao lado. Os resultados obtidos através da pesquisa não tem conexão com o mundo real, faltou conhecimento das dificuldade reais. Esforço Impacto Adicionar as redes sociais no rodapé Novo Grid Mudar os ícones 1 3 4 2
69. Imersão Como podemos? How Might We 69
70. Como podemos? 70 A pergunta de “Como podemos?” (HMW )pode gerar muitas ideias criativas. Exemplos de: • Como podemos garantir que mais pessoas paguem seus impostos antes do prazo final? • Como podemos ajudar os funcionários a se manterem produtivos e saudáveis quando trabalham em casa? • Como podemos fazer com que os clientes sintam que suas informações estão seguras ao criar uma conta?
71. Exemplo: “Como podemos?” 71 Como podemos criar um sistema para rastrear o progresso dos professores enquanto memorizam os nomes dos alunos? Como podemos criar uma experiência de memorização que pode ser usada em qualquer intervalo de tempo Como podemos criar uma experiência que inclua os detalhes dos alunos e também proteja suas informações? Como podemos criar uma experiência que mais utiliza métodos eficazes para memorizar nomes? Como podemos criar atividade e métodos que Aceleram o tempo em que os professores memorizam nomes? Como podemos criar uma experiência que pode ser usada tanto para memorização quanto como ponto de referência? Como podemos criar uma experiência que requer pouco ou nenhum tempo de integração?
72. Dicas: “Como podemos?” 1. comece com os problemas (ou insights) que você descobriu 2. evite sugerir uma solução 3. mantenha seus HMWs amplos 4. concentre-se no resultado desejado 5. escreva suas perguntas positivamente 72
73. Design Thinking Prototipação 73 O protótipo, nesse caso, é qualquer materialização da solução que permita ao usuário interagir, desde uma versão inicial de um aplicativo até um modelo.
74. 74 Prototipação em Papel Fonte: Low fidelity prototype testing of the EE app O ideal é usar esses protótipos mesmo em produtos mais consolidados, quando são lançadas novas funcionalidades, por exemplo. Para fazer protótipos de baixa fidelidade, você precisa de somente 2 recursos: lápis e papel. Por isso, eles são geralmente rápidos de construir e de descartar.
75. 75 Protótipo/ Wireframe/ Mockup
78. Ferramentas de prototipação 78 Lunacy Sketch Axure Marvel App Figma Adobe XD
79. Design Thinking Testes 79 Na fase de testes, o protótipo será testado pelo usuário.O objetivo é experimentar na prática e usar a aprendizagem para continuar o ciclo de aprimoramento.
80. (RE)significado da palavra teste 1. Iterar 2. Validar e desapegar 3. Aprender 4. Ouvir de verdade 80
81. Dicas para testar • Inspire as pessoas para testarem seu protótipo. • Fracione o teste • Não explique o protótipo desde o início. • Aplique uma matriz de feedback, que contempla pontos positivos, negativos, ideias e dúvidas. 81
82. Exemplos de perguntas de feedback: 82 • O que você entendeu quando testou a solução? • Como se sentiu quando estava testando a solução? • Como a solução impactará sua vida/rotina/dia a dia? • Já teve alguma experiência parecida com a solução testada? Como foi? • O que você gostou ou não gostou ao testar a solução? por que? Fonte: Teste: o fim e o começo do Design Thinking
83. Ferramentas de testes 83 Figma Adobe XD Marvel App Maze Wireframe/ Protótipo/ Mockup
84. Design Thinking Implementação 84 É hora de implementar o que foi planejado e colocar no mercado e se for necessário, retornar às etapas anteriores.
85. Agora é com vocês! 🤗 85
86. 86 Obrigado 🥳 http:/ /sumo.pe contato@sumo.pe
87. 87 Fim Experiência do Usuário Sistema da Informação | 7º período