ux no limite: como fazer um bom trabalho em experiência do usuário apesar das limitações

Autores

Andressa Vieira É formada em Marketing e trabalha há 10 anos com internet, 8 deles com usabilidade, arquitetura de informação, design de interação e experiência do usuário. Já passou pela Try, Mapa Digital, Lumens e UOL, sendo responsável pela coordenação de estudos de usabilidade e arquitetura de informação. Realizou dezenas de projetos para sites institucionais, financeiros, portais, e-commerce, entre outras indústrias. Hoje é Gerente de Experiência do Usuário da Locaweb e Diretora e co-fundadora da UPA São Paulo. andressa.vieira@locaweb.com.br

Autores

Paula Sato Formada em Jornalismo pela ECA-USP, tem pós-graduação em Arquitetura da Informação pela Faculdade Impacta de Tecnologia. Trabalhou com reportagem e redação em redações de jornais, revistas e portais no Brasil e Japão, escrevendo sobre tudo, até fofoca. Também já foi garçonete, bartender e recepcionista. Atualmente, é Designer de Experiência do Usuário na Locaweb. paula.sato@locaweb.com.br

Autores

Marcos Vigorito Formado em publicidade pela ECA-USP e técnico em processamento de dados pela Escola Técnica Federal de São Paulo. Trabalhou com a parte técnica na IBM Brasil e teve carreira solo desenvolvendo sites em outras empresas que passou. Oficialmente trabalha com usabilidade e experiência do usuário há 4 anos. Hoje usa os diferentes conhecimentos como Designer de Experiência do Usuário na Locaweb. marcos.oliveira@locaweb.com.br

Autores

Gabriela Muhlbach Graduada em Comunicação Digital pela UNISINOS, trabalhou com editoração gráfica e foi arquiteta de informação na W3 Haus em Porto Alegre. Trabalhou na Locaweb como Designer de Experiência do Usuário. Atualmente trabalha no Terra como Arquiteta de Informação.

Autores

Gabriela Muhlbach Graduada em Comunicação Digital pela UNISINOS, trabalhou com editoração gráfica e foi arquiteta de informação na W3 Haus em Porto Alegre. Trabalhou na Locaweb como Designer de Experiência do Usuário. Atualmente trabalha no Terra como Arquiteta de Informação.

Toda a equipe

•  Estamos  representando  essa  galera!  

•  Equipe  mul3  disciplinar:  8  pessoas  de  diversas  formações,  2  focadas  em  design  visual  

•  Nós  fazemos  arquitetura  de  informação,  design  de  interação,  design  de  interface,  QA  (quality  assurance)  e  pesquisa  (de  mercado  e  com  usuários)  

Toda a equipe

O que a Locaweb faz?

O que a Locaweb faz?

•  A  empresa  é  conhecida  por  oferecer  hospedagem  e  registro  de  domínio  

•  Também  é  forte  em  Cloud  Server  

•  Mas  ainda  tem  produtos  como  o  PABX  Virtual  (ramais  VOIP),  gateway  de  pagamentos,  WebStore  (loja  virtual),  WebDesk  (sistema  de  helpdesk)  e  WebChat  (chat  online)  

Nosso carro chefe

e Cloud

e PABX Virtual

Gateway de pagamento

E-mail marketing [+15 mil]

Novos produtos: WebDesk

WebChat

WebStore

Organograma da Locaweb

Onde UX se encaixa?

•  UX  faz  parte  da  diretoria  de  produtos  

•  Trabalhamos  muito  próximo  da  gerência  de  produto  (PO)  e  tecnologia  (DEV)  

Onde UX se encaixa?

Site é com o Marketing

•  Cuidamos  apenas  da  interface  de  u3lização  dos  serviços  (após  contratação)  

•  O  site  não  logado  é  um  canal  de  comuniçação  e  venda.  E  é  o  marke3ng  quem  cuida  dele  

Site é com o Marketing

O que fazermos

•  Cuidamos  dos  produtos:    desde  fichas  de  contratação  até  a  interface  de  administração  

•  Wireframes,  protó3pos,  especificações,  layout,  pesquisa,  textos  e  pitacos  

•  E  trabalhamos  paralelamente  ao  desenvolvimento  

Nosso processo

•  Tudo  é  bastante  dinâmico,  pois  adotamos  metodologias  ágeis  de  desenvolvimento  

•  Kanban  (este  quadro)  é  um  instrumento  que  nos  ajuda  a  enxergar  o  que  está  acontecendo.  Como  está  o  desenvolvimento  da  história,  ritmo,  pendências,  prioridades,  envolvidos  e  dependências  

