introdução ao design sprint - hackaprothon aplicativos cívicos para android
TRANSCRIPT
Introdução ao Design Sprint
Nelson Vasconcelos – Google UI/UX Expert Fevereiro 2016 – Fullstackers Meetup
Agenda
• O que é um Design Sprint?
• Por que usar?
• Como é o processo?
• Onde posso saber mais?
Nelson VasconcelosLead Product Designer no GuiaBolso
Membro do time de Experts de UI/UX do GoogleDesign Sprint Master
@nvasconcelos_
+NelsonVasconcelos
O que é Design Sprint?
Um design sprint é simplesmente um brainstorming estruturado, baseado em design thinking e desenvolvimento ágil
Origem
Gamestorming The Gamestorming
Book
Design Thinking IDEO
Stanford d.school
Agile Manifesto Scrum, XP, Crystal
Clear etc.
Criação do design sprint
Jake Knapp @jakek
Google Ventures http://gv.com/sprint
Sprint: The Book http://goo.gl/VJmsVk
– 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.”
Resumindo
UX
Negócios Engenharia
Focado no usuário
Tecnicamente viável
Resolve o objetivo do negócio
Como funciona?
Muito antes: Modelo em Cascata
1. Requerimento
2. Projeto
3. Implementação
4. Validação
5. Manutenção
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
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
6 Etapas
ENTENDER DEFINIR DIVERGIR DECIDIR PROTOTIPAR VALIDAR
Diamantes da inovação
Fase convergenteanalisar, filtrar e
selecionar o que foi levantado na fase
divergente.
Fase divergente
gerar novas idéias, oportunidades e conceitos.
1. Entender
Mergulhar nas informações sobre usuários, requisitos técnicos, análise competitiva, etc…
2. Definir
Explorar as oportunidades e definir foco de atuação
3. Divergir
Desenvolver rapidamente o máximo de soluções possíveis
4. Definir
Definir as melhores soluções
5. Prototipar
Desenvolver um protótipo baseado na solução encontrada
6. Validar
Testar com usuários e stakeholders a aderência da solução (ou soluções) encontrada
Como aprender?
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
Tá na hora do show! Vamos começar o design sprint
Agenda
13h30 Entender 14h30 Definir 15h00 Intervalo :) 15h15 Material Design 15h30 Divergir 16h00 Decidir 16h15 Prototipar 17h00 Encerramento
Estágio 1 Entender
Apresentem-se! =)
10 min
Antes de tudo Vamos definir o desafio
Objetivos
Claridade no produto, necessidades do usuário, o mercado, e possibilidades
tecnológicasVamos alimentar o pensamento!
Que problemas queremos resolver?
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
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.
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
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
Anote tudo!
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?
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
Entreviste o seu usuário =)
10 min
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
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
Estágio 2 Definir
Objetivo
Definir uma estratégia e analisar qual é o melhor caminho para alcançar a solução
Leia e Organize
Leia as idéias e organize em grupos
5 min
Zen Voting
Use os adesivos circulares para votar nas melhores idéias
5 min
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
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
Princípios de design
Mentor
Fácil de aprender
Divertido
Simples
O primeiro Tweet!
“Metas de ano novo? Com o GuiaBolso você consegue! #sempreBrilhando”
Agenda
13h30 Entender 14h30 Definir 15h00 Intervalo :) 15h15 Material Design 15h30 Divergir 16h00 Decidir 16h15 Prototipar 17h00 Encerramento
Intervalo!!! (15 minutinhos!)
Material Design
O que é Material Design
2 Objetivos
Primeiro objetivo
Primeiro objetivo
Sintetizar os princípios clássicos do bom design com a inovação e possibilidades da ciência e tecnologia
Segundo objetivo
Segundo objetivo
Desenvolver um sistema que permita uma experiência unificada em todas as plataformas e tamanhos de dispositivos
Princípios
Material é a metáfora Audacioso, gráfico, intencional
O movimento traz significado
Material é a metáfora
As superfícies possuem elevação
Tudo que vai na superfície, não
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.
Audacioso, inconfundível, intencional
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.
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.
Grid de Colunas Grid Modular
O movimento gera significado
Benefícios
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
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.
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
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!
https://g-design.storage.googleapis.com/production/v5/assets/renditions/[email protected]
https://design.google.com/articles/expressing-brand-in-material/
Inspiração
Estágio 3 Divergir
Objetivos
Vamos abrir a cabeça e pensar no máximo de soluções possíveis
Crazy 8’s - 8 idéias em 5 minutos
Estágio 4 Decidir
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.
Zen Voting
Use os voting dots para votar nas melhores idéias!
Estágio 5 Prototipar
Objetivo
Você vai criar e construir wireframes, mockups e protótipos navegáveis que você
vai testar com usuários reais.
https://goo.gl/1CEqN8
Pop app