Uma oficina disponibilizada no World Creativity Day 2022 - Jaraguá do Sul, SC - Brasil. A intenção desta oficina foi elucidar o processo de criação e descoberta de requisitos de produto digital centrado no usuário. A partir de 3 mapas de experiência e 3 protopersonas, os alunos puderam vislumbrar a diferença nas características do mesmo produto aplicado a diferentes usuários.

1. UX – Descobertas de
Produtos Digitais
utilizando o Paper
Prototyping
Franco Gomes dos Santos
Kwaba – Laboratório de Soluções Digitais

2. Olááá! :D
Como vão?! Tudo bem?
Pessoal, eu sou o Franco.
Sou técnico em Processamento de
Dados, Graduado em Gestão da
Tecnologia da Informação.
Pós Graduado em Design de Interação.
Pesquisador e Entusiasta da
Informática na Educação.
O Kwaba é um Laboratório de Soluções Digitais focado na aprendizagem
através da vivência. Nós personalizamos a sua aprendizagem orientado
às suas necessidades. Formulamos e entregamos treinamentos e
instruções para o seu desenvolvimento digital
Saiba mais em: Kwaba.com.br
Sobre o Kwaba

3. O que (Sobre o Conteúdo)
Etapa 1
Prototipagem / Prototipação
Paper Prototyping
- O que é
- Quando usar
- Quando não usar
- Teste de Conceito (Experimento)
1ª – Identificação e Compreensão do Problema
– 1h30
Apresentação dos Problemas
- Personas
- Problemas
- Desenho das Propostas
- Proposta de Valor
- Mapa de Experiência
Para cada Persona X Produto
- Jornada Ideal de Uso
- Mapa da Jornada do
Cliente/Usuário
- Padrões de Interface

4. O que (Sobre o Conteúdo)
Etapa 2
- Criação - Prevendo Valor
-Divergência - Prever
-Convergência - Avaliar
-Design do Protótipo
- Testes com usuários
- Teste de Conceito (Experimento)
- Planejamento
- Execução ( Pensando em Voz Alta)
- Coleta de Resultados
- Classificações/Agrupamentos
- Avaliações
- Hipóteses e Melhorias

5. Prototipagem / Prototipação
“Processo de construir modelos de
estudos rápidos, baratos e
aproximados para aprender sobre
conveniência, a possibilidade e a
viabilidade de soluções
alternativas”
- Alex Osterwalder et al – Value Proposition Design

6. Paper Prototyping
“Simulação de
interface, digital ou
não, feita em papel”

7. Paper Prototyping
Quando usar:
- Se não existir nada no digital como base;
- Se for para discutir navegação;
informação, objetivos gerais;
- Se a equipe tem habilidades para desenhos
rápidos e criatividade “manual”.
- Em etapas de co-criação com cliente.
Quando não usar:
- Se for demorado para construir;
- Para testar estilos, cores, layouts;
- Para testar viabilidade interativa:
Exemplo Zoom – Pinça, Como segurar, etc.
- Para dizer que fez.

8. Quando aplicar
Ele é um experimento:
- É um dos tipos de Testes de Conceitos
- Deve ser utilizado na etapa de Avaliação
- Etapa onde as ideias se convergem. E nas
diversas possibilidade se mostrar a mais
viável, para discussão e aprendizado.

9. Vamos começar
Apresentação dos
Problemas
- Personas
- Problemas
- Desenho das Propostas
Ter empatia Experimentar
Prever Avaliar

10. Apresentação dos Problemas
PROTO
Personas
METAS
Uma
jornada
RESPOSTA
DE VALOR

11. Apresentação dos Problemas
+
=

12. Proto-Persona

13. Mapa de Experiência

14. Proposta de Valor

15. Apresentação dos Problemas
Nosso ajudam
Que desejam a e
diferentemente do nosso concorrente X
Produtos e Serviços
Segmento do Cliente
Realizar tarefas Para evitar, reduzir Aumentar, possibilitar

16. Apresentação dos Problemas
Nosso ajudam
Que desejam a e
diferentemente do nosso concorrente X
Nosso Alarme
Crianças
Lembrar de tomar
remédio
Reduzir a sobre
carga dos pais
Aumentando a
autonomia da criança
Google Tarefas

17. Proposta de Valor
-Inspecionada no Serviço –
Service BluePrint Mapping
-No funil de conversão
-No engajamento

18. Mapa de Jornada do Cliente
Ter empatia Experimentar
Prever Avaliar

19. Mapa de Jornada do Cliente
Mapa de Experiência:
Monitoramento da Saúde, Remédios e Terapias
Pensamentos
E Sentimentos
Etapas
Sentimento
Descrição
Recomendações
Persona:
Identificar Planejar Administrar Avaliar
Comprar
Consulta
médica
Diagnóstico
Alternativas
Receitar
Consultar de preço
Consultar
disponibilidade
Consultar viabilidade
Adquirir
Separar
Identificar
horários
Ter disponibilidade
Ser lembrado
Tomar / Executar
Registar
Identificar efeito
Registrar eficácia
Agendar Retorno

