Desmistificando UX - #webbr2016

Vamos entender o que é UX. Como aplicamos dentro de um projeto, entender todas suas etapas e quais são seus entregáveis.

Transcript

1. Alda Rocha UX Designer @mjcoffeeholick http:/ /mjcoffeeholick.github.io
2. O que é UX? user experience
11. Como é essa profissão?
15. Designing Experiences Not Screens
16. Em que momento se aplica?
20. Mapeamento do cliente
21. Mapeamento do cliente Quem é o meu cliente? Qual a cultura da empresa? Qual a sua reputação? Qual é a identidade da sua marca? Como eles tocam seu negócio? O que o mercado e os meios de comunicação falam sobre ele? Quais são os problemas que eles resolvem? Quem são seus concorrentes? O que seus clientes falam sobre?
22. Mapeamento do cliente Internet Redes sociais e canais Entrevista Feedbacks Documentação Analytics/métricas
23. Analytics
24. Google analytics
25. Twitter analytics
26. Facebook analytics
27. Mapeamento do cliente Pesquisa de usuários
28. Pesquisa de usuários Quem são os clientes TARGET ? - Quem são esses usuários? - Quais são a suas necessidades? - Quais são os padrões de interação deles? - Quais são suas atitudes na Web? - Quais são seus estilos? - E suas personalidades?
29. Testes de usabilidade no site/app existente. Criar PERSONAS (baseado nas pesquisas e testes). Criar JORNADA. Storyboard, Mind map, Design thinking Pesquisa de usuários
30. Target
32. Personas
34. www.pinterest.com www.behance.net
35. www.criesuapersona.com.br
36. www.xtensio.com
37. Jornada
39. Storyboard
42. Mind map
44. Design thinking
46. Mapeamento do cliente Arquitetura de informação Pesquisa de usuários
47. Arquitetura de informação O que pode ser removido ou agrupado? Quais partes do produto funciona muito bem? Precisamos criar novos conteúdos? Precisamos usar mais ícones? Como está a parte de acessibilidade? Como o site/app funciona em outros devices? É responsivo? Qual a importância do Mobile?
48. Mapear todo o conteúdo existente. Faça uma analise e categorize todo o conteúdo de acordo com suas pesquisas. Crie uma nova proposta de arquitetura: Balsamic, Photoshop, Xmind, Axure Teste essa nova proposta: FLOWCHART, CARD SORTING. Valide, obtenha feedback e faça ajustes Avance para o RABISCOFRAME do novo site Arquitetura de informação
50. Flowcharts
54. www.uxflowcharts.com
55. www.uiuxassets.com
56. www.uiuxassets.com
57. www.ui8.net
58. www.ui8.net
59. Card sorting
62. http://uxkits.com/products/website-deck-of-cards
63. http://uxkits.com/products/website-deck-of-cards
64. Rabiscoframe
66. Mapeamento do cliente Template design (wireframe) Arquitetura de informação Pesquisa de usuários
67. - Perguntas + Mão na massa
68. Template design Ajude o pessoal de conteúdo a definir o que deve conter em cada página: Microcopy, Call to action. Desenhe a estrutura do conteúdo, como ele vai ficar distribuído e crie padrões de interação. Crie um wireframe navegável, protótipos e valide navegação e fluxo: Balsamic, Axure, HTML, Photoshop, Invision, Marvelapp … Envolva todo o time para entenderem toda a navegação, interação e decisão proposta.
69. https://www.alura.com.br/curso-online-introducao-ao-microcopy
70. Mapeamento do cliente Template design (wireframe) Visual design Arquitetura de informação Pesquisa de usuários
73. UI - Visual design Colabore com o time de criação, ajude criar um layout bonito e funcional que favoreça o usuário. Faça teste A/B com versões para validar escolhas. Colha feedback.
74. Teste A/B
77. Entrega do projeto! Acabou?
78. Entrega do projeto! Acabou?
79. Mapeamento do cliente Site analytics e testes Template design (wireframe) Visual design Arquitetura de informação Pesquisa de usuários
80. Site analytics e testes Alguma coisa precisa ser ajustada? Alguma coisa precisa ser adicionada? Alguma coisa precisa ser retirada?
81. Site analytics e testes Trabalhar em conjunto com a equipe de métricas e analytics para tentar entender que áreas precisam ser mais destacadas e se o produto responde ao que imaginaram. Continue fazendo testes de usabilidade: pesquisas, feedbacks, teste o engajamento. Monitore o comportamento do usuário dentro do site/app e colha dados.
82. Add Skill
85. https://www.medium.com
86. https://www.alistapart.com
87. https://www.arquiteturadeinformacao.com
88. https://www.smashingmagazine.com/category/uxdesign/
89. https://www.alura.com.br/cursos-online-design-ux
90. https://www.caelum.com.br/curso-ux-usabilidade-mobile-web/
91. http://www.mergo.com.br/
92. http://escoladesignthinking.echos.cc/
93. https://amzn.com/w/1NNVXZAS8FYHL
94. https://twitter.com/front_ux
95. https://twitter.com/front_ux
98. Alda Rocha UX Designer e Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io Obrigada!