cardápios-ferramentas

Prévia do material em texto

Cardápio
de ferramentas de 
Design thinking
Mapear Esboçar
Problema Solucionar
Definir
Prototipar Testar
Não tem carro pra 
todo mundo
Temos que voltar 
cedo
Algumas pessoas 
tem reunião até às 
12
Tem uma galera de 
dieta
Almoçar todos 
juntos
Podemos pedir 
comida
Podemos ir no 
shopping
Podemos almoçar 
perto da praia
Podemos ir no 
outback
Podemos ir no bobs
Precisamos almoçar 
em algum lugar que 
dê pra ir a 
pé,seja rápido, 
caiba todo-mundo e 
seja saudável
Saladas
Kansas
Natural mais
Pedir temaki no 
ifood
Saladas está 
fechado
Hoje é dia de 
comida italiana no 
Kansas
Natural mais 
demora pra atender
Tem uma promoção 
de temaki no Rappi
Pedir temaki
no Rappi
Problematizar Mapear Esboçar Definir Prototipar Testar
Identificar o 
objetivo, tempo e 
recursos disponíveis 
Agrupar todas as 
informações que já 
temos sobre o 
problema e criar 
premissas
Externalizar as 
ideias para que 
sirvam de suporte 
para a criação do 
conceito
Priorizar as ideias 
que melhor atendem 
às premissas e focar 
o desenvolvimento 
Simular a entrega 
final em um ambiente 
favorável ao erro
Mensurar a 
assertividade da 
proposta e antecipar 
merdas
Problematizar Mapear Esboçar Definir Prototipar Testar
5 Porquês Matriz CSD
Como nós 
poderíamos
Matriz de priorização Figma SAM
Entrevista de 
profundidade
EncenaçãoMind map
Jornada do usuário
Design studio
Card sorting
Canvas de proposta 
de valor
Blueprint
HEART
Pixar storytelling
Mapa de 
stakeholders
Future press release
Primeiro tweet
Benchmark
Análise heurística
Golden Path
Storyboard
Site maps
Crazy 8’s
Task flow
Teste A/B
Moodboard Job story
User flow
Problematizar
5 Porquês
O que é?
Utilizado para identificar a causa raiz de um problema, a 
técnica dos 5 porquês ou “why-why”, foi criada pela equipe 
Toyota e consiste em fazer 5 perguntas, sempre questionando a 
causa anterior.
Como aplicar
Identifique o problema e em seguida pergunte “por que?” 5 
vezes, assim identificamos a raiz do problema.
Template no figma Ferramentas > 5 porquês
Entrevista de profundidade
O que é?
É uma técnica de pesquisa qualitativa em que o pesquisador 
realiza perguntas um entrevistado.
Como aplicar
● Busque informações do entrevistado e do contexto onde 
está inserido
● Monte um roteiro pensando no benefício de cada pergunta 
(o que eu vou extrair fazendo essa pergunta?)
Template no figma Ferramentas > Entrevista de profundidade
Pixar storytelling
O que é?
É uma ferramenta para contarmos uma história através de uma 
narrativa que irá engajar a sua equipe a entender melhor qual 
é o propósito do produto.
Como aplicar
Preenchendo as lacunas:
● Era uma vez ___________
● Um certo dia ___________
● Por causa disso ___________
● Todos os dias ___________
● Por causa disso ___________
● Até que finalmente ___________
Template no figma Ferramentas > Pixar Storytelling
Mapa de stakeholders
O que é?
Identificar as pessoas chave que se relacionam com o produto, 
entender os interesses de cada um.
Como aplicar
● Identifique as pessoas com quem precisa conversar
● Deixe bem claro o benefício da ajuda
● Faça uma entrevista
 
