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.
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!

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 interação dos usuários finais
com sua empresa, serviços e produtos.
(NIELSEN NORMAN GROUP)

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)

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.

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.

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?

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)

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

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á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

3. BOAS PRÁTICAS
PERFIS DE USUÁRIOS

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.

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.

3. BOAS PRÁTICAS
PROTOTIPAÇÃO

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

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

4. PESQUISA
TESTE DE USABILIDADE

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.

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.

WEB ANALYTICS

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

SEO (Search Engine Optimization)

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.

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.

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ú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

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 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

7. DESIGN RESPONSIVO X APP MOBILE
DESIGN RESPONSIVO x APP MOBILE

8. FASES DE UM PROJETO UX
AGÊNCIAS E STARTUPS
Agência (modelo tradicional)
Startup (Lean UX)

ARQUITETURA DE INFORMAÇÃO
Sitemap; Fluxo de interação; Wireframes
CASA DE
VALENTINA

CRUZEIRO DO
SUL VIRTUAL

PESQUISA
Teste de Usabilidade
JIMBO
MOBILE

RENAULT ARQUITETURA DE INFORMAÇÃO

IG FUTEBOL
DESIGN

BRADESCO
TRADING
APP iPhone/ iPad

SEBRAE Sitemap; Fluxo de interação; Wireframes
NACIONAL PESQUISA
Card Sorting; User Research

OI Dashboard
de Monitoramento
DESIGN

DNA/
ATOS
DESIGN

ROUPOLOGiA ARQUITETURA DE INFORMAÇÃO
App iPhone/ Landing Page/ Admin DESIGN

QRANIO ARQUITETURA DE INFORMAÇÃO

OBRIGAD
11. 2528.5014 ola@tuia.me www.tuia.me

Intensivo de UX para Agências e Startups

Mais conteúdo relacionado

Semelhante a Intensivo de UX para Agências e Startups

Intensivo de UX para Agências e Startups