O documento apresenta um resumo das principais informações sobre um design sprint realizado por Nelson Vasconcelos da Google. O design sprint teve como objetivo prototipar um aplicativo cívico para Android e seguiu as 6 etapas do processo: Entender, Definir, Divergir, Decidir, Prototipar e Validar. O documento descreve cada uma das etapas do processo de design sprint.

1. Introdução ao Design Sprint
Nelson Vasconcelos – Google UI/UX Expert
Fevereiro 2016 – Fullstackers Meetup

2. Agenda
• O que é um Design Sprint?
• Por que usar?
• Como é o processo?
• Onde posso saber mais?

3. Nelson Vasconcelos
Lead Product Designer no GuiaBolso
Membro do time de Experts de UI/UX
do Google
Design Sprint Master
@nvasconcelos_
+NelsonVasconcelos

4. O que é Design Sprint?

5. Um design sprint é simplesmente um
brainstorming estruturado, baseado em
design thinking e desenvolvimento ágil

6. Origem
Gamestorming
The Gamestorming
Book
Design Thinking
IDEO
Stanford d.school
Agile Manifesto
Scrum, XP, Crystal
Clear etc.

7. Criação do design sprint
Jake Knapp
@jakek
Google Ventures
http://gv.com/sprint
Sprint: The Book
http://goo.gl/VJmsVk

8. – Tim Brown, CEO da IDEO
“Design thinking é uma disciplina que usa
a sensibilidade do designer e métodos para
atender as necessidades das pessoas com
o que é tecnologicamente possível, e o que
uma estratégia de negócios viável pode
converter em valor ao consumidor e
oportunidade de mercado.”

9. Resumindo
UX
Negócios Engenharia
Focado no usuário
Tecnicamente viável
Resolve o objetivo do negócio

10. Como funciona?

11. Muito antes: Modelo em Cascata
1. Requerimento
2. Projeto
3. Implementação
4. Validação
5. Manutenção

12. Mais comum: Processo Ágil
1
2
3
4
Idéia
Construir
Lançar
Aprender
No processo ágil, precisamos
construir e lançar para poder
aprender
Isso tem um custo e tempo
muito elevado
O feedback do usuário
geralmente vem depois do
lançamento

13. Como é no Design Sprint
1
2
3
4
Idéia
Construir
Lançar
Aprender
oferece aos times um atalho
para o aprendizado, sem
precisar construir e lançar.
Ajuda a dar um norte para
projetos parados.
União do time.
Foco no usuário.
Design Sprint

14. 6 Etapas
ENTENDER DEFINIR DIVERGIR DECIDIR PROTOTIPAR VALIDAR

15. Diamantes da inovação
Fase convergente
analisar, filtrar e
selecionar o que foi
levantado na fase
divergente.
Fase divergente
gerar novas idéias,
oportunidades e
conceitos.

16. 1. Entender
Mergulhar nas informações sobre usuários, requisitos técnicos,
análise competitiva, etc…

17. 2. Definir
Explorar as oportunidades e definir foco de atuação

18. 3. Divergir
Desenvolver rapidamente o máximo de soluções possíveis

19. 4. Definir
Definir as melhores soluções

20. 5. Prototipar
Desenvolver um protótipo baseado na solução encontrada

21. 6. Validar
Testar com usuários e stakeholders a aderência da
solução (ou soluções) encontrada

22. Como aprender?

23. E hoje?
Vamos fazer um design sprint com o objetivo
de prototipar um aplicativo cívico para
Android, seguindo seus padrões e estilo visual

24. Obrigado!
e até daqui a pouco :)
Dúvidas e feedback: nelson@nvasconcelos.com

25. Tá na hora do show!
Vamos começar o design sprint

26. Agenda
13h30 Entender
14h30 Definir
15h00 Intervalo :)
15h15 Material Design
15h30 Divergir
16h00 Decidir
16h15 Prototipar
17h00 Encerramento

27. Estágio 1
Entender

28. Apresentem-se! =)
10 min

29. Antes de tudo
Vamos definir o desafio

30. Objetivos
Claridade no produto, necessidades do
usuário, o mercado, e possibilidades
tecnológicas
Vamos alimentar o pensamento!

31. Que problemas queremos resolver?