•  Também  é  uma  ferramente  importante  de  comunicação  com  a  equipe:  obter  o  feedback  sobre  o  nosso  processo,  sinalizar  impedimentos  etc    

Nosso processo

Lidando com sistemas legados

Monstro gigante e obsoleto

•  A  empresa  está  há  13  anos  no  mercado,  tem  mais  de  600  funcionário  e  mais  de  200  mil  clientes  

•  O  sistema  é  o  mesmo  desde  a  criação  da  empresa,  mas  nunca  foi  prioridade  arrumar  a  casa.  Até  resolver  mudar  o  Painel  de  Controle  dos  clientes  e,  consequentemente,  a  ferramenta  do  suporte  

•  É  um  sistema  legado  com  muita  informação  e  ninguém  na  empresa  sabia  tudo  que  exis3a  nele!  

Monstro gigante e obsoleto

Wireframe dos devs

Wireframe dos devs

•  Os  devs  queriam  desenvolver  o  sistema  sem  a  ajuda  de  UX.  Tanto  que  fizeram  seu  próprio  wireframe    

•  Quando  fomos  envolvidos  no  projeto  já  era  agosto  e  o  prazo  para  a  entrega  do  sistema  funcionando  era  final  de  outubro  

•  Tivemos  que  correr  para  entender  como  o  Sistema  Integrado  funcionava    

Conversa com todas as áreas

Conversa com todas as áreas

•  O  suporte  técnico  da  Locaweb  é  interno,  tem  quase  300  analistas  e  u3liza  esse  sistema  para  gerenciar  os  dados  dos  clientes,  quais  serviços  eles  possuem  e  detalhes  de  cobrança  

•  O  Sistema  Integrado  é  usado  por  outras  áreas  da  empresa  

•  Foi  necessário  conversar  com  todas  as  áreas  que  u3lizam  o  sistema,  para  entender  os  usos  e  funcionalidades  

•  Após  pegar  carona  com  o  suporte  e  fazer  muitas  entrevistas,  chegamos  ao  mapa  a  seguir  

Mapeando usos

Wireframes

Wireframes

•  Quando  conseguimos  entender  o  sistema  e  começamos  os  wireframes,  os  desenvolvdores  já  estavam  trabalhando  no  backend  

•  Desenhamos  os  wireframes  também  em  paralelo  com  o  design  visual  

•  Ainda  não  terminamos  todos  os  wires  (o  prazo  foi  estendido),  mas  já  estamos  fazendo  a  validação  de  algumas  telas  que  foram  entregues  pelos  desenvolvedores  

Está ficando pronto!

•  Estamos  validando  todas  as  entregas  com  os  gestores  e  os  analistas  do  suporte  

•  O  pessoal  está  gostando  e  acreditamos  que  vamos  melhorar  a  vida  de  muitos  analistas  

Está ficando pronto!

Aprendizados

•  UX  pode  ser  a  ponte  entre  áreas,  pois  é  quem  conversa  com  usuários,  clientes,  PO,  desenvolvedores,  QA  e  tem  a  função  de  levantar  informações  e  disseminá-­‐las  

•  Não  basta  ler  o  briefing,  é  necessário  conversar  muito  e  mergulhar  no  projeto  para  entender  todos  os  cenários  de  uso  e  necessidades  

•  É  preciso  saber  negociar,  pois  em  um  projeto  de  escopo  grande,  mas  com  pouco  tempo,  é  necessário  defender  o  usuário  mas  também  debater  com  os  desenvolvedores  o  que  é  possível  entregar  dentro  do  prazo  

UX envolvido no QA

UX em agências e consultorias

•  Em  uma  agência,  o  processo  de  desenvolvimento  acontece  como  em  uma  linha  de  produção,  com  fases  bem  definidas  

•  A  equipe  de  UX  é  envolvida  apenas  no  começo  do  projeto,  mas  quando  chega  ao  fim  não  sabe  se  o  que  foi  definido  acabou  sendo  implementado  

UX em agências e consultorias

UX na Locaweb

•  Na  Locaweb  a  equipe  de  UX  faz  parte  dos  3mes  de  produtos  

•  Assim,  os  profissionais  de  UX  estão  envolvidos  em  todas  as  etapas  do  processo,  acompanhando  o  desenvolvimento,  fazendo  a  validação  das  entregas    

UX na Locaweb

Protótipo

•  Esse  é  o  protó3po  que  entregamos  para  os  desenvolvedores  

•  Ele  ilustra  como  deve  acontecer  a  escolha  da  quan3dade  de  ramais  na  ficha  de  contratação  do  PABX  virtual    

