Agosto, 2015.
Rua Jardim Botanico, 518, 2º andar, Rio de Janeiro
+55 21 3550 3540 / hugeinc.com
UX em projetos
digitais.
Senac-RJ.
Agosto 2015
Diretora de User Experience
É a responsável por pesquisa e pela estratégia de
User Experience no escritório brasileiro da ...
Sobre a Huge.
Sobre a Huge:
A Huge é uma agência global
que cria experiências digitais
com foco no usuário e nos
objetivos de negócios.
Nascidos no
Brooklyn.
Fundado como
um studio de
Design centrado
no usuário.
7 employees.
BKLN.
2004.
217 employees worldwide.
2011.
BKLN
175 people.
LND
20 people.
LA
15 people.
RIO
7 people.
1,000+ employees worldwide. Independent agency within IPG.
ATL. BKLN. DC. LDN. LA. PDX. RIO. SF.
2015.
SGP. TO.COL.
Pool global de talentos
compartilhado pelos nossos
escritórios na América do Norte,
América Latina, Europa e Ásia.
ATL. BK...
Fazemos produtos que as
pessoas amam.
Huge Brasil.
2011 2012 2013 2014 2015
Ad Age A-List:
4 times in the last 5 years.
Digiday and Mashable:
Most innovative agency.
MediaPost:
2015 Agency of the Ye...
Approach.
SobreaHuge
Descoberta
Entrevista com
Stakeholders
Entrevistas com usuários
Análise competitiva
Análise de utilização de
website
Análi...
Tecnologia.Necessidade
dos usuários.
+ + =
Experiências que mudam a
vida das pessoas e
impulsionam negócios.
Nosso approac...
Como trabalhamos.
Equipe interdisciplinar.
Cliente como parceiro.
Design voltado para o negócio.
Colaboração constante com os clientes para construir produtos melhores.
Colaboração transparente.
E temos experiência com isso.
Atualmente.
UX.
Por que devemos nos
preocupar com User Experience?
Porque estamos expostos a uma
complexidade cada vez maior.
Família assistindo TV nos Anos 50.
Família assistindo TV em 2015.
Recebemos cinco vezes mais informação do que há 30 anos.
Uma pessoa comum gera um volume de informações equivalente seis jornais por dia.
Como faz?
E como projetamos uma
experiência digital que acomode a
crescente complexidade?
Dois pilares.
Pesquisa. Design.
Pesquisa.
“Tendemos a projetar nossa
racionalidade e nossas crenças
na racionalidade e nas crenças
dos outros”.
Don Norman, The Desi...
Há várias razões para fazermos
pesquisa com usuários.
Para compreender as necessidades
dos usuários.
Razão #1:
Para descobrir gaps de
necessidades não atendidas que
podem gerar oportunidades.
Razão #2:
Para entender a gravidade dos
problemas encontrados e priorizar
a solução deles.
Razão #3:
E o resultado da pesquisa
possibilita que o time tenha
uma visão alinhada para
projetar o produto ou serviço.
Razão #4:
Resumindo:
Para criar empatia entre quem cria
e quem usa o produto ou serviço.
Empatia:
s.f.Identificaçãodeumsujeitocomooutro; quando
alguém,atravésdesuasprópriassensaçõese
especulações,secolocanolugard...
Empatia é quase amor.
Pesquisas com
usuários nos
informam e nos
inspiram.
Métodos.
Pesquisa:
Usuários realizam tarefas em um site ou protótipo e o time observa suas dificuldades.
Teste de Usabilidade
Usuários agrupam conteúdo de acordo com seu modelo mental e dão nomes às categorias
criadas.
Card Sorting aberto
Composição de métodos para entender o contexto dos usuários, suas necessidades e a relação
com o produto que estamos estud...
Queríamos entender como as
pessoas usam o site da Caixa.
Queríamos entender como as
pessoas usam o site da Caixa.
Queríamos aprender:
Como as pessoas tomam decisões financeiras?
O que é mais importante na hora de contratar um produto?
Qu...
Design.
Time multidisciplinar
•  Strategy
•  User Experience
•  Product Design
•  Prototype
Design na Huge.
Do your job.
Design na Huge.
Do your job.
Do it great.
Design na Huge:
Do it great.
Mas o que é algo foda?
A gente não tem a
mínima ideia.
Mas sabemos que um trabalho
foda tem que possuir pelo menos
3 coisas:
Conceito
Uma motivacão inteligente e
que faça sentido.
Técnica
Maestria na técnica e na
direção de arte.
Originalidade
Ous...
Conceito
Técnica
Originalidade
Bom Bom
Bom
Foda.
Quando?
Descoberta e
planejamento
Design
concepts
Design
detalhado
Design concept:
Materialização da visão
estratégica do projeto.
Simplicidade:
Suar a camisa.
Sketches.
Design:
Wireframes.
Design:
Rápidos para mostrar fluxos,
melhores ainda para testar novas
formas de interação.
Wireframes:
Protótipos:
Construir, testar, melhorar.
Visual Design.
Design:
Referências.
Visualdesign:
Olhe para a concorrência...
...mas não se limite a ela.
Assets do
cliente.
Visualdesign:
Fonte: Visão Discovery TVE (2014)
Moodboards.
VisualDesign:
Versões.
VisualDesign:
Versões:
Quanto maior a exploração, mais
certeza teremos dos caminhos
seguidos.
Make something
you love.
Então, como isso se parece?
Redesenho da área aberta do portal da Caixa Econômica Federal.
Caixa.
Experiência mobile do Estadão.
Riogaleão.
Criação do novo site do Aeroporto Galeão.
Discovery Networks.
Site dos canais para América Latina e app de TV Everywhere.
Nielsen Norman Group:
10 best intranets 2013.
do bem máquina.
Criação do app para a primeira smartband brasileira.
Perguntas?
Agosto, 2015.
Rua Jardim Botanico, 518, 2º andar, Rio de Janeiro
+55 21 3550 3540 / hugeinc.com
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
UX em Projetos Digitais
Próximos SlideShares
Carregando em…5
×

