intensivo de ux para agências e startups
DESCRIPTION
Conteúdo apresentado na palestra de Intensivo UX.TRANSCRIPT
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.
TUIA, CRESCEMOS JUNTOS!
ASSIM COMO AS PLANTAS, UM NEGÓCIO TAMBÉM PRECISA SER CULTIVADO E É ISSO QUE QUEREMOS FAZER JUNTO COM VOCÊ E PELO SEU PROJETO.
EM 6 ANOS, SÃO MAIS DE 100 MARCAS E 400 PROJETOS
MARCAS ATENDIDAS
INTENSIVO DE UXPARA AGÊNCIASE STARTUPS
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.
1. O QUE É E O QUE NÃO É UX?
(NIELSEN NORMAN GROUP)
DESIGN VISUAL/ INTERFACE/ USER INTERFACE (Etapa iniciada após a finalização da etapa de UX) PROGRAMAÇÃO/ DESENVOLVIMENTOTambém iniciada após a finalização da etapa de UX)
O QUE NÃO É UX?1. O QUE É E O QUE NÃO É UX?
2. BENEFÍCIOS DE UX
O QUE NÃO É UX?2. BENEFÍCIOS DO UX
Foco apenas no aspecto visual e subjetividade;DESIGN
Foco apenas na programação;PROGRAMAÇÃO
Entendimento melhor do projeto;CLIENTE
Melhor usabilidade e maior satisfação.USUÁRIO
3. BOAS PRÁTICAS
• 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.
BRIEFING3. BOAS PRÁTICAS
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?
BRIEFING3. BOAS PRÁTICAS
• 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)
BENCHMARKING3. BOAS PRÁTICAS
• 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
BENCHMARKING3. BOAS PRÁTICAS
BENCHMARKING3. BOAS PRÁTICAS
• 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
PERFIS DE USUÁRIOS3. BOAS PRÁTICAS
PERFIS DE USUÁRIOS3. BOAS PRÁTICAS
• 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.
SITEMAP3. BOAS PRÁTICAS
SITEMAP3. BOAS PRÁTICAS
• 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.
PROTOTIPAÇÃO3. BOAS PRÁTICAS
PROTOTIPAÇÃO3. BOAS PRÁTICAS
4. PESQUISA
• 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
PESQUISA COM USUÁRIO4. PESQUISA
-‐-‐ 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
TESTE DE USABILIDADE4. PESQUISA
TESTE DE USABILIDADE4. PESQUISA
• 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.
FOCUS GROUP4. PESQUISA
5. MÉTRICAS E CONTEÚDO
• É 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.
WEB ANALYTICS5. MÉTRICAS E CONTEÚDO
WEB ANALYTICS5. MÉTRICAS E CONTEÚDO
WEB ANALYTICS5. MÉTRICAS E CONTEÚDO
• 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
SEO (Search Engine Optimization)5. MÉTRICAS E CONTEÚDO
SEO (Search Engine Optimization)5. MÉTRICAS E CONTEÚDO
• 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.
CRO (Convert Rate Optimization)5. MÉTRICAS E CONTEÚDO
6. ENTREGÁVEIS
WIREFRAMES6. ENTREGÁVEIS
BENCHMARKING6. ENTREGÁVEIS
• 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.
AVALIAÇÃO HEURÍSTICA6. ENTREGÁVEIS
AVALIAÇÃO HEURÍSTICA6. ENTREGÁVEIS
• 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
INVENTÁRIO DE CONTEÚDO6. ENTREGÁVEIS
INVENTÁRIO DE CONTEÚDO6. ENTREGÁVEIS
7. 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
DESIGN RESPONSIVO x APP MOBILE7. DESIGN RESPONSIVO X APP MOBILE
DESIGN RESPONSIVO x APP MOBILE7. DESIGN RESPONSIVO X APP MOBILE
8. FASES DE UM PROJETO DE UX
Agência (modelo tradicional)
Startup (Lean UX)
AGÊNCIAS E STARTUPS8. FASES DE UM PROJETO 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
JIMBOMOBILE
ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; WireframesRENAULT
IG FUTEBOLARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes
DESIGN
ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes
BRADESCO TRADINGAPP iPhone/ iPad
ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; WireframesSEBRAE
NACIONAL PESQUISA Card Sorting; User Research
OIDashboard 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
ROUPOLOGiAARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes
DESIGNApp iPhone/ Landing Page/ Admin
QRANIO ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; Wireframes
OBRIGAD
[email protected]. 2528.5014 www.tuia.me