1. UX Design antes do wireframe
Fabricio Teixeira
@fabriciot

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.

12. Convenhamos, o Axure é incrível.

13. Convenhamos, os wireframes vão existir
por muito tempo.

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)

16. "Quando você consegue
entregar a primeira tela de
wireframe?"
PROJETOS, Gerente de

17. E por mais que eu tentasse argumentar,
eles sempre vinham com um contra-argumento
muito mais inteligente:

18. "Mas é só a home
e uma interna!"

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

26. Vou mostrar dois deles aqui.

27. 1. Brand Ecosystem

28. Os projetos digitais há alguns anos:
Web
Anúncios

29. Os projetos digitais, agora:
Web Mobile Social Busca
Eventos PDV Embalagem Anúncios

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

33. Brand Ecosytems podem ser bem simples:

34. Ou mega complexos:

35. 2. Consumer Journey

36. Ativação Aprendizado Engajamento Decisão Compra Share

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

42. Consumer Journeys podem ser bem simples:

43. Ou bem complexas:

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.

50. Combinações de entregáveis
Ecossistema Consumer
da marca + Journey + Wireframes

51. Combinações de entregáveis
Consumer Pesquisa
Journey + Online + Rabiscoframes

52. Menos tempo discutindo o wireframe.
Mais tempo discutindo a estratégia.

53. AI >>> UX

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:

61. Planejamento
Marcas criando mais plataformas
e menos campanhas.

62. Planejamento
Marcas criando mais plataformas
e menos campanhas.
Exemplo: Nike +

63. Planejamento
Marcas criando mais plataformas
e menos campanhas.
Exemplo: Nike Fuel Band

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

66. Criação
Padrões de interações
cada vez mais nítidos.

67. Criação
Padrões de interações
cada vez mais nítidos.
Exemplo: Pattern Tap

68. Criação
Padrões de interações
cada vez mais nítidos.
Visual Designers
com mais noções de AI.

69. Criação
Padrões de interações
cada vez mais nítidos.
Visual Designers
com mais noções de AI.
Exemplo: Criando uma
landing page perfeita

70. Planejamento <<< UX >>> Criação

71. Mas é claro: essa passagem de AI para UX é apenas uma das opções.
Sempre haverá espaço para o especialista.
<<<<<<<<<<<<<< Generalista >>>>>>>>>>>>>>
>>>>>>
Especialista
<<<<<<

72. "Legal, e agora?"
Ou “3 lições que aprendi na marra”

73. 1. Nunca começar a desenhar uma interface sem
antes ter a visão de todo o ecossistema

74. 2. Fazer os documentos circularem entre
todos do time

75. 3. Mostrar como o pensamento de UX pode ajudar
nas diversas etapas do projeto

76. Designing Structures for Understanding

77. Obrigado!
Fabricio Teixeira
@fabriciot
arquiteturadeinformacao.com
@blogdeai