UX em Projetos Digitais

564 visualizações

Publicada em

Compreender as necessidades do usuário, entender a gravidade dos problemas do usuários e descobrir gaps no seu processo são alguns dos itens essenciais para projetarmos uma experiência do usuário excelente.

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

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

Nenhuma nota no slide

UX em Projetos Digitais

  1. 1. Agosto, 2015. Rua Jardim Botanico, 518, 2º andar, Rio de Janeiro +55 21 3550 3540 / hugeinc.com
  2. 2. UX em projetos digitais. Senac-RJ. Agosto 2015
  3. 3. Diretora de User Experience É a responsável por pesquisa e pela estratégia de User Experience no escritório brasileiro da Huge. Laura, que é graduada pela UFRJ e pela Middlesex University, já trabalhou nos Estados Unidos, Reino Unido e na Índia e tem mais de Laura tem 15 anos de atuação em projetos digitais, no Brasil, Estados Unidos, Reino Unido e Índia. Começou sua carreira na Globo.com, onde ajudou a formar o time de User Experience da empresa e já participou de projetos para clientes como Oi, Veja São Paulo, Caixa Econômica Federal, Comcast, e Financial Times. Laura Lessa.
  4. 4. Sobre a Huge.
  5. 5. Sobre a Huge: A Huge é uma agência global que cria experiências digitais com foco no usuário e nos objetivos de negócios.
  6. 6. Nascidos no Brooklyn.
  7. 7. Fundado como um studio de Design centrado no usuário.
  8. 8. 7 employees. BKLN. 2004.
  9. 9. 217 employees worldwide. 2011. BKLN 175 people. LND 20 people. LA 15 people. RIO 7 people.
  10. 10. 1,000+ employees worldwide. Independent agency within IPG. ATL. BKLN. DC. LDN. LA. PDX. RIO. SF. 2015. SGP. TO.COL.
  11. 11. Pool global de talentos compartilhado pelos nossos escritórios na América do Norte, América Latina, Europa e Ásia. ATL. BKLN. DC. LDN. LA. PDX. RIO. SF. SGP. TO.COL.
  12. 12. Fazemos produtos que as pessoas amam.
  13. 13. Huge Brasil. 2011 2012 2013 2014 2015
  14. 14. Ad Age A-List: 4 times in the last 5 years. Digiday and Mashable: Most innovative agency. MediaPost: 2015 Agency of the Year.
  15. 15. Approach. SobreaHuge
  16. 16. Descoberta Entrevista com Stakeholders Entrevistas com usuários Análise competitiva Análise de utilização de website Análise tecnológica Desk research Planejamento Priorização de objetivos Visão de projeto & roteiro Content brief Estudos de viabilidade Visão estratégica Criação & Design Estratégia de conteúdo Arquitetura da informação e fluxos Navegação Design concepts Desenvolvimento de wireframes Protótipos e testes com usuário Design Gráfico Desenvolvimento Style guide Annotations Codificação html Configuração de analytics Garantia de Qualidade Gerenciamento do Lançamento Métricas e Evolução Análise de rastreamento Otimização de mídia Medição de sucesso Pesquisas & planos Futuras melhorias Nosso processo.
  17. 17. Tecnologia.Necessidade dos usuários. + + = Experiências que mudam a vida das pessoas e impulsionam negócios. Nosso approach. Valores da marca.
  18. 18. Como trabalhamos. Equipe interdisciplinar. Cliente como parceiro. Design voltado para o negócio.
  19. 19. Colaboração constante com os clientes para construir produtos melhores. Colaboração transparente.
  20. 20. E temos experiência com isso.
  21. 21. Atualmente.
  22. 22. UX.
  23. 23. Por que devemos nos preocupar com User Experience?
  24. 24. Porque estamos expostos a uma complexidade cada vez maior.
  25. 25. Família assistindo TV nos Anos 50.
  26. 26. Família assistindo TV em 2015.
  27. 27. Recebemos cinco vezes mais informação do que há 30 anos.
  28. 28. Uma pessoa comum gera um volume de informações equivalente seis jornais por dia.
  29. 29. Como faz? E como projetamos uma experiência digital que acomode a crescente complexidade?
  30. 30. Dois pilares. Pesquisa. Design.
  31. 31. Pesquisa.
  32. 32. “Tendemos a projetar nossa racionalidade e nossas crenças na racionalidade e nas crenças dos outros”. Don Norman, The Design of Everyday Things
  33. 33. Há várias razões para fazermos pesquisa com usuários.
  34. 34. Para compreender as necessidades dos usuários. Razão #1:
  35. 35. Para descobrir gaps de necessidades não atendidas que podem gerar oportunidades. Razão #2:
  36. 36. Para entender a gravidade dos problemas encontrados e priorizar a solução deles. Razão #3:
  37. 37. E o resultado da pesquisa possibilita que o time tenha uma visão alinhada para projetar o produto ou serviço. Razão #4:
  38. 38. Resumindo: Para criar empatia entre quem cria e quem usa o produto ou serviço.
  39. 39. Empatia: s.f.Identificaçãodeumsujeitocomooutro; quando alguém,atravésdesuasprópriassensaçõese especulações,secolocanolugardeoutrapessoa, tentandoentendê-la.
  40. 40. Empatia é quase amor.
  41. 41. Pesquisas com usuários nos informam e nos inspiram.
  42. 42. Métodos. Pesquisa:
  43. 43. Usuários realizam tarefas em um site ou protótipo e o time observa suas dificuldades. Teste de Usabilidade
  44. 44. Usuários agrupam conteúdo de acordo com seu modelo mental e dão nomes às categorias criadas. Card Sorting aberto
  45. 45. Composição de métodos para entender o contexto dos usuários, suas necessidades e a relação com o produto que estamos estudando. Listening Labs.
  46. 46. Queríamos entender como as pessoas usam o site da Caixa.
  47. 47. Queríamos entender como as pessoas usam o site da Caixa.
  48. 48. Queríamos aprender: Como as pessoas tomam decisões financeiras? O que é mais importante na hora de contratar um produto? Qual a percepção das pessoas em relação a investimento? De que forma as pessoas costumam tirar dúvidas? Que dificuldades as pessoas enfrentam no dia a dia?
  49. 49. Design.
  50. 50. Time multidisciplinar •  Strategy •  User Experience •  Product Design •  Prototype
  51. 51. Design na Huge. Do your job.
  52. 52. Design na Huge. Do your job. Do it great.
  53. 53. Design na Huge: Do it great.
  54. 54. Mas o que é algo foda?
  55. 55. A gente não tem a mínima ideia.
  56. 56. Mas sabemos que um trabalho foda tem que possuir pelo menos 3 coisas:
  57. 57. Conceito Uma motivacão inteligente e que faça sentido. Técnica Maestria na técnica e na direção de arte. Originalidade Ousadia para procurar soluções que ainda não foram tentadas. Um trabalho foda:
  58. 58. Conceito Técnica Originalidade Bom Bom Bom Foda.
  59. 59. Quando? Descoberta e planejamento Design concepts Design detalhado
  60. 60. Design concept: Materialização da visão estratégica do projeto.
  61. 61. Simplicidade: Suar a camisa.
  62. 62. Sketches. Design:
  63. 63. Wireframes. Design:
  64. 64. Rápidos para mostrar fluxos, melhores ainda para testar novas formas de interação. Wireframes:
  65. 65. Protótipos: Construir, testar, melhorar.
  66. 66. Visual Design. Design:
  67. 67. Referências. Visualdesign:
  68. 68. Olhe para a concorrência...
  69. 69. ...mas não se limite a ela.
  70. 70. Assets do cliente. Visualdesign:
  71. 71. Fonte: Visão Discovery TVE (2014)
  72. 72. Moodboards. VisualDesign:
  73. 73. Versões. VisualDesign:
  74. 74. Versões: Quanto maior a exploração, mais certeza teremos dos caminhos seguidos.
  75. 75. Make something you love.
  76. 76. Então, como isso se parece?
  77. 77. Redesenho da área aberta do portal da Caixa Econômica Federal. Caixa.
  78. 78. Experiência mobile do Estadão.
  79. 79. Riogaleão. Criação do novo site do Aeroporto Galeão.
  80. 80. Discovery Networks. Site dos canais para América Latina e app de TV Everywhere.
  81. 81. Nielsen Norman Group: 10 best intranets 2013.
  82. 82. do bem máquina. Criação do app para a primeira smartband brasileira.
  83. 83. Perguntas?
  84. 84. Agosto, 2015. Rua Jardim Botanico, 518, 2º andar, Rio de Janeiro +55 21 3550 3540 / hugeinc.com

×