Ux design antes do wireframe

1. UX Design antes do wireframe Fabricio Teixeira @fabriciot

2. Empresas onde eu trabalhei: AgênciaClickCrispin Porter + Bogusky R/GA

3. O que elas têm em comum? AgênciaClickCrispin Porter + Bogusky R/GAAgências de publicidade

4. O que elas têm em comum? AgênciaClickCrispin Porter + Bogusky R/GAAgê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 DesignersCrispin 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 DesignerCrispin Porter + Bogusky Experience Designer R/GA Interaction Designer

8. Sobre o que trata esta palestra: AI AgênciaClick Arquiteto de Informação User Experience DesignerCrispin 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.

10. Convenhamos, o Axure é incrível.

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

12. Por isso, ao invés de chamar a palestra de: UX Design sem wireframe Preferi chamar de:UX Design antes do wireframe

13. 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)

14. "Quando você consegueentregar a primeira tela de wireframe?" PROJETOS, Gerente de

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

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

17. E aí que se a gente olhar para a lista de entregáveis que nossa área consegue produzir…

18. CONCEPÇÃO IMPLEMENTAÇÃORoad Map Casos de UsoBenchmark Documento de EspecificaçãoMétricas de Sucesso (KPIs) Análise HeurísticaPersonas Teste de UsabilidadeModelo Conceitual Controle de QualidadeBlueprint Análise de AcessibilidadeEcossistema Recomendações de SEOConsumer JourneyEntrevistaObservação etnográficaPesquisa QuantitativaCard Sorting VERIFICAÇÃOInventário de Conteúdo Teste de UsabilidadeAnálise de Tarefas Teste A/BMapa do Site Eye TrackingFluxograma Análise de MétricasWireframes Análise Quantitativa e QualitativaProtótipos NavegáveisStoryboardsMoodboards http://tinyurl.com/entregaveisdeux http://corais.org

19. O Wireframe é apenas uma pequena parte dela.(calma, a lista do slide anterior não é exaustiva)

20. Quem disse que tem que ser um site? app de celular? app de Facebook? hotsite?

21. E aí que no estágio inicial do projeto, o trabalho de um profissional de UX é justamenteIr atrás das perguntas, e não das respostas.

22. E existe, sim, uma série de entregáveis que nos ajuda exatamente a ir atrás das perguntas.

24. Vou mostrar dois deles aqui.

25. 1. Brand Ecosystem

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

27. Os projetos digitais, agora: Web Mobile Social BuscaEventos PDV Embalagem Anúncios

28. Nosso papel, nessa confusão toda: Web Mobile Social BuscaGarantir que a experiência seja positiva em todos os pontos de contato com a marca.Eventos PDV Embalagem Anúncios

29. Web Mobile Social BuscaPor mais que você esteja desenhando, agora, somente uma peça desse ecossistema.Eventos PDV Embalagem Anúncios

30. Brand EcosystemPara que serve?• Entender a presença digital da marca• Entender os assets que já existem para utilizá-los damelhor forma possível• Identificar possíveis falhas dentro desse ecossistema• Garantir que qualquer modificação que seja feita estejaalinhada com os KPIs do projeto

31. Brand Ecosytems podem ser bem simples:

32. Ou mega complexos:

33. 2. Consumer Journey

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

35. Nosso papel, nessa longa jornada: Ativação Aprendizado Engajamento Decisão Compra ShareGarantir que a experiência seja positiva em todos os momentos da jornada.

36. Ativação Aprendizado Engajamento Decisão Compra SharePor mais que você esteja desenhando, agora, somente uma peça dessa jornada.

37. Consumer JourneyPara que serve?• Entender o caminho que diferentes personaspercorrem na experiência com a marca.• Entender quais são as necessidades, emoções,problemas, desejos e angústias do consumidor em cadaetapa dessa experiência.

38. Consumer JourneyPara que serve?• Entender o caminho que diferentes personaspercorrem na experiência com a marca.• Entender quais são as necessidades, emoções,problemas, desejos e angústias do consumidor em cadaetapa dessa experiência.Com a marca, não com o site.

39. Consumer JourneyAtivação Aprendizado Engajamento Decisão Compra Share User Flow Página de Página de Carrinho de Home Categoria Produto Compras

40. Consumer Journeys podem ser bem simples:

41. Ou bem complexas:

43. O que eu descobri depois de começar a utilizá-los: Passada a etapa de UX thinking,o wireframe fica quase automático.

44. Isso porque eu já sei:De onde ele O que ele vem precisa (Brand Ecosystem) (Consumer Journey)

45. E esses documentos me mostram as perguntas que os wireframes têm que responder.

46. A essa altura você deve estar pensando: "não dá tempo""realidade do mercado" "budget"

47. A má notícia é que não existe uma fórmula mágica.

48. Combinações de entregáveisEcossistema Consumer da marca + Journey + Wireframes

49. Combinações de entregáveisConsumer Pesquisa Journey + Online + Rabiscoframes

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

51. AI >>> UX

52. Onde AI se encaixa no fluxo de trabalho? AIInsights Estratégia Ideias Document. Execução Observação

53. Onde UX se encaixa no fluxo de trabalho? UX AIInsights Estratégia Ideias Document. Execução Observação

54. Entender o Fortalecer e Documentar ausuá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étricasInsights Estratégia Ideias Document. Execução Observação

55. UX antes do wireframeEntender o Fortalecer e Documentar ausuá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étricasInsights Estratégia Ideias Document. Execução Observação

56. O UX Designer deve aproveitar a visão sistemática que possuipela própria natureza da profissão.

57. 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

58. Mas tenho observado alguns movimentos em agências que talvez ajudem a justificar essa transição:

59. PlanejamentoMarcas criando mais plataformas e menos campanhas.

60. PlanejamentoMarcas criando mais plataformas e menos campanhas. Exemplo: Nike +

61. PlanejamentoMarcas criando mais plataformas e menos campanhas. Exemplo: Nike Fuel Band

62. Planejamento Marcas criando mais plataformas e menos campanhas.Agências influenciando cada vez mais no business do cliente.

63. Planejamento Marcas criando mais plataformas e menos campanhas.Agências influenciando cada vez mais no business do cliente. Exemplo: Domino’s Pizza

64. CriaçãoPadrões de interaçõescada vez mais nítidos.

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

66. CriaçãoPadrões de interaçõescada vez mais nítidos. Visual Designerscom mais noções de AI.

67. 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

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

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

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

71. 1. Nunca começar a desenhar uma interface semantes ter a visão de todo o ecossistema

72. 2. Fazer os documentos circularem entretodos do time

73. 3. Mostrar como o pensamento de UX pode ajudarnas diversas etapas do projeto

74. Designing Structures for Understanding

75. Obrigado! Fabricio Teixeira @fabriciotarquiteturadeinformacao.com @blogdeai