20. Padrões de Interface
Lista de
Elementos
Interativos

21. Elementos de Interface
-Mobile
-Arquitetura da Informação
-Design System
-Componentes Interativos

22. Arquitetura da Informação
- Identificação
- Classificação
- Organização
- Tem relação Etnográfica
- Apelo Semântico

23. Design System
- Sistema de guias de
estilos para os
elementos interativos
- Tipografia
- Cores
- Distanciamento

24. Componentes Interativos
- Elementos
de
manipulação
da
informação

25. Componentes Interativos
- Componentes Interativos
- Textos
- Imagens
- Fotos
- Ícones
- Links
- Botões
- Formulários
- Campos de entrada
-Textos
-Numéricos
-Validações e Máscaras
- Lista de Opções
-Radio
-CheckBoxes
-DropDown
-Estacas de Valores
- Mapas, Marcações
- Abas
- Sepadores
- Cards

26. Componentes Interativos
PaperProto....

27. Componentes Interativos
PaperProto....

29. Vamos RETOMAR
Design do Protótipo
Ter empatia Experimentar
Prever Avaliar

30. Mapa de Jornada do Cliente
Mapa de Experiência:
Monitoramento da Saúde, Remédios e Terapias
Pensamentos
E Sentimentos
Etapas
Sentimento
Descrição
Recomendações
Persona:
Identificar Planejar Administrar Avaliar
Comprar
Consulta
médica
Diagnóstico
Alternativas
Receitar
Consultar de preço
Consultar
disponibilidade
Consultar viabilidade
Adquirir
Separar
Identificar
horários
Ter disponibilidade
Ser lembrado
Tomar / Executar
Registar
Identificar efeito
Registrar eficácia
Agendar Retorno

31. Apresentação dos Problemas
Nosso ajudam
Que desejam a e
diferentemente do nosso concorrente X
Nosso Alarme
Crianças
Lembrar de tomar
remédio
A culpa dos pais Aumentando a autonomi
Da criança
Google Tarefas

32. Prototipação
- Planejamento
- Jornada IDEAL
- Ideação
- Materialização
- Teste de Corredor
- Equipe/Ambiente - Design System
- Componentes Interativos
- Arquitetura da Informação
- Tarefas mais relevantes
- Metas do Usuário
- Pré-teste
- Com Personas
Metas de
Experiência
Metas de
Experiência

33. Prototipação Adaptado: Preece et al – Design de Interação 3ª ed.

34. Prototipação
- Execução ( Pensando em Voz Alta)
- Contextualização
- Questão chave
- Instrução
- Interação
- Observação do Experimento

35. Prototipação
- Coleta de Resultados
- Identificações
- Classificações/Agrupamentos

36. Prototipação
- Avaliações
Hipóteses e Melhorias
Ter empatia Experimentar
Prever Avaliar

37. EDUCAÇÃO GERA CONHECIMENTO,
CONHECIMENTO GERA SABEDORIA, E,
SÓ UM POVO SÁBIO PODE MUDAR O
SEU DESTINO
Samuel Lima
Acredite! :D

38. Exemplos:
- Experiências
- Proto-Personas
Criar:
- Deduzir dores e ganhos para o mapa de experiencia X
Protopersona;
- Criar Mapa de Jornada do Usuário para uma solução, ou
parte viável para a solução
- Definir Proposta de Valor
- Lista Tarefas do Produto
- Prototipar telas considerando apelos da Proto-Persona X
Proposta de Valor

39. Nome
TIAGO
Comportamento e Ações
• Otimista.
• Gosta de tecnologia, já participou de projetos com
startups
• Tem dificuldades para cuidar do seu filho quando está
sozinho.
• Faz rifas e doações de alimentos para o pessoal do seu
bairro.
• É insatisfeito como os moradores do seu bairro cuidam
dos parques e calçadas.
Detalhes Demográficos e Psicográficos
• Tem 23 anos, solteiro, desempregado.
• Mora com os pais
• Terminando a faculdade de programação
• Tem um filho de 3 anos que precisa de cuidados
especiais.
• Acredita no empreendedorismo como alavanca social.
• Já foi Vereador Mirim
• Dá aulas de Surf no Verão
Necessidades e Pontos Nevrálgicos
• Resolver os problemas do seu bairro
• Ter uma atividade remunerada (trabalho)
• Lembrar de fazer as atividades de fisioterapia com o seu
filho
• Melhorar a gestão do tempo
• Otimizar seus planejamentos: Faculdade, Bairro, Aulas,
Filho, Emprego
PROTO-PERSONAS
“As proto-personas são uma variação da persona típica, com a importante
diferença de que não são inicialmente o resultado da pesquisa do
usuário. Surge do livre debate sobre quem é essa pessoa e o que está a
motivando a usar uma solução.” Jeff Gothelf – Lean UX