32. Desafio de design
• Conversa entre os stakeholders
• Identificar o que já foi feito
• Revisar tudo o que sabemos do usuário
• Revisar designs (se houver)
Primeiras etapas
• Ter um propósito
• Conciso e inspirador
• Direcionado para usuários
• Alinhado e com prazo
Desafio de design

33. Exemplo de desafio de design
“Projetar um app móvel que ajude um visitante a planejar
e encontrar as atividades mais relevantes, divertidas e
personalizadas em uma cidade sendo que ele tem apenas
um dia disponível.
Entregáveis: Um protótipo navegável que vai ser implementado em junho
de 2016.

34. Exemplo de desafio de design
“Projetar um app móvel que ajude um visitante a planejar
e encontrar as atividades mais relevantes, divertidas e
personalizadas em uma cidade sendo que ele tem apenas
um dia disponível.
Entregáveis: Um protótipo navegável que vai ser implementado em junho
de 2016.
Entregáveis Quando?
Quem é o usuário?
O que ele vai fazer?
15 min

35. Modos de entendimento
• Conversas rápidas em 360º
• Entrevista com usuários
• Visitar usuários em campo
• Stakeholder map
• Overview de competidores
Não se esqueça de
resumir tudo aqui

36. Anote tudo!

37. Visão em 360º
UX
Negócios Tecnologia
Design e Pesquisa
O que as pessoas precisam?
O que é usável e amável?Negócios, Vendas, Marketing
Quais são os objetivos de
negócio?
O que é lucrativo?
Tecnologia
O que é possível?
Quais features vão ser
desenvolvidas e quando?

38. Como entrevistar um usuário?
TempoOlá!!!!
Apresente o projeto
Construa
harmonia
e engajamento
Explore as emoções
Questione as
decisões
Obrigado
e tchau! :)
Incentive as
histórias
relevantes
Elabore com seu time um roteiro de perguntas
direcionadas a conhecer melhor seu usuário, suas
necessidades, anseios, expectativas
1. Evite perguntas de cunho demográfico
2. Foque em ouvir. Peça para outro do time fazer as
anotações
3. Comece com perguntas mais abrangentes e depois
entre nos detalhes
4. Incentive histórias, mas apenas relevante ao seu
problema
5. Pense que o roteiro é um guia, não uma regra
6. Tente identificar o fluxo pelo qual o usuário vai passar
em seu produto
10 min

39. Entreviste o seu usuário =)
10 min

40. Criando uma persona
Fulano é ______________________
que precisa de ________________________________
e quer que a experiência seja _____________________
Porque eles valorizam ____________________________
Quem?
O quê?
Como?
Por quê?
5 min

41. How might we?
How assumes solutions may exist
Might says we don't have to find a
solution, but let's try.
We is all about finding creative
solutions together with your team.
10 min

42. Estágio 2
Definir

43. Objetivo
Definir uma estratégia e analisar qual é o
melhor caminho para alcançar a solução

44. Leia e Organize
Leia as idéias e
organize em grupos
5 min

45. Zen Voting
Use os adesivos
circulares para votar
nas melhores idéias
5 min

46. O caminho dourado
Usuário entra
no app
Recebe e ama
Busca Vê um produto Compra
Modifica o pedido
Navega por recomendações
O caminho dourado é onde definimos quais são os momentos-chave que o
usuário faz para encontrar aquilo que eles buscavam em primeiro lugar
10 min

47. Como definir se o problema é mesmo um
problema?
Heart Framework
HAPPINESS
ENGAGEMENT
ADOPTION
RETENTION
TASK SUCCESS
Happiness: métricas de percepção de atitude
do usuário. Ex.: NPS
Engagement: nível de envolvimento do
usuário. Ex.: Page views
Adption: novos usuários de um produto ou
funcionalidade. Ex.: Quantidade de cartões
salvos no último mês
Retention: taxa ou retorno dos usuários. Ex.:
Quantos usuários ativos de um período
continuam presentes em um período posterior
Task success: eficiência, efetividade, taxa de
erro. Ex.: Pessoas que terminaram ou
abandonaram um cadastro no site
5 min

48. Princípios de design
Mentor
Fácil de aprender
Divertido
Simples

