Ao longo destes 6 anos par/cipamos de muitos trabalhos 
que começaram com um escopo simples e, no final, 
transformaram-­‐...
MARCAS ATENDIDAS 
EM 6 ANOS, SÃO MAIS DE 100 MARCAS E 400 PROJETOS
INTENSIVO DE UX 
PARA AGÊNCIAS 
E STARTUPS
1. O QUE É E O 
QUE NÃO É UX
1. O QUE É E O QUE NÃO É UX? 
O QUE É UX? 
"User Experience" ou "Experiência 
do usuário" envolve todos os aspectos 
da in...
1. O QUE É E O QUE NÃO É UX? 
O QUE NÃO É UX? 
DESIGN VISUAL/ INTERFACE/ USER INTERFACE 
(Etapa iniciada após a finalizaçã...
2. BENEFÍCIOS 
DE UX
2. BENEFÍCIOS DO UX 
O QUE NÃO É UX? 
DESIGN Foco apenas no aspecto visual e subjetividade; 
PROGRAMAÇÃO Foco apenas na pr...
3. BOAS 
PRÁTICAS
3. BOAS PRÁTICAS 
BRIEFING 
• O briefing deve ser o ponto inicial de um projeto de UX; 
• Através dele, é possível aprofun...
3. BOAS PRÁTICAS 
BRIEFING 
PERGUNTAS INTERESSANTES PARA UM BOM BRIEFING: 
• O cliente quer mesmo um site? 
• Quais são os...
3. BOAS PRÁTICAS 
BENCHMARKING 
• Benchmarking COMPETITIVO: análise dos concorrentes para entender 
pontos fracos e fortes...
3. BOAS PRÁTICAS 
BENCHMARKING 
• Geralmente são analisados até 5 sites concorrentes / similares 
• São definidos de 4 a 5...
3. BOAS PRÁTICAS 
BENCHMARKING
3. BOAS PRÁTICAS 
PERFIS DE USUÁRIOS 
• Definição dos perfis de usuários e tarefas 
• Parecidos com caso de uso ou cenário...
3. BOAS PRÁTICAS 
PERFIS DE USUÁRIOS
3. BOAS PRÁTICAS 
SITEMAP 
• Importante para conhecimento detalhado e dimensionamento do projeto; 
• Ferramenta auxiliar p...
3. BOAS PRÁTICAS 
SITEMAP
3. BOAS PRÁTICAS 
PROTOTIPAÇÃO 
• Os wireframes são uma espécie de “planta baixa” do site; 
• Protótipo navegável de alta ...
3. BOAS PRÁTICAS 
PROTOTIPAÇÃO
4. PESQUISA
4. PESQUISA 
PESQUISA COM USUÁRIO 
• Objetivo é descobrir as percepções, crenças e atitudes em 
relação a um produto ou ma...
4. PESQUISA 
TESTE DE USABILIDADE 
-­‐-­‐ Testes com público-­‐alvo do site para entender a aceitação do novo site 
e leva...
4. PESQUISA 
TESTE DE USABILIDADE
4. PESQUISA 
FOCUS GROUP 
• Pesquisa de mercado feita com um grupo de pessoas; 
• Conversa é conduzida para gerar “insight...
5. MÉTRICAS E 
CONTEÚDO
5. MÉTRICAS E CONTEÚDO 
WEB ANALYTICS 
• É o planejamento das métricas do site: tudo que deve ser medido 
e como deve ser ...
5. MÉTRICAS E CONTEÚDO 
WEB ANALYTICS
5. MÉTRICAS E CONTEÚDO 
WEB ANALYTICS
5. MÉTRICAS E CONTEÚDO 
SEO (Search Engine Optimization) 
• No estudo inicial de SEO, chamado de Setup, é analisado o cont...
5. MÉTRICAS E CONTEÚDO 
SEO (Search Engine Optimization)
5. MÉTRICAS E CONTEÚDO 
CRO (Convert Rate Optimization) 
• Foco na melhoria da Taxa de Conversão; 
• Voltado para sites tr...
6. ENTREGÁVEIS
6. ENTREGÁVEIS 
WIREFRAMES
6. ENTREGÁVEIS 
BENCHMARKING
6. ENTREGÁVEIS 
AVALIAÇÃO HEURÍSTICA 
• Feita por 2 especialistas que avaliam o site e levantam pontos de melhoria 
• Util...
6. ENTREGÁVEIS 
AVALIAÇÃO HEURÍSTICA
6. ENTREGÁVEIS 
INVENTÁRIO DE CONTEÚDO 
• Tipo de projeto mais voltado para portais e sites com grande quantidade de conte...
6. ENTREGÁVEIS 
INVENTÁRIO DE CONTEÚDO
7. DESIGN 
RESPONSIVO X 
APP MOBILE
7. DESIGN RESPONSIVO X APP MOBILE 
DESIGN RESPONSIVO x APP MOBILE 
DESIGN RESPONSIVO: 
•Versão mobile de um site 
• Foco e...
7. DESIGN RESPONSIVO X APP MOBILE 
DESIGN RESPONSIVO x APP MOBILE
8. FASES DE UM 
PROJETO DE UX
8. FASES DE UM PROJETO UX 
AGÊNCIAS E STARTUPS 
Agência (modelo tradicional) 
Startup (Lean UX)
9. CASES
ARQUITETURA DE INFORMAÇÃO 
Sitemap; Fluxo de interação; Wireframes 
CASA DE 
VALENTINA
ARQUITETURA DE INFORMAÇÃO 
Sitemap; Fluxo de interação; Wireframes 
CRUZEIRO DO 
SUL VIRTUAL
PESQUISA 
Teste de Usabilidade 
JIMBO 
MOBILE
RENAULT ARQUITETURA DE INFORMAÇÃO 
Sitemap; Fluxo de interação; Wireframes
IG FUTEBOL 
ARQUITETURA DE INFORMAÇÃO 
Sitemap; Fluxo de interação; Wireframes 
DESIGN
ARQUITETURA DE INFORMAÇÃO 
Sitemap; Fluxo de interação; Wireframes 
BRADESCO 
TRADING 
APP iPhone/ iPad
ARQUITETURA DE INFORMAÇÃO 
SEBRAE Sitemap; Fluxo de interação; Wireframes 
NACIONAL PESQUISA 
Card Sorting; User Research
OI Dashboard 
de Monitoramento 
ARQUITETURA DE INFORMAÇÃO 
Sitemap; Fluxo de interação; Wireframes 
DESIGN
DNA/ 
ATOS 
ARQUITETURA DE INFORMAÇÃO 
Sitemap; Fluxo de interação; Wireframes 
DESIGN
ROUPOLOGiA ARQUITETURA DE INFORMAÇÃO 
Sitemap; Fluxo de interação; Wireframes 
App iPhone/ Landing Page/ Admin DESIGN
QRANIO ARQUITETURA DE INFORMAÇÃO 
Sitemap; Fluxo de interação; Wireframes
OBRIGAD 
11. 2528.5014 ola@tuia.me www.tuia.me
Intensivo de UX para Agências e Startups
Próximos SlideShares
Carregando em…5
×

Intensivo de UX para Agências e Startups

781 visualizações

Publicada em

Conteúdo apresentado na palestra de Intensivo UX.

Publicada em: Tecnologia
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
781
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Intensivo de UX para Agências e Startups

  1. 1. Ao longo destes 6 anos par/cipamos de muitos trabalhos que começaram com um escopo simples e, no final, transformaram-­‐se em um grande projeto. Acreditamos que uma simples ideia possa virar um case -­‐ seja de uma startup ou de uma mul/nacional -­‐ a grande questão é saber cul/var! Cada pessoa responsável pelo crescimento do projeto precisa se adaptar ao universo do que será feito, aplicar o seu melhor, admirar e manter as condições ideais para que ele con/nue a se desenvolver. ASSIM COMO AS PLANTAS, UM NEGÓCIO TAMBÉM PRECISA SER CULTIVADO E É ISSO QUE QUEREMOS FAZER JUNTO COM VOCÊ E PELO SEU PROJETO. TUIA, CRESCEMOS JUNTOS!
  2. 2. MARCAS ATENDIDAS EM 6 ANOS, SÃO MAIS DE 100 MARCAS E 400 PROJETOS
  3. 3. INTENSIVO DE UX PARA AGÊNCIAS E STARTUPS
  4. 4. 1. O QUE É E O QUE NÃO É UX
  5. 5. 1. O QUE É E O QUE NÃO É UX? O QUE É UX? "User Experience" ou "Experiência do usuário" envolve todos os aspectos da interação dos usuários finais com sua empresa, serviços e produtos. (NIELSEN NORMAN GROUP)
  6. 6. 1. O QUE É E O QUE NÃO É UX? O QUE NÃO É UX? DESIGN VISUAL/ INTERFACE/ USER INTERFACE (Etapa iniciada após a finalização da etapa de UX) PROGRAMAÇÃO/ DESENVOLVIMENTO Também iniciada após a finalização da etapa de UX)
  7. 7. 2. BENEFÍCIOS DE UX
  8. 8. 2. BENEFÍCIOS DO UX O QUE NÃO É UX? DESIGN Foco apenas no aspecto visual e subjetividade; PROGRAMAÇÃO Foco apenas na programação; CLIENTE Entendimento melhor do projeto; USUÁRIO Melhor usabilidade e maior satisfação.
  9. 9. 3. BOAS PRÁTICAS
  10. 10. 3. BOAS PRÁTICAS BRIEFING • O briefing deve ser o ponto inicial de um projeto de UX; • Através dele, é possível aprofundar o entendimento do projeto e começar a integração da equipe; • É interessante que seja levantado e/ou confirmado na reunião de kick-­‐off do projeto, que preferencialmente deve ser presencial e contar com toda a equipe do projeto, para projetos de qualquer tamanho (desde um hotsite até um portal.
  11. 11. 3. BOAS PRÁTICAS BRIEFING PERGUNTAS INTERESSANTES PARA UM BOM BRIEFING: • O cliente quer mesmo um site? • Quais são os problemas do site atual? • O que precisa ser melhorado? • Qual é o público que o usa o site atual? • Quais são os benefícios do site atual? • Quais são as fontes de receita do site? • Quem são os concorrentes? • Qual é o diferencial do site atual? • Quais são os pontos fracos do site atual? • Quais são as referências do cliente? • Qual é a fase do projeto? • Quem são as pessoas que formam a equipe do projeto?
  12. 12. 3. BOAS PRÁTICAS BENCHMARKING • Benchmarking COMPETITIVO: análise dos concorrentes para entender pontos fracos e fortes e perceber oportunidades de melhoria no site do cliente (geralmente utilizado em novas versões de sites para serviços já estabelecidos no mercado) • Benchmarking INSPIRACIONAL: análise de sites similares e referências de outros segmentos para entender pontos fracos e fortes e identificar padrões de navegação e de conteúdo (geralmente utilizado em novas versões de sites para novos serviços a serem oferecidos para o mercado)
  13. 13. 3. BOAS PRÁTICAS BENCHMARKING • Geralmente são analisados até 5 sites concorrentes / similares • São definidos de 4 a 5 itens para serem analisados no projeto; por exemplo, em um site para indústria farmacêutica, podemos analisar os seguintes itens: -­‐I) Serviços oferecidos para o usuário -­‐II) Conteúdo -­‐III) Integração com outros sites da marca -­‐IV) Experiência de uso (usabilidade, navegação e estética) • Também podem ser utilizados dados de navegação oferecidas por ferramentas específicas, como Alexa (que oferece dados de navegação do site do seu cliente e dos concorrentes) • Entregável é um relatório final mostrando os pontos fortes e fracos de cada concorrente e um comparativo
  14. 14. 3. BOAS PRÁTICAS BENCHMARKING
  15. 15. 3. BOAS PRÁTICAS PERFIS DE USUÁRIOS • Definição dos perfis de usuários e tarefas • Parecidos com caso de uso ou cenários (usados em Engenharia de Software) • Servem para definir conteúdo do site, conteúdo da página e prioridade para equipes de Design e Programação
  16. 16. 3. BOAS PRÁTICAS PERFIS DE USUÁRIOS
  17. 17. 3. BOAS PRÁTICAS SITEMAP • Importante para conhecimento detalhado e dimensionamento do projeto; • Ferramenta auxiliar para equipes de Design e Programação; • Auxílio para definição de perfis de usuário e conteúdo disponibilizado para cada perfil.
  18. 18. 3. BOAS PRÁTICAS SITEMAP
  19. 19. 3. BOAS PRÁTICAS PROTOTIPAÇÃO • Os wireframes são uma espécie de “planta baixa” do site; • Protótipo navegável de alta fidelidade: todas as páginas e funcionalidades do site devem ser detalhadas no protótipo; • Contém todo o escopo levantado no briefing, com especificações técnicas e todas as informações do cliente; • É desenvolvido pensando na usabilidade do projeto e nos usuários, levando em consideração os objetivos de negócio do projeto; • Em um projeto tradicional de agência digital, acaba se tornando a documentação do projeto, por ser mais tangível e bem mais detalhado que o briefing; • Em uma agência, as fases de Design Visual e Programação geralmente começam apenas após a aprovação dos wireframes.
  20. 20. 3. BOAS PRÁTICAS PROTOTIPAÇÃO
  21. 21. 4. PESQUISA
  22. 22. 4. PESQUISA PESQUISA COM USUÁRIO • Objetivo é descobrir as percepções, crenças e atitudes em relação a um produto ou marca/ • Pode ser de vários tipos: I) Teste de usabilidade II) Questionário III) Entrevista IV) Pesquisa em campo V) Pesquisa baseada em etnografia
  23. 23. 4. PESQUISA TESTE DE USABILIDADE -­‐-­‐ Testes com público-­‐alvo do site para entender a aceitação do novo site e levantar possíveis pontos de melhoria -­‐-­‐ São conduzidos por um monitor -­‐-­‐ São realizados em salas com salas de espelho cego e gravação dos movimentos do mouse e webcam -­‐-­‐ Paga-­‐se gratificação em dinheiro para os participantes -­‐-­‐ É um projeto complexo que demora em média 20 a 30 dias úteis -­‐-­‐ O projeto é composto por 6 etapas: Planejamento, Preparação, Teste Piloto, Execução dos Testes, Criação de Relatório e Apresentação dos Resultados -­‐ Entregável: Relatório com conteúdo do Teste -­‐ Problemas de pesquisa definidos, Método, Resultados, Destaques das Entrevistas e Recomendações gerais
  24. 24. 4. PESQUISA TESTE DE USABILIDADE
  25. 25. 4. PESQUISA FOCUS GROUP • Pesquisa de mercado feita com um grupo de pessoas; • Conversa é conduzida para gerar “insights"; • Mais focada para tomada de decisões mercadológicas (preço, praça, promoção, desenvolvimento); • Resultado é um relatório de impressões gerais.
  26. 26. 5. MÉTRICAS E CONTEÚDO
  27. 27. 5. MÉTRICAS E CONTEÚDO WEB ANALYTICS • É o planejamento das métricas do site: tudo que deve ser medido e como deve ser medido • Uso do framework DM3 (Digital Marketing and Measurement Model); • Configuração do Google Analytics (ou ferramenta similar): -­‐I) Funis de Conversão -­‐II) Metas do Site -­‐III) Elementos em cada página • Os entregáveis são dois documentos: -­‐I) Framework DM3; -­‐II) Mapa de Tags, uma planilha em Excel onde todos os elementos que devem ser tagueados no site são descritos, junto com o código para implementação no site pelo desenvolvedor.
  28. 28. 5. MÉTRICAS E CONTEÚDO WEB ANALYTICS
  29. 29. 5. MÉTRICAS E CONTEÚDO WEB ANALYTICS
  30. 30. 5. MÉTRICAS E CONTEÚDO SEO (Search Engine Optimization) • No estudo inicial de SEO, chamado de Setup, é analisado o contéudo do site atual, o segmento do cliente (quais são as palavras-­‐chaves mais procuradas, quais são usadas pelos concorrentes) e também são analisados os sites dos concorrentes; • Com base neste estudo de SEO, pode ser definida uma estratégia de atualização de conteúdo para o site, além de campanhas de Adwords (e ferramentas similares); • O trabalho de manutenção de SEO pode trabalhar em conjunto com o trabalho de busca paga, podendo o SEO focar nas palavras-­‐chaves mais caras construindo relevância para tais palavras e o trabalho de Adwords focando nas palavras menos utilizadas pelos concorrentes (e provavelmente mais baratas). •Os entregáveis são 3 documentos: -­‐I) Termos de Uso e Concorrentes; -­‐II) Avaliação de Conteúdo; -­‐III) Manual de boas práticas para Construção de SEO
  31. 31. 5. MÉTRICAS E CONTEÚDO SEO (Search Engine Optimization)
  32. 32. 5. MÉTRICAS E CONTEÚDO CRO (Convert Rate Optimization) • Foco na melhoria da Taxa de Conversão; • Voltado para sites transacionais; • Mix de Métricas (Google Analytics), Arquitetura de Informação e Design Visual; • Projetos de 4 a 6 meses; • Projeto dividido em ciclos, geralmente mensais, com foco específico; -­‐ -­‐EXEMPLO: -­‐I) No primeiro mês, focamos na página de Produtos, com levantamento dos pontos de melhoria, testes A/B a serem realizados, métricas e KPIs a serem monitorados; -­‐II) Com acompanhamento, após o atingimento das metas, o foco passa a ser a página -­‐de Carrinho.
  33. 33. 6. ENTREGÁVEIS
  34. 34. 6. ENTREGÁVEIS WIREFRAMES
  35. 35. 6. ENTREGÁVEIS BENCHMARKING
  36. 36. 6. ENTREGÁVEIS AVALIAÇÃO HEURÍSTICA • Feita por 2 especialistas que avaliam o site e levantam pontos de melhoria • Utilizada em várias situações: -­‐I) Cliente não quer mudar o site atual, por resistência ou falta de verba; -­‐II) Nova conta na agência: documento de apoio para o planejamento das ações para o cliente; -­‐III) Concorrência: documento de apoio na defesa da idéia da agência. Entregável é um relatório com os pontos de melhoria em cada página do site, com sugestões de ações para aplicação imediata e grau de gravidade, como, por exemplo: I) Mudança de legenda de botão; II) Exclusão campo de formulário; III) Adição de mensagem de feedback.
  37. 37. 6. ENTREGÁVEIS AVALIAÇÃO HEURÍSTICA
  38. 38. 6. ENTREGÁVEIS INVENTÁRIO DE CONTEÚDO • Tipo de projeto mais voltado para portais e sites com grande quantidade de conteúdo; •É levantado todo o conteúdo “esquecido" ou “escondido" do site; • Ótimo material para a Equipe de Programação e pelo conteúdo para adequação ao novo projeto; • Ótimo material para Equipe de SEO para manter a relevância do conteúdo e do site
  39. 39. 6. ENTREGÁVEIS INVENTÁRIO DE CONTEÚDO
  40. 40. 7. DESIGN RESPONSIVO X APP MOBILE
  41. 41. 7. DESIGN RESPONSIVO X APP MOBILE DESIGN RESPONSIVO x APP MOBILE DESIGN RESPONSIVO: •Versão mobile de um site • Foco em conteúdo com interação e conversão (contato, vendas e afins) APP MOBILE: • Projeto mais complexo e com maior custo • Oferece funcionalidades específicas para mobile e diferentes ou complementares das funcionalidades do site
  42. 42. 7. DESIGN RESPONSIVO X APP MOBILE DESIGN RESPONSIVO x APP MOBILE
  43. 43. 8. FASES DE UM PROJETO DE UX
  44. 44. 8. FASES DE UM PROJETO UX AGÊNCIAS E STARTUPS Agência (modelo tradicional) Startup (Lean UX)
  45. 45. 9. CASES
  46. 46. ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes CASA DE VALENTINA
  47. 47. ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes CRUZEIRO DO SUL VIRTUAL
  48. 48. PESQUISA Teste de Usabilidade JIMBO MOBILE
  49. 49. RENAULT ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes
  50. 50. IG FUTEBOL ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes DESIGN
  51. 51. ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes BRADESCO TRADING APP iPhone/ iPad
  52. 52. ARQUITETURA DE INFORMAÇÃO SEBRAE Sitemap; Fluxo de interação; Wireframes NACIONAL PESQUISA Card Sorting; User Research
  53. 53. OI Dashboard de Monitoramento ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes DESIGN
  54. 54. DNA/ ATOS ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes DESIGN
  55. 55. ROUPOLOGiA ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes App iPhone/ Landing Page/ Admin DESIGN
  56. 56. QRANIO ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes
  57. 57. OBRIGAD 11. 2528.5014 ola@tuia.me www.tuia.me

×