Template no figma Ferramentas > Mapa de stakeholders
Future press release
O que é?
É uma ferramenta utilizada na comunicação para distribuir em 
diversos canais de mídia uma visão única sobre determinado 
assunto. Ajuda a estabelecer uma visão de futuro.
Como aplicar
● Título e subtítulo
● Definição do problema e do cliente
● Detalhes da solução (produto)
● O que é o produto
● O que faz os clientes amarem
● Como os usuários podem começar a usá-lo
Template no figma Ferramentas > Future press release
Primeiro tweet
O que é?
Uma ferramenta para inspirar a visão de produto do time de 
forma simples. Além de ajudar a pensar como pescar o usuário 
pela dor mais latente, e que faça ele clicar para saber mais 
sobre o produto, em apenas uma frase.
Como aplicar
Desenvolva uma frase que consiga trazer o benefício e a 
necessidade do produto/feature.
Template no figma Ferramentas > Primeiro tweet
Benchmark
O que é?
Uma análise aprofundada das melhores práticas usadas por 
empresas do mesmo setor que o seu e que podem ser replicadas 
pela sua marca.
Como aplicar
● Escolha empresas que sejam do mesmo segmento e de outros 
segmentos também
● Crie uma tabela comparativa com aspectos que quer 
analisar
● Analisar e propor alternativas 
Template no figma Ferramentas > Benchmark
Moodboard
O que é?
É uma representação visual de elementos e referências no 
estágio inicial do projeto, que ajudarão a definir a 
aparência do produto.
Como aplicar
Aqui entra atributos do produto como: autenticidade, 
picancia...
Template no figma Ferramentas > Moodboard
Mapear
Matriz CSD
O que é?
A sigla CSD significa Certezas, Suposições e Dúvidas. 
Ferramenta utilizada no início dos projetos, que funciona a 
partir de três questões principais:
● O que já sabemos a respeito do projeto?
● Quais são as nossas hipóteses ou o que supomos saber?
● Que dúvidas temos e quais perguntas poderiam ser feitas?
Com a Matriz CSD, conseguimos testar as hipóteses/suposições 
e investigar as dúvidas.
Como aplicar
As formas mais comuns de usar a Matriz é desenhá-la numa 
folha grande de papel ou separar os espaços numa parede. Pode 
chamar os colegas também.
Template no figma Ferramentas > Matriz CSD
Mind map
O que é?
É uma ferramenta para entender, definir e comunicar idéias . 
Identifica uma representação visual de uma sequência de 
pensamentos, um conceito, um sistema ou um processo.
Como aplicar
Template no figma Ferramentas > Mind map
Jornada do usuário
O que é?
Utilizada para mapear todos os pontos de contato de um 
usuário ao realizar uma atividade. Esse mapeamento ajuda na 
concepção e melhoria das interfaces, pois entendendo como é a 
experiência da pessoa antes, durante e depois da atividade. 
Como aplicar
Geralmente a jornada é representada por um mapa ou uma linha 
do tempo.
Geralmente o mapa terá essa estrutura:
● Linha horizontal superior com os passos do usuário antes 
durante e depois da atividade;
● Coluna vertical com os canais e pontos de contato;
● Linha horizontal inferior que representa as emoções do 
usuário;
● Oportunidades de melhorias;
Template no figma Ferramentas > Jornada
Blueprint
O que é?
Semelhante a Jornada do usuário. Porém, não limita-se ao que 
este enxerga; inclui bastidores e outras interações que 
acontecem além do que está visível a ele, e que são 
essenciais ao funcionamento do produto ou serviço. Mapeamento 
da experiência do usuário na utilização de um produto ou 
serviço, partindo do seu próprio ponto de vista.
Como aplicar
● Determine o fluxo que quer mapear
● Identifique todos os atores envolvidos
● Pontos de contato do usuário
● O que acontece por trás do usuário que ele não vê, mas 
que são essenciais pro serviço acontecer.
Dica: tem template no figma
Template no figma Ferramentas > Blueprint
Análise heurística
O que é?
É uma avaliação rápida, barata e prática de um produto, 
interface ou serviço. 
Como aplicar
● Defina uma tarefa a ser realizada e navegue como se fosse 
o usuário tentando completa-la.
● Anote os problemas que encontrou no meio do caminho
● Documente a gravidade do problema para garantir que vocês 
consigam priorizar os mais importantes.
Template no figma Ferramentas > Análise heurística
Apresentação
https://docs.google.com/presentation/d/1eSdwpShd1vXYfBpMoWvmmDtYwoaMspnuGqD57EssHrs/edit?usp=sharing
Golden Path
O que é?
É o “caminho feliz” que o usuário percorre para realizar uma 
tarefa. É a jornada que 90% dos usuários irão percorrer ao 
utilizar o produto. 
Como aplicar
● Desenhe o fluxo de uma funcionalidade, com todas as suas 
ramificações
● Identifique o caminho que 90% dos usuários fazem e esse 
será o golden
Template no figma Ferramentas > User flow / golden path
Storyboard
O que é?
Uma ferramenta para entender como engajar mais pessoas 
utilizando o pensamentovisual, criando um desenho que mostra 
como os usuários estão experimentando um contexto que tem um 
problema. Precisamos de um script, um personagem e um local 
pra deixar mais claro o contexto 
Como aplicar
Template no figma Ferramentas > Storyboard
Job story
O que é?
Uma ferramenta que auxilia a entender o contexto que o 
usuário está inserido e qual será o benefício dentro desse 
contexto. Preenchendo as lacunas de: Quando, eu quero, então 
eu posso.
Como aplicar
Preencher as lacunas
● Quando (contexto)
● Eu quero (motivação)
● Então eu posso (Valor)
Template no figma Ferramentas > Job story
User flow
O que é?
Uma ferramenta para definir um conjunto de passos para o 
usuário completar uma tarefa, como um esboço mesmo, sem 
wireframes, somente os passos de cada etapa dentro de um 
fluxo.
Como aplicar
● Desenhe quadrados para representar cada etapa
● Descreva o que será feito em cada etapa
● Diferença user flow x task flow
https://medium.com/erika-harano/ux-task-flows-versus-user-flo
ws-as-demonstrated-by-pancakes-896e78a98026
Template no figma Ferramentas > User flow / golden path
Esboçar
Como nós poderíamos
O que é?
Ajuda a buscar soluções para um problema que você já colocou 
na mesa. Fazendo as perguntas certas. É uma ferramenta que 
você pode usar para facilitar um processo de descoberta, 
estruturar seu próprio processo de ideação ou forçar um modo 
expansivo de pensar. 
Como aplicar
Em um post it escreva:
● Como nós poderíamos - ação
● O que 
● Para - stakeholder
● Para que - que mudança?
Template no figma Ferramentas > Como nós poderíamos
Design studio
O que é?
É um método colaborativo e criativo para solucionar problemas 
onde Designers, Desenvolvedores, Product Managers, Quality 
Assurance e Stakeholders co-criam e exploram alternativas 
através do design
Como aplicar
Levantar as hipóteses ou fatos que mostrem os problemas e 
dores dos usuários, deixando claro para a equipe qual é o 
problema.
● Apresente o problema para a equipe
● Distribua folhas, peça que dobre em 6 partes 
● Determine um tempo, máximo 10 minutos, para que criem uma 
solução em cada parte da folha
● Peça para que cada um apresente suas soluções em até 3 
minutos
● E por último, até 3 minutos, para a equipe criticar e 
fazer perguntas
criar > apresentar > criticar
Template no figma Ferramentas > Design studio
Card sorting
O que é?
Utilizada na etapa de arquitetura de informação; serve para 
entender o modelo mental de como as pessoas agrupam conteúdo 
e funcionalidades ou como interpretam o significado desses 
grupos (rotulagem/taxonomia) de forma que faça sentido para 
elas e assim aumentar a capacidade do usuário conseguir se 
localizar de forma rápida dentro de um sistema.
Como aplicar
● Crie uma listagem com o tópicos dos conteúdos.
● A aplicação dos cartões pode ser feito tanto em grupo 
quanto de maneira individual.
● Cada item da sua lista deve ser inserido em cada cartão. 
Cartões com nome de grupo em uma cor, enquanto cartões 
com conteúdo de cada grupo em cores diferentes
● Mais infos: 
https://brasil.uxdesign.cc/card-sorting-como-descobrir-o-
modelo-mental-de-organização-de-conteúdo-18e9a50121aa
Template no figma Ferramentas > Card sorting
Site maps
O que é?
Auxilia a organizar a hierarquia das informações fazendo com 
que o usuário encontre a informação que ele precisa. 
Como aplicar
● Faça o mapeamento do conteúdo que precisa organizar
● Utilize a técnica de card sorting para organizar as 
informações
Template no figma Ferramentas > Site maps
Crazy 8’s
O que é?
Semelhante ao design studio. A ideia do 8 steps é ajudar o 
time a sair da sua zona de conforto e das ideias mais óbvias. 
Naturalmente, temos uma forte tendência a ficar com as 
primeiras ideias que temos. Essa técnica é projetada 
justamente para combater esse padrão, pois ajuda o time a 
gerar muitas ideias, sem se preocupar com os detalhes ou 
implementação de qualquer ideia em particular.
Como aplicar
Levantar as hipóteses ou fatos que mostrem os problemas e 
dores dos usuários, deixando claro para a equipe qual é o 
problema.
● Apresente o problema para a equipe
● Distribua folhas, peça que dobre em 6 partes 
● Determine um tempo, máximo 10 minutos, para que criem uma 
solução em cada parte da folha
● Peça para que cada um apresente suas soluções em até 3 
minutos
● E por último, até 3 minutos, para a equipe criticar e 
fazer perguntas
criar > apresentar > criticar
Template no figma Ferramentas > Crazy 8’s
Task flow
O que é?
A Task Flow é uma Jornada, um fluxo único realizado de forma 
semelhante por todos os usuários para uma ação específica, 
como cadastrar-se em um sistema ou realizar uma compra. Os 
fluxos de tarefas são singulares e não se ramificam.
Esse mapeamento criará uma visão compartilhada da experiência 
de uso, além de ajudar na criação de soluções de interface 
para o seu produto.
Como aplicar
● Liste as tarefas
● Ordene as tarefas 
● Faça um inventário de interface 
● Diferença user flow x task flow
https://medium.com/erika-harano/ux-task-flows-versus-user-flo
ws-as-demonstrated-by-pancakes-896e78a98026 Template no figma Ferramentas > Task flow
Definir
Canvas de proposta de valor
O que é?
Uma ferramenta para definir o que o produto é, para quem ele 
foi criado e como/quando ele será usado. O Canvas propõe 
compreender o perfil do cliente e descrever como você 
pretende criar valor para ele.
Como aplicar
Preencher os espaços de acordo com o que é pedido em cada um.
Template no figma Ferramentas > Canvas de proposta de valor
Prototipar
Encenação
O que é?
E uma simulação improvisada de uma situação, que pode 
representar desde a interação de uma pessoa com uma máquina 
até um simples diálogo entre pessoas para encenar aspectos de 
um serviço.
Como aplicar
Template no figma Ferramentas > Encenação
Testar
SAM
O que é?
Uma maneira de medir a satisfação, motivação e controle dos 
usuários.
Como aplicar
Normalmente após um teste de usabilidade aplicamos o SAM. Mas 
também em outros casos.
Template no figma Ferramentas > Análise SAM
HEART
O que é?
Uma forma de mensurar a efetividade das entregas de design, 
analisando os objetivos, sinais e métricas, separados em 5 
categorias: Felicidade, engajamento, adoção, retenção e 
sucesso da tarefa.
Como aplicar
Defina objetivos, sinais e métricas claras para cada 
categori, ex.:
Ao analisarmos o sucesso do cliente, 
Objetivo: Solucionar o problema
Sinal: O produto se encaixa a rotina do cliente
Métrica: % de clientes que acessam mensalmente
Template no figma Ferramentas > HEART
Teste A/B
O que é?
É um método de comparação de duas versões de uma página da 
web ou aplicativo. Ele cria duas variações da mesma página e 
as compara para ver qual teve o melhor resultado.
Como aplicar
● Deixe bem claro quais mudanças
● Veja como mensurar a efetividade das modificações
● Desenvolva duas soluções
Template no figma Ferramentas > Teste A/B
Road map
O que é?
Uma forma de planejar o futuro do time, comunicar a 
estratégia e encadear as entregas.
Como aplicar
● Definir uma etapa macro
● Quebrar as entregas em curto, médio e longo prazo
Template no figma Ferramentas > Road map
SYSTEM USABILITY SCALE | SUS
O que é?
Uma forma de avaliar produtos, serviços, hardware, software, 
websites, aplicações e qualquer outro tipo de interface. Os critérios 
que o SUS ajudam a avaliar:
● Efetividade (os usuários conseguem completar seus objetivos?)
● Eficiência (quanto esforço e recursos são necessários para isso?)
● Satisfação (a experiência foi satisfatória?)
Como aplicar
● Após o teste de usabilidade envie o link da pesquisa para 
o usuário responder.
● Analise os resultados de cada participante através da 
planilha de respostas
● A Média final não deve ser menor que 68 pontos
https://forms.gle/5kx9TDL3EoX5woYRA
https://docs.google.com/spreadsheets/d/1HgzaSu8IE32iXlobAgm37xqE4N9yZR7Wlk6fT7g3Wac/edit?usp=sharing
Ferramenta
O que é?
Como aplicar