Your SlideShare is downloading. ×
UX no Limite
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

UX no Limite

387
views

Published on

Published in: Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
387
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Estamosrepresentandoessagalera!Equipemultidisciplinar: 8 pessoas, 2 focasem Designer VisualArquitetura de informação, design de interação, design de interface, QA (quality assurance) e pesquisa (de mercado e com usuários)
  • Trabalhamos no dia-a-dia dos produtos, desdefichas de contrataçãoaté a interface de administraçãoEntregamos wireframes, protótipos, especificações, layout, pesquisa, textos e pitacosFazemos lean UX. Trabalhamosemparalelamenteaodesenvolvimento
  • Exemplo de protótipo CORRETOExplicar a interface
  • Transcript

    • 1. AutoresAndressa VieiraÉ formada em Marketing e trabalha há10 anos com internet, 8 deles comusabilidade, arquitetura de informação,design de interação e experiência dousuário. Já passou pela Try, MapaDigital, Lumens e UOL, sendoresponsável pela coordenação deestudos de usabilidade e arquiteturade informação. Realizou dezenas deprojetos para sites institucionais,financeiros, portais, e-commerce,entre outras indústrias.Hoje é Gerente de Experiência doUsuário da Locaweb e Diretora eco-fundadora da UPA São Paulo.andressa.vieira@locaweb.com.br
    • 2. AutoresPaula SatoFormada em Jornalismo pela ECA-USP,tem pós-graduação em Arquitetura daInformação pela Faculdade Impacta deTecnologia. Trabalhou com reportageme 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 erecepcionista.Atualmente, é Designer de Experiênciado Usuário na Locaweb.paula.sato@locaweb.com.br
    • 3. AutoresMarcos VigoritoFormado em publicidade pela ECA-USPe técnico em processamento de dadospela Escola Técnica Federal de SãoPaulo. Trabalhou com a parte técnica naIBM Brasil e teve carreira solodesenvolvendo sites em outrasempresas que passou. Oficialmentetrabalha com usabilidade e experiênciado usuário há 4 anos.Hoje usa os diferentes conhecimentoscomo Designer de Experiência doUsuário na Locaweb.marcos.oliveira@locaweb.com.br
    • 4. AutoresGabriela MuhlbachGraduada em Comunicação Digital pelaUNISINOS, trabalhou com editoraçãográfica e foi arquiteta de informação naW3 Haus em Porto Alegre. Trabalhou naLocaweb como Designer de Experiênciado Usuário.Atualmente trabalha no Terra comoArquiteta de Informação.
    • 5. AutoresGabriela MuhlbachGraduada em Comunicação Digital pelaUNISINOS, trabalhou com editoraçãográfica e foi arquiteta de informação naW3 Haus em Porto Alegre. Trabalhou naLocaweb como Designer de Experiênciado Usuário.Atualmente trabalha no Terra comoArquiteta de Informação.
    • 6. Toda a equipe
    • 7. Toda a equipe • Estamos representando essa galera! • Equipe multi 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)
    • 8. O que a Locaweb faz?
    • 9. 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)
    • 10. Nosso carro chefe
    • 11. e Cloud
    • 12. e PABX Virtual
    • 13. Gateway de pagamento
    • 14. E-mail marketing [+15 mil]
    • 15. Novos produtos: WebDesk
    • 16. WebChat
    • 17. WebStore
    • 18. Organograma da Locaweb
    • 19. Onde UX se encaixa?
    • 20. Onde UX se encaixa? • UX faz parte da diretoria de produtos • Trabalhamos muito próximo da gerência de produto (PO) e tecnologia (DEV)
    • 21. Site é com o Marketing
    • 22. Site é com o Marketing • Cuidamos apenas da interface de utilização dos serviços (após contratação) • O site não logado é um canal de comuniçação e venda. E é o marketing quem cuida dele
    • 23. O que fazermos • Cuidamos dos produtos: desde fichas de contratação até a interface de administração • Wireframes, protótipos, especificações, layout, pesquisa, textos e pitacos • E trabalhamos paralelamente ao desenvolvimento
    • 24. Nosso processo
    • 25. 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
    • 26. Lidando com sistemas legados
    • 27. Monstro gigante e obsoleto
    • 28. 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 existia nele!
    • 29. Wireframe dos devs
    • 30. 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
    • 31. Conversa com todas as áreas
    • 32. Conversa com todas as áreas • O suporte técnico da Locaweb é interno, tem quase 300 analistas e utiliza 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 utilizam o sistema, para entender os usos e funcionalidades • Após pegar carona com o suporte e fazer muitas entrevistas, chegamos ao mapa a seguir
    • 33. Mapeando usos
    • 34. Wireframes
    • 35. 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
    • 36. Está ficando pronto!
    • 37. 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
    • 38. 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
    • 39. UX envolvido no QA
    • 40. UX em agências e consultorias
    • 41. 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
    • 42. UX na Locaweb
    • 43. UX na Locaweb• Na Locaweb a equipe de UX faz parte dos times 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
    • 44. Protótipo
    • 45. Protótipo• Esse é o protótipo que entregamos para os desenvolvedores• Ele ilustra como deve acontecer a escolha da quantidade 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
    • 46. Como foi implementado
    • 47. 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
    • 48. Soluções de UX implementadas
    • 49. 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ótipo deixam 100% claro o que deve ser feito
    • 50. Os desenvolvedores e as interfaces
    • 51. Os desenvolvedores e as interfaces• Os desenvolvedores de backend exergam códigos e não sabem lidar com interfaces• Para eles, é difícil pegar erros de layout• Como nem sempre temos especialistas em interface disponíveis, é necessário validar tudo• O desafio é garantir que estes problemas não atrapalhem o produto final
    • 52. Entregáveis no final
    • 53. 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
    • 54. Negociações constantes
    • 55. 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 justificamos nossas decisões de design ou encontramos uma solução melhor juntos
    • 56. UX participa do processo de QA
    • 57. UX participa do processo de QA• QA (quality assurance) é a fase de testes, que normalmente é feita por desenvolvedores para garantir a qualidade do código e o funcionamento do software/produto• Na Locaweb, UX também participa do QA, validando se tudo foi desenvolvido de acordo• UX tem o poder de validar e também reprovar uma entrega
    • 58. Quem ajuda UX nas validações?
    • 59. 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
    • 60. Bom relacionamento entre UX e QA
    • 61. Bom relacionamento entre UX e QA• É muito importante fazer amizade com o profissional de QA, para que ele nos ajude a garantir 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
    • 62. 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á
    • 63. Pesquisa à nossa moda
    • 64. Pesquisa online: site, painel, por e-mail
    • 65. 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 receptivos e os resultados são bem legais
    • 66. Somos abertos a feedbacks
    • 67. 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
    • 68. Ligamos para eles
    • 69. Ligamos para eles• Fazemos entrevistas por telefone pois temos acesso aos dados dos clientes• Utilizamos o telefone para pesquisas curtas e pontuais• E também para entender melhor os feedbacks
    • 70. Pegamos carona com o suporte
    • 71. 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
    • 72. Dê olho no twitter
    • 73. Dê olho no twitter• E ficamos ligados em qualquer oportunidade de contato com quem queremos falar• Recebemos relatório do twitter• Estávamos trabalho no novo painel e essa cara tuitou reclamando da usabilidade do atual…
    • 74. Falamos com ele por Skype
    • 75. 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
    • 76. Entrevistas em eventos
    • 77. 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
    • 78. Também corremos atrás de números
    • 79. 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
    • 80. Números (BI)Os grupos de cobrança são usados? 98.68% 1.17% 0.15% 1 grupo 2 grupos acima de 3 grupos
    • 81. Números (BI)• 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)
    • 82. Personas
    • 83. Personas• Estamos usando também personas como ferramenta• As primeiras nasceram by the book: mapeamos uso, fizemos entrevistas pessoais, questioná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 questionário online. Também usamos o conhecimento que tínhamos 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
    • 84. 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!
    • 85. Perguntas?Andressa, Paula e Marcos