Intensivo de UX para Agências e Startups

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


• 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

• 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


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


BRADESCO TRADINGAPP iPhone/ iPad

ARQUITETURA DE INFORMAÇÃO Sitemap; Fluxo de interação; WireframesSEBRAE

NACIONAL PESQUISA Card Sorting; User Research

OIDashboard de Monitoramento


DESIGN

DNA/ATOS


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

Intensivo de UX para Agências e Startups

Technology

Transcript of Intensivo de UX para Agências e Startups