•  Há  um  slider,  através  do  qual  o  usuário  aumenta  ou  diminui  o  número  de  ramais  e,  instantaneamente,  vê  quanto  vai  pagar  

Protótipo

Como foi implementado

Como foi implementado

•  Quando  o  desenvolvedor  entregou  a  história,  ela  não  havia  sido  implementada  como  na  especificação  

•  O  slider  não  tem  sepadores  e  fica  muito  complicado  para  o  usuário  entender  quantos  ramais  está  contratando  

•  Além  disso,  não  há  link  para  contratar  mais  de  dez  ramais  

•  O  tamanho  da  fonte  e  os  espaçamentos  também  não  estavam  corretos  

Soluções de UX implementadas

Soluções de UX implementadas

•  É  muito  importe  que  UX  valide  as  entregas,  para  que  erros  como  esses  não  passem  

•  Apesar  de  entregarmos  uma  especificação  muito  completa,  os  desenvolvedores  não  têm  paciência  para  ler  tudo  com  atenção  

•  Nem  sempre  a  explicação  escrita  ou  mesmo  o  protó3po  deixam  100%  claro  o  que  deve  ser  feito  

Os desenvolvedores e as interfaces

•  Os  desenvolvedores  de  backend  exergam  códigos  e  não  sabem  lidar  com  interfaces  

•  Para  eles,  é  dimcil  pegar  erros  de  layout  

•  Como  nem  sempre  temos  especialistas  em  interface  disponíveis,  é  necessário  validar  tudo  

•  O  desafio  é  garan3r  que  estes  problemas  não  atrapalhem  o  produto  final  

Os desenvolvedores e as interfaces

Entregáveis no final

•  Percebemos  que  entregar  um  calhamaço  de  documentação  só  no  fim  do  processo  de  UX,  dificulta  o  acordo  com  o  PO  e  os  desenvolvedores  

•  Trabalha  dessa  maneira  também  dificulta  a  comunicação  

Entregáveis no final

Negociações constantes

Negociações constantes

•  Soluções  boas  e  que  não  demandam  muito  esforço  de  desenvolvimento  são  resultado  de  constantes  negociações  

•  É  importante  conversar  pessoalmente  e  não  entregar  apenas  a  documentação  para  evitar  ruídos  de  comunicação  

•  Nesses  bate-­‐papos  jus3ficamos  nossas  decisões  de  design  ou  encontramos  uma  solução  melhor  juntos  

UX participa do processo de QA

•  QA  (quality  assurance)  é  a  fase  de  testes,  que  normalmente  é  feita  por  desenvolvedores  para  garan3r  a  qualidade  do  código  e  o  funcionamento  do  sonware/produto  

•  Na  Locaweb,  UX  também  par3cipa  do  QA,  validando  se  tudo  foi  desenvolvido  de  acordo  

•  UX  tem  o  poder  de  validar  e  também  reprovar  uma  entrega  

UX participa do processo de QA

Quem ajuda UX nas validações?

•  Temos  um  jovem  aprendiz  que  nos  ajuda  a  testar  e  também  o  suporte,  que  nos  dá  feedbacks  pois  está  em  contato  direto  om  o  cliente  

•  Não  temos  um  modelo  fixo  de  entregáveis.  As  mesmas  instruções  passadas  aos  DEVs  são  guia  para  o  desenvolvedor  responsável  pelo  QA  

•  Nossas  especificações  também  ajudam  a  construir  casos  de  uso  para  QA  

Quem ajuda UX nas validações?

Bom relacionamento entre UX e QA

Bom relacionamento entre UX e QA

•  É  muito  importante  fazer  amizade  com  o  profissional  de  QA,  para  que  ele  nos  ajude  a  garan3r  a  qualidade  do  produto  do  ponto  de  vista  de  UX  

•  O  QA  também  pode  nos  ajudar  a  encontrar  cenários  de  uso  que  não  havíamos  pensado    

Aprendizados

•  Interação perfeita, mas não desenvolvida não entrega valor

•  UX participa do processo todo e valida no final para garantir a qualidade

•  Envolvimento das pessoas responsáveis para ter melhores resultados

•  A mudança de escopo sempre acontecerá

Pesquisa à nossa moda

Pesquisa online: site, painel, por e-mail

•  Nem  sempre  temos  tempo  de  fazer  pesquisas  by  the  book  

•  Mesmo  assim,  estamos  sempre  em  contato  com  clientes  e  coletando  dados  

•  Fazemos  pesquisa  através  de  fomrulário  online  no  site,  no  painel  dos  produtos  e  também  por  e-­‐mail  

•  Os  clientes  são  bastante  recep3vos  e  os  resultados  são  bem  legais  

