O documento discute a importância de cultivar projetos para que eles continuem a se desenvolver. A agência Tuia cresceu junto com seus clientes ao longo de 6 anos, atendendo mais de 100 marcas e 400 projetos. Eles oferecem serviços de UX para agências e startups.
2. 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!
6. 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)
7. 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)
9. 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.
11. 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.
12. 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?
13. 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)
14. 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
16. 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
18. 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.
20. 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.
23. 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
24. 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
26. 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.
28. 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.
31. 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
32. 5. MÉTRICAS E CONTEÚDO
SEO (Search Engine Optimization)
33. 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.
37. 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.
39. 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
42. 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