40. Nome
CAMILE
Comportamento e Ações
• É super agitada, sempre no celular ou correndo e
brincando com os colegas
• Gosta de música, gostaria de começar a cantar.
• É bagunceira e não sabe organizar as coisas.
• Tem muitos brinquedos e não sabe o que fazer com
eles.
• É muito afetuosa com os animais, cuida do seu
coelhinho
• Está com as notas baixas em ciências
• Sempre esquece as tarefas da sua rotina, talvez pela sua
agitação.
Detalhes Demográficos e Psicográficos
• Tem 10 anos;
• Mora com os pais e avós.
• Como os pais trabalham até tarde, são os avós que
cuidam mais dela.
• Os avós são bem idosos, esquecidos, e bem longe da
geração dela.
• Toma remédios para moderação de TDAH
Necessidades e Pontos Nevrálgicos
• Achar atividades que lhe ofereçam mais disciplina.
• Se relacionar mais com pessoas que possam ser um
exemplo mais próximo da realidade do que os avós.
• Melhorar a relação com uso da tecnologia.
• Melhorar a qualidade do sono.
• Ser mais organizada e consciente.
• Entender a necessidade de começar a ser mais
independente.
PROTO-PERSONAS
“As proto-personas são uma variação da persona típica, com a importante
diferença de que não são inicialmente o resultado da pesquisa do
usuário. Surge do livre debate sobre quem é essa pessoa e o que está a
motivando a usar uma solução.” Jeff Gothelf – Lean UX

41. Nome
MARLI
Comportamento e Ações
• Super animada
• Participante assídua do grupo de idosos.
• Cuida muito bem da sua casa
• Assiste muitos vídeos tutorais no Youtube
• Tem vários grupos de mensageiros instantâneos:
Família, Vizinhos, Igreja etc.
• Gosta de plantar e cultivar a sua horta
Detalhes Demográficos e Psicográficos
• Tem 65 anos
• Estudo apenas o primário
• Trabalha desde os 14 anos
• Aposentada da área de alimentos.
• Ganha dinheiro extra com artesanatos.
• Diabética e Hipertensa
• Usa óculos para miopia.
Necessidades e Pontos Nevrálgicos
• Lembrar de tomar seus remédios de vários tipos e
horários diferentes
• Criar eventos de artesanatos
• Curiosa sobre compostagem e adubos naturais
• Dificuldade para enxergar
• Começou a usar o celular a pouco tempo, não tem email
e não sabe usar.
• Baixo entendimento científico, tende a acreditar em
falsas notícias.
PROTO-PERSONAS
“As proto-personas são uma variação da persona típica, com a importante
diferença de que não são inicialmente o resultado da pesquisa do
usuário. Surge do livre debate sobre quem é essa pessoa e o que está a
motivando a usar uma solução.” Jeff Gothelf – Lean UX

42. Mapa de Experiência:
Monitoramento da Saúde, Remédios e Terapias
Estágios
Etapas
Sentimento
Pontos de Dor
Oportunidade
Persona:
Identificar Planejar Administrar Avaliar
Comprar
Consulta
médica
Diagnóstico
Alternativas
Receitar
Consultar de preço
Consultar
disponibilidade
Consultar viabilidade
Adquirir
Separar
Identificar
horários
Ter disponibilidade
Ser lembrado
Tomar / Executar
Registar
Identificar efeito
Registrar eficácia
Agendar Retorno

43. Mapa de Experiência:
Grupos e Coletivos: Hobbies, Encontros, Passeios e Eventos
Estágios
Etapas
Persona:
Procurar Associar Interagir Registrar
Avaliar
Consultar na
Internet
Conversar com conhecidos
Ler detalhes sobre o grupo
Localizar: Fotos, Amigos em Comum
Comparar Nível: Iniciantes,
Profissionais
Cadastrar
Criar Perfil
Iniciar Tópico
Comentar
Criar Evento
Compartilhar
Ir ao evento
Socializar
Fotografar
Assinar / Seguir
Receber
certificado
Curtir
Sentimento
Pontos de Dor
Oportunidade

44. Mapa de Experiência:
Separação e Descarte do Lixo
Estágios
Etapas
Persona:
Adquirir Higienizar Separar Descartar
Se informar
Escolher
Comprar
Ler
Informações
Pesquisar
Aprender (memorizar)
Lavar
Desembalar
Limpar
Esterilizar
Classificar Redistribuir
Carregar
Entregar
Armazenar
Doar
Ganhar
Usar
Descascar
Organizar
Armazenar
RECICLAR
RECUSAR
REPENSAR
REDUZIR
REUTILIZAR
Sentimento
Pontos de Dor
Oportunidade