Introdução ao Design Sprint - Hackaprothon Aplicativos Cívicos para Android

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

Obrigado! e até daqui a pouco :)

Dúvidas e feedback: [email protected]

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

http://google.com/design/spec

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

g.co/materialshowcase

materialup.com

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