Há muito pensamento de UX em um projeto digital antes da fase de wireframes, dentro de uma agência de publicidade. Por exemplo: contribuir para a visão holística da presença digital da marca e entender qual a real função do produto digital que está sendo construído.
Esta apresentação mostra alguns aspectos da transição de um trabalho focado em Arquitetura de Informação para um trabalho mais amplo, de User Experience Design. Ela foi compartilhada no WIAD (World Information Architecture Day), no dia 11/fev, em São Paulo.
Criada e apresentada por Fabricio Teixeira (@fabriciot).
Agradecimentos a: Elisa Volpato e Caio Braga.
2. Empresas onde eu trabalhei:
AgênciaClick
Crispin Porter + Bogusky
R/GA
3. O que elas têm em comum?
AgênciaClick
Crispin Porter + Bogusky
R/GA
Agências de publicidade
4. O que elas têm em comum?
AgênciaClick
Crispin Porter + Bogusky
R/GA
Agências de publicidade
digital
5. O que elas têm em comum?
Médio e grande porte.
AgênciaClick 200+
Crispin Porter + Bogusky 900+
R/GA 900+
6. O que elas têm em comum?
Uma área de UX consolidada.
AgênciaClick 200+
6-7 UX Designers
Crispin Porter + Bogusky 900+
28 Experience Designers
R/GA 900+
89 Interaction Designers
7. O que elas NÃO têm em comum?
O nome da área.
AgênciaClick Arquiteto de Informação
User Experience Designer
Crispin Porter + Bogusky Experience Designer
R/GA Interaction Designer
8. Sobre o que trata esta palestra:
AI
AgênciaClick Arquiteto de Informação
User Experience Designer
Crispin Porter + Bogusky Experience Designer
R/GA Interaction Designer
UX
9. O que me motivou a falar sobre isso?
Um movimento recente na comunidade de AI
brasileira: criticar o wireframe.
14. Por isso, ao invés de chamar a palestra de:
UX Design sem wireframe
Preferi chamar de:
UX Design antes do wireframe
15. Outro motivo que me levou a falar sobre isso
foi uma pergunta muito comum em vários
dos projetos dos quais participo.
(a pergunta está no próximo slide)
19. E aí que se a gente olhar para a lista de entregáveis que nossa
área consegue produzir…
20. CONCEPÇÃO IMPLEMENTAÇÃO
Road Map Casos de Uso
Benchmark Documento de Especificação
Métricas de Sucesso (KPIs) Análise Heurística
Personas Teste de Usabilidade
Modelo Conceitual Controle de Qualidade
Blueprint Análise de Acessibilidade
Ecossistema Recomendações de SEO
Consumer Journey
Entrevista
Observação etnográfica
Pesquisa Quantitativa
Card Sorting VERIFICAÇÃO
Inventário de Conteúdo Teste de Usabilidade
Análise de Tarefas Teste A/B
Mapa do Site Eye Tracking
Fluxograma Análise de Métricas
Wireframes Análise Quantitativa e Qualitativa
Protótipos Navegáveis
Storyboards
Moodboards
http://tinyurl.com/entregaveisdeux
http://corais.org
21. O Wireframe é apenas uma pequena parte dela.
(calma, a lista do slide anterior não é exaustiva)
22. Quem disse que tem que ser um site?
app de celular?
app de Facebook?
hotsite?
23. E aí que no estágio inicial do projeto,
o trabalho de um profissional de UX é justamente
Ir atrás das perguntas, e não das respostas.
24. E existe, sim, uma série de entregáveis que nos ajuda
exatamente a ir atrás das perguntas.
25. CONCEPÇÃO IMPLEMENTAÇÃO
Road Map Casos de Uso
Benchmark Documento de Especificação
Métricas de Sucesso (KPIs) Análise Heurística
Personas Teste de Usabilidade
Modelo Conceitual Controle de Qualidade
Blueprint Análise de Acessibilidade
Ecossistema Recomendações de SEO
Consumer Journey
Entrevista
Observação etnográfica
Pesquisa Quantitativa
Card Sorting VERIFICAÇÃO
Inventário de Conteúdo Teste de Usabilidade
Análise de Tarefas Teste A/B
Mapa do Site Eye Tracking
Fluxograma Análise de Métricas
Wireframes Análise Quantitativa e Qualitativa
Protótipos Navegáveis
Storyboards
Moodboards
http://tinyurl.com/entregaveisdeux
http://corais.org
30. Nosso papel, nessa confusão toda:
Web Mobile Social Busca
Garantir que a experiência seja positiva em todos os
pontos de contato com a marca.
Eventos PDV Embalagem Anúncios
31. Web Mobile Social Busca
Por mais que você esteja desenhando, agora, somente
uma peça desse ecossistema.
Eventos PDV Embalagem Anúncios
32. Brand Ecosystem
Para que serve?
• Entender a presença digital da marca
• Entender os assets que já existem para utilizá-los da
melhor forma possível
• Identificar possíveis falhas dentro desse ecossistema
• Garantir que qualquer modificação que seja feita esteja
alinhada com os KPIs do projeto
37. Nosso papel, nessa longa jornada:
Ativação Aprendizado Engajamento Decisão Compra Share
Garantir que a experiência seja positiva em todos os
momentos da jornada.
38. Ativação Aprendizado Engajamento Decisão Compra Share
Por mais que você esteja desenhando, agora, somente
uma peça dessa jornada.
39. Consumer Journey
Para que serve?
• Entender o caminho que diferentes personas
percorrem na experiência com a marca.
• Entender quais são as necessidades, emoções,
problemas, desejos e angústias do consumidor em cada
etapa dessa experiência.
40. Consumer Journey
Para que serve?
• Entender o caminho que diferentes personas
percorrem na experiência com a marca.
• Entender quais são as necessidades, emoções,
problemas, desejos e angústias do consumidor em cada
etapa dessa experiência.
Com a marca, não com o site.
41. Consumer Journey
Ativação Aprendizado Engajamento Decisão Compra Share
User Flow
Página de Página de Carrinho de
Home
Categoria Produto Compras
44. CONCEPÇÃO IMPLEMENTAÇÃO
Road Map Casos de Uso
Benchmark Documento de Especificação
Métricas de Sucesso (KPIs) Análise Heurística
Personas Teste de Usabilidade
Modelo Conceitual Controle de Qualidade
Blueprint Análise de Acessibilidade
Ecossistema Recomendações de SEO
Consumer Journey
Entrevista
Observação etnográfica
Pesquisa Quantitativa
Card Sorting VERIFICAÇÃO
Inventário de Conteúdo Teste de Usabilidade
Análise de Tarefas Teste A/B
Mapa do Site Eye Tracking
Fluxograma Análise de Métricas
Wireframes Análise Quantitativa e Qualitativa
Protótipos Navegáveis
Storyboards
Moodboards
http://tinyurl.com/entregaveisdeux
http://corais.org
45. O que eu descobri depois de começar a utilizá-los:
Passada a etapa de UX thinking,
o wireframe fica quase automático.
46. Isso porque eu já sei:
De onde ele O que ele
vem precisa
(Brand Ecosystem) (Consumer Journey)
47. E esses documentos me mostram as perguntas
que os wireframes têm que responder.
48. A essa altura você deve estar pensando:
"não dá tempo"
"realidade do mercado"
"budget"
49. A má notícia é que não existe uma fórmula mágica.
54. Onde AI se encaixa no fluxo de trabalho?
AI
Insights Estratégia Ideias Document. Execução Observação
55. Onde UX se encaixa no fluxo de trabalho?
UX
AI
Insights Estratégia Ideias Document. Execução Observação
56. Entender o Fortalecer e Documentar a
usuário filtrar ideias execução
• Ecossistema • Descritivo das ideias • Cardsorting
• Consumer Journey • Consumer Journey • Sitemap
• Personas • Sketches • Wireframes
Ajudar a
definir a Documentar e Observar
estratégia validar o uso
• Ecossistema • Sitemap • Teste de usabilidade
• Personas • Wireframes • Análise de métricas
Insights Estratégia Ideias Document. Execução Observação
57. UX antes do wireframe
Entender o Fortalecer e Documentar a
usuário filtrar ideias execução
• Ecossistema • Descritivo das ideias • Cardsorting
• Consumer Journey • Consumer Journey • Sitemap
• Personas • Sketches • Wireframes
Ajudar a
definir a Documentar e Observar
estratégia validar o uso
• Ecossistema • Sitemap • Teste de usabilidade
• Personas • Wireframes • Análise de métricas
Insights Estratégia Ideias Document. Execução Observação
58. O UX Designer deve aproveitar
a visão sistemática que possui
pela própria natureza da profissão.
59. Essa transição de AI para UX pode significar um passo
em direção ao Planejamento (e menos à Criação)
Planejamento UX <<< AI Criação
60. Mas tenho observado alguns movimentos em agências que
talvez ajudem a justificar essa transição:
64. Planejamento
Marcas criando mais plataformas
e menos campanhas.
Agências influenciando cada vez mais
no business do cliente.
65. Planejamento
Marcas criando mais plataformas
e menos campanhas.
Agências influenciando cada vez mais
no business do cliente.
Exemplo: Domino’s Pizza
71. Mas é claro: essa passagem de AI para UX é apenas uma das opções.
Sempre haverá espaço para o especialista.
<<<<<<<<<<<<<< Generalista >>>>>>>>>>>>>>
>>>>>>
Especialista
<<<<<<
Meunomeé Fabricio e eutrabalhoháalgunsanosemagências de publicidade. Essassão as empresasondeeutrabalhei.
Essasempresastêmemcomum o fato de seremagências de publicidade. Entãosópradeixarclaro, tudo o queeudisser a partir de agora é o ponto de vista de alguémquesótrabalhouemagências de publicidade.
Essasempresastêmemcomum o fato de seremagências de publicidade. Entãosópradeixarclaro, tudo o queeudisser a partir de agora é o ponto de vista de alguémquesótrabalhouemagências de publicidade.
E apesar de eusempreterfeitobasicamente a mesmacoisaemtodaselas, minhaprofissãomudou de nomealgumasvezes.
E apesar de eusempreterfeitobasicamente a mesmacoisaemtodaselas, minhaprofissãomudou de nomealgumasvezes.
E apesar de eusempreterfeitobasicamente a mesmacoisaemtodaselas, minhaprofissãomudou de nomealgumasvezes.
E apesar de eusempreterfeitobasicamente a mesmacoisaemtodaselas, minhaprofissãomudou de nomealgumasvezes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.
Eutenhoumavisão um poucodiferente deles. Achoque o Axureé um software incrível.Achoque o wireframe éaltamentenecessário e cadavez tem se mostradomaisútil.Nãoachoque a gentedeveparar de fazer wireframes.