Aula sobre protótipos e entregas em design de produto. A aula fala sobre a importância da prototipação, o que devemos considerar em um processo de prototipação, como escopo, contexto, objetivos de negócio e do usuário. A aula também fala sobre entregas, o que deve ser considerado em entregas de design, como ela se conecta com o começo da conversa sobre protótipos e também como o design system pode ajudar na padronização e velocidade de entregas.

1. Prototipação e Entregas
Prof. Euripedes Magalhães

2. Euripedes (Pipo)
Designer e
professor, há
27
anos trabalhando
com design e
comunicação

3. Experiência e formação
Onde trabalhei
Onde estudei
Clientes que atendi

4. Prototipação

5. É uma representação visual
ou física de uma produto ou
serviço
O que é um
protótipo

6. Para que se possa
testar e aprender
em contextos
mais próximos da
realidade
Para que
serve?

7. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Objetivos
_Escopo
_Contexto
_Tipos
_Método
_Fluxos
_Telas
_Ferramentas

8. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Objetivos
Qual é o objetivo de negócio?
Quais são as necessidades e
objetivos do cliente
(usuário)? Porque se decidiu
construir um protótipo e
quais são os resultados
esperados?

9. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Escopo
O que deve conter nesse
protótipo, o que será testado
desse produto ou serviço?
Que partes do negócio serão
impactadas?

10. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Contexto
Em que contexto o produto
ou serviço real será
utilizado? Em que contexto
será testado esse protótipo?
Em que momento do projeto
estamos?

11. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Tipos de protótipos
Podemos trabalhar com
protótipos de baixa, média e
alta fidelidade (navegáveis
ou não), cada um funciona
para um contexto e
necessidade diferente,

13. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Métodos
Podemos testar os
protótipos de forma remota
ou presencial, a partir de
interações mais livres ou a
partir de tarefas específicas,
com interações simuladas
ou estáticas

14. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Métodos
É importante entender o que
do protótipo funcionou, o que
não funcionou, quais ideias o
usuário forneceu e que
novos caminhos surgiram
após esse teste

15. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Fluxos
É necessário pensar em qual
será o fluxo de navegação,
interação e telas necessário
e desejado para que se
possa entender o
funcionamento do protótipo

17. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Interfaces
Nas interfaces de média
fidelidade (wireframes), use
informações reais, construa
de forma compartilhada com
outros times.
Veja a palestra sobre interfaces de
sucesso do Rafael Brandão clicando
aqui

18. para criação de
um protótipo de
qualidade?
O que
devemos
considerar
_Ferramentas

19. Cases

20. Interfaces de
média e alta
fidelidade
Case:
Renault
Mobile site
_Objetivo
Teste de fluxo e interface
para experiência de site
mobile focado em conversão
de leads para test drive

24. Interfaces de
média e alta
fidelidade
Case:
Portal
Unimed
_Objetivo
Testes para entendimento se
as novas features e interface
se adequavam ao que foi
encontrado nas pesquisas
preliminares

30. Entregas

31. Momento crucial do
processo de produto
(handoff, handover), que
deve ser pensado desde o
princípio das ações
Entregas para
desenvolvimento

33. deve contemplar
uma visão clara e
organizada
Uma
entrega de
qualidade
_Escopo
_Artefatos
_Documentação
_Acompanhamento
_Controle de
qualidade
_Métricas

34. _Escopo
O mesmo escopo para a
criação das interfaces e
experiências deve estar claro
para o time de
desenvolvimento
deve contemplar
uma visão clara e
organizada
Uma
entrega de
qualidade

35. _Artefatos
Devem ser previamente
combinados com o time de
desenvolvimento com o
objetivo de serem úteis
como por exemplo
protótipos e design system
deve contemplar
uma visão clara e
organizada
Uma
entrega de
qualidade

36. _Documentação
Os protótipos servem como
documentação e devem ser
acompanhados de
especificações de objetivos,
contexto, funcionalidades e
resultados esperados
deve contemplar
uma visão clara e
organizada
Uma
entrega de
qualidade

37. _Documentação
A explicação de todo o
funcionamento deve ser
clara e objetiva, em alguns
casos com documentação
com DoD (definitions of
done) e DoR (definitions of
ready)
deve contemplar
uma visão clara e
organizada
Uma
entrega de
qualidade

38. _Acompanhamento
Não basta somente entregar
a documentação e esperar a
entrega, é necessária uma
participação ativa no
processo para suporte e
esclarecimento de dúvidas
deve contemplar
uma visão clara e
organizada
Uma
entrega de
qualidade

39. _Controle de qualidade
Durante e após o processo
de desenvolvimento, é
importante que o designer
faça o controle de qualidade
(Q.A. Quality Assurance) dos
fluxos e interfaces realizados
deve contemplar
uma visão clara e
organizada
Uma
entrega de
qualidade

40. _Métricas
Também é responsabilidade
do time de design definir
junto com produtos e
negócios quais métricas
serão acompanhadas, sejam
de negócio ou de design
deve contemplar
uma visão clara e
organizada
Uma
entrega de
qualidade

41. Sistema de design que
contempla todos os
elementos visuais, de
interface e de interação
de um produto digital
Design
System

42. é mais do que um
style guide, é um
sistema de
informações,
referência e
componentes
Design
System
_Porque usar
_Diferenciais
_Quando aplicar
_O que contém
_Evolução

44. _Porque usar
O design system permite
maior organização dos
elementos de interação,
alinhamento entre times,
padronização e agilidade nos
processos de design e
desenvolvimento
é mais do que um
style guide, é um
sistema de
informações,
referência e
componentes
Design
System

45. _O quem contém
Mais do que os elementos
visuais, ele deve conter a
definição de princípios de
design, linguagem,
componentes e interação
é mais do que um
style guide, é um
sistema de
informações,
referência e
componentes
Design
System

47. _Quando aplicar
A partir do momento em que
se entende que as interfaces,
componentes e interações
podem serão utilizadas em
diversos fluxos e também
por times internos ou
externos
é mais do que um
style guide, é um
sistema de
informações,
referência e
componentes
Design
System

48. _Evolução
O design system é uma
documentação viva, que
sempre é atualizada com
novidades e melhorias de
elementos e componentes
é mais do que um
style guide, é um
sistema de
informações,
referência e
componentes
Design
System

49. Links e
referências
Protótipos
https://iamemmad.wordpress.com/low-fidelity-prototyping/
https://medium.com/@jonbarnett/what-makes-service-
prototype
https://medium.com/ladies-that-ux-br/
https://medium.com/@joaopassini/prototipacao
Cases
https://euripedes.com.br/cases/renault-mobile-site/
https://euripedes.com.br/cases/unimed/
Entregas de design
https://99designs.com/blog/tips/design-systems/
https://aelaschool.com/estrategia/design-handoff
https://www.figma.com/community/handover-template
Design System
https://99designs.com/blog/tips/design-systems/
https://www.alura.com.br/artigos/design-systems
https://www.designsystemchecklist.com/
https://www.robertcreative.com/blog/what-is-a-design-system

50. Obrigado!
@euripedesm
euripedes.com.br