49. O primeiro Tweet!
“Metas de ano novo? Com o GuiaBolso você
consegue! #sempreBrilhando”

50. Agenda
13h30 Entender
14h30 Definir
15h00 Intervalo :)
15h15 Material Design
15h30 Divergir
16h00 Decidir
16h15 Prototipar
17h00 Encerramento

51. Intervalo!!!
(15 minutinhos!)

52. Material Design

53. O que é Material Design

54. http://google.com/design/spec

55. 2 Objetivos

56. Primeiro objetivo

57. Primeiro objetivo
Sintetizar os princípios
clássicos do bom design
com a inovação e
possibilidades da ciência
e tecnologia

58. Segundo objetivo

59. Segundo objetivo
Desenvolver um sistema
que permita uma
experiência unificada em
todas as plataformas e
tamanhos de dispositivos

61. Princípios
Material é a metáfora Audacioso, gráfico,
intencional
O movimento traz
significado

62. Material é a metáfora

63. As superfícies possuem elevação

64. Tudo que vai na superfície, não

65. As superfícies são intuitivas e naturais
flexibilidade do material
cria novas affordances
que substituem aquelas
do mundo físico, sem
quebrar as regras da
física.
Ao ser tocada, uma superfície se eleva como se o seu dedo a atraísse.

66. Audacioso, inconfundível,
intencional

67. Cores, superfícies, e iconografia enfatizam as ações
Estes elementos fazem muito mais
do que agradar aos olhos. Eles
criam hierarquia, significado e
foco.

68. Quando você relaciona os elementos de uma interface de usando
proporção e consistência, você reduz a quantidade de informação
não essencial e deixa o conteúdo mais claro e objetivo.

69. Grid de Colunas Grid Modular

73. O movimento gera
significado

76. Benefícios

77. Trello: aumento do engajamento
“Um de nossos principais temas durante o
redesign para Material Design foi
simplicidade, e achamos que conseguimos
isso bem.”
- Hamid, Mobile Lead
• 10% de aumento nas sessões por
usuário por semana
• 42% mais boards criadas por sessão
• 63% mais pessoas adicionadas a
boards por sessão

78. The Hunt: primeiro uso e o FAB
“O Material Design foi uma ótima forma de
começar a construir nosso app para Android,
e foi como ter um time de design experts
ajudando você a criar o melhor app.”
- Jenny Davis, Product Designer
• 30% de aumento de usuários criando
“hunts” em comparação com
plataformas sem Material Design.

79. Aumentando o lucro: Pocket Casts
“O investimento no redesign para Material
Design deu retorno e fez nosso app ficar
muito melhor… a recepção que tivemos foi
impressionante. As pessoas amaram.”
- Philip Simpson, Co-founder e dev Android
• 30% de aumento em vendas desde o
redesign para Material Design

80. Encantando usuários e aumentando vendas:
B&H Photo Video
“Não poderia ser melhor, esse app certamente
é um dos melhores que já usei.”
“Melhor que o site - Eu uso a loja com
frequência e este app é realmente útil.”
“Tudo está tão bem organizado que fica até
divertido passear pelas diferentes sessões do
app!”
• 5x de aumento de pedidos pelo app
desde o redesign
• 700% de aumento em vendas!

84. https://g-design.storage.googleapis.com/production/v5/assets/renditions/
article_brand_carousel_4-667f89c1-ee2fcb46-1240@2x.jpg

87. https://design.google.com/articles/expressing-brand-in-material/

88. Inspiração

94. g.co/materialshowcase

95. materialup.com

97. Estágio 3
Divergir

98. Objetivos
Vamos abrir a cabeça e pensar no
máximo de soluções possíveis

99. Crazy 8’s - 8 idéias em 5 minutos

100. Estágio 4
Decidir

101. Objetivos
Discutir as soluções encontradas na etapa
anterior, refinar e escolher a melhor
combinação de idéias, de forma que
conseguimos criar o melhor produto
possível.

102. Zen Voting
Use os voting dots para votar nas melhores idéias!

103. Estágio 5
Prototipar

104. Objetivo
Você vai criar e construir wireframes,
mockups e protótipos navegáveis que você
vai testar com usuários reais.

107. https://goo.gl/
1CEqN8
Pop app