Ux design antes do wireframe

35.677 visualizações

Publicada em

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.

Publicada em: Tecnologia

Ux design antes do wireframe

  1. 1. UX Design antes do wireframe Fabricio Teixeira @fabriciot
  2. 2. Empresas onde eu trabalhei: AgênciaClickCrispin Porter + Bogusky R/GA
  3. 3. O que elas têm em comum? AgênciaClickCrispin Porter + Bogusky R/GAAgências de publicidade
  4. 4. O que elas têm em comum? AgênciaClickCrispin Porter + Bogusky R/GAAgências de publicidade digital
  5. 5. O que elas têm em comum? Médio e grande porte. AgênciaClick 200+Crispin Porter + Bogusky 900+ R/GA 900+
  6. 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. 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. 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. 9. O que me motivou a falar sobre isso?Um movimento recente na comunidade de AI brasileira: criticar o wireframe.
  10. 10. Convenhamos, o Axure é incrível.
  11. 11. Convenhamos, os wireframes vão existir por muito tempo.
  12. 12. Por isso, ao invés de chamar a palestra de: UX Design sem wireframe Preferi chamar de:UX Design antes do wireframe
  13. 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. 14. "Quando você consegueentregar a primeira tela de wireframe?" PROJETOS, Gerente de
  15. 15. E por mais que eu tentasse argumentar,eles sempre vinham com um contra-argumento muito mais inteligente:
  16. 16. "Mas é só a home e uma interna!"
  17. 17. E aí que se a gente olhar para a lista de entregáveis que nossa área consegue produzir…
  18. 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. 19. O Wireframe é apenas uma pequena parte dela.(calma, a lista do slide anterior não é exaustiva)
  20. 20. Quem disse que tem que ser um site? app de celular? app de Facebook? hotsite?
  21. 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. 22. E existe, sim, uma série de entregáveis que nos ajuda exatamente a ir atrás das perguntas.
  23. 23. 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
  24. 24. Vou mostrar dois deles aqui.
  25. 25. 1. Brand Ecosystem
  26. 26. Os projetos digitais há alguns anos:Web Anúncios
  27. 27. Os projetos digitais, agora: Web Mobile Social BuscaEventos PDV Embalagem Anúncios
  28. 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. 29. Web Mobile Social BuscaPor mais que você esteja desenhando, agora, somente uma peça desse ecossistema.Eventos PDV Embalagem Anúncios
  30. 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. 31. Brand Ecosytems podem ser bem simples:
  32. 32. Ou mega complexos:
  33. 33. 2. Consumer Journey
  34. 34. Ativação Aprendizado Engajamento Decisão Compra Share
  35. 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. 36. Ativação Aprendizado Engajamento Decisão Compra SharePor mais que você esteja desenhando, agora, somente uma peça dessa jornada.
  37. 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. 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. 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. 40. Consumer Journeys podem ser bem simples:
  41. 41. Ou bem complexas:
  42. 42. 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
  43. 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. 44. Isso porque eu já sei:De onde ele O que ele vem precisa (Brand Ecosystem) (Consumer Journey)
  45. 45. E esses documentos me mostram as perguntas que os wireframes têm que responder.
  46. 46. A essa altura você deve estar pensando: "não dá tempo""realidade do mercado" "budget"
  47. 47. A má notícia é que não existe uma fórmula mágica.
  48. 48. Combinações de entregáveisEcossistema Consumer da marca + Journey + Wireframes
  49. 49. Combinações de entregáveisConsumer Pesquisa Journey + Online + Rabiscoframes
  50. 50. Menos tempo discutindo o wireframe. Mais tempo discutindo a estratégia.
  51. 51. AI >>> UX
  52. 52. Onde AI se encaixa no fluxo de trabalho? AIInsights Estratégia Ideias Document. Execução Observação
  53. 53. Onde UX se encaixa no fluxo de trabalho? UX AIInsights Estratégia Ideias Document. Execução Observação
  54. 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. 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. 56. O UX Designer deve aproveitar a visão sistemática que possuipela própria natureza da profissão.
  57. 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. 58. Mas tenho observado alguns movimentos em agências que talvez ajudem a justificar essa transição:
  59. 59. PlanejamentoMarcas criando mais plataformas e menos campanhas.
  60. 60. PlanejamentoMarcas criando mais plataformas e menos campanhas. Exemplo: Nike +
  61. 61. PlanejamentoMarcas criando mais plataformas e menos campanhas. Exemplo: Nike Fuel Band
  62. 62. Planejamento Marcas criando mais plataformas e menos campanhas.Agências influenciando cada vez mais no business do cliente.
  63. 63. Planejamento Marcas criando mais plataformas e menos campanhas.Agências influenciando cada vez mais no business do cliente. Exemplo: Domino’s Pizza
  64. 64. CriaçãoPadrões de interaçõescada vez mais nítidos.
  65. 65. Criação Padrões de interações cada vez mais nítidos.Exemplo: Pattern Tap
  66. 66. CriaçãoPadrões de interaçõescada vez mais nítidos. Visual Designerscom mais noções de AI.
  67. 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. 68. Planejamento <<< UX >>> Criação
  69. 69. Mas é claro: essa passagem de AI para UX é apenas uma das opções. Sempre haverá espaço para o especialista. <<<<<<<<<<<<<< Generalista >>>>>>>>>>>>>> >>>>>> Especialista <<<<<<
  70. 70. "Legal, e agora?" Ou “3 lições que aprendi na marra”
  71. 71. 1. Nunca começar a desenhar uma interface semantes ter a visão de todo o ecossistema
  72. 72. 2. Fazer os documentos circularem entretodos do time
  73. 73. 3. Mostrar como o pensamento de UX pode ajudarnas diversas etapas do projeto
  74. 74. Designing Structures for Understanding
  75. 75. Obrigado! Fabricio Teixeira @fabriciotarquiteturadeinformacao.com @blogdeai

×