Prototipacao e Entregas

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

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

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

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

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

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

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?

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?

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?

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,

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

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

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

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

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

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

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

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

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

_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

_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

_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

_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

_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

_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

_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

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

é 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

_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

_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

_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

_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

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

Obrigado!
@euripedesm
euripedes.com.br

Prototipacao e Entregas

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Prototipacao e Entregas (20)

Mais de Euripedes Magalhães (20)

Último (8)

Prototipacao e Entregas