Pesquisa online: site, painel, por e-mail

Somos abertos a feedbacks

•  Acompanhamos  diariamente  o  feedback  de  clientes:  temos  uma  ferramenta  própria  para  isso,  desenvolvida  pela  equipe  da  Locaweb  

•  Também  estamos  implantando  o  UserVoice,  que  pode  ser  acessado  inclusive  por  não  clientes  

•  Um  cliente  pode  ver  o  feedback  do  outro  e  também  votar  no  que  achar  mais  interessante  

Somos abertos a feedbacks

Ligamos para eles

Ligamos para eles

•  Fazemos  entrevistas  por  telefone  pois  temos  acesso  aos  dados  dos  clientes  

•  U3lizamos  o  telefone  para  pesquisas  curtas  e  pontuais  

•  E  também  para  entender  melhor  os  feedbacks  

Pegamos carona com o suporte

•  Uma  grande  vantagem  é  que  o  nosso  suporte  é  proprio  e  tenho  fácil  acesso  a  ele  

•  Nós  entrevistamos  os  analistas  e  também  pegamos  carona  nos  atendimentos  

Pegamos carona com o suporte

Dê olho no twitter

•  E  ficamos  ligados  em  qualquer  oportunidade  de  contato  com  quem  queremos  falar  

•  Recebemos  relatório  do  twiqer  

•  Estávamos  trabalho  no  novo  painel  e  essa  cara  tuitou  reclamando  da  usabilidade  do  atual…  

Dê olho no twitter

Falamos com ele por Skype

Falamos com ele por Skype

•  Entramos  em  contato  com  ele  e  o  entrevistamos    

•  A  entrevista  for  super  bacana,  nos  ajudou  bastante  a  entender  melhor  algumas  questões  de  uso  e  confirmar  impressões  

•  E  o  cara  ainda  ficou  feliz  :D  

Entrevistas em eventos

Entrevistas em eventos

•  Aproveitamos  todas  as  oportunidades  de  contato  com  usuários,  para  conhecê-­‐los  melhor  

•  Como  a  Locaweb  promove  vários  eventos  em  diferentes  capitais,  aproveitamos  para  conhecê-­‐los,  bater  papo,  marcar  entrevistas  

•  Se  a  pesquisa  for  rápida,  fazemos  até  durante  o  evento  

Também corremos atrás de números

Também corremos atrás de números

•  Fazemos  testes  A/B,  consultamos  dados  de  uso  direto  no  banco,  pedimos  informações  para  o  BI  e  temos  ferramentas  como  o  Click  Tale  

•  Números  nos  ajudam  tanto  nas  decisões,  como  no  embasamento  de  nossa  propostas    

Números (BI)

Os grupos de cobrança são usados?

1  grupo  2  grupos  

acima  de  3  grupos  

98.68%  

1.17%  0.15%  

•  Um  exemplo  são  os  grupos  de  cobrança,  que  eram  um  requisito  para  o  novo  painel  de  controle.  Eles  foram  derrubados  pelos  números  

•  Pouquíssimos  clientes  usavam,  então  porque  adicionar  esta  complexidade  para  o  usuário?    

•  Os  poucos  clientes  que  usavam  era  devido  a  um  desvio  de  uso,  para  atender  a  outra  necessidade  (mais  simples,  inclusive  do  ponto  de  desenvolvimento)  

Números (BI)

Personas

Personas

•  Estamos  usando  também  personas  como  ferramenta  

•  As  primeiras  nasceram  by  the  book:  mapeamos  uso,  fizemos  entrevistas  pessoais,  ques3onário  online,  analisamos  métricas  de  BI  e  fizemos  entrevistas  com  o  suporte    

•  Já  a  segundo  leva…  Em  função  da  correria,  apenas  mapeamos  uso  e  fizemos  um  ques3onário  online.  Também  usamos  o  conhecimento  que  xnhamos  sobre  os  usuários,  mas  com  o  compromisso  de  validar  e  amadurecer  aquelas  personas  

•  Trabalhar  com  persona  é  legal,  ajuda  bastante,  mas  dá  um  trabalhão:  é  dificil  encaixar  em  nossa  correria  :/  

•  Ainda  estamos  aprendendo  a  fazer  e  usar  as  personas  

Aprendizados

•  Ter alguma métrica é melhor do que não ter nenhuma •  Contato permanente com o usuário é tão (ou mais)

importante que fazer uma pesquisa pontual

•  É bom poder validar novas funcionalidades em pouco tempo

•  Pesquisa sempre é importante. Se não tiver tempo, terceirizar!

Perguntas?

Andressa, Paula e Marcos