Ferramentas de UX para times de alta performance
Ferramentas para tornar seu Design Team altamente performático, eficiente e eficaz.
--
Para sucesso da sua solução, é de vital importância que a comunicação entre todos os envolvidos no processo, seja a mais fluída e eficiente possível. Qualquer pequena falha de comunicação entre o designer e o usuário, sua equipe de design ou seu time de desenvolvimento, pode transformar sua solução "perfeita" em uma falha grotesca e extremamente custosa para sua empresa.
Durante o processo de design, algumas ferramentas podem auxiliar seu time a alcançar um nível mundial de performance, seja na pesquisa, na validação de hipóteses, na prototipação, nos testes com usuários, ou na apresentação. Conhecendo bem algumas ferramentas, você aumenta a velocidade de criação, o entendimento do time sobre a solução e ainda assim reduz riscos.
Nesse artigo, apresento algumas ferramentas essenciais para nosso time de User Experience e explico o valor que elas nos entregam em cada fase do nosso Processo de Design no ContaAzul. O fluxo de apresentação de ferramentas é basicamente o fluxo de uso delas no nosso processo ;)
Intercom
Utilizado para comunicação direta entre produto e clientes, virou uma ferramenta indispensável para entrar em contato com o cliente ou grupo de clientes que precisamos: no momento em que queremos entender alguma necessidade específica, no início do processo de design, para entendimento do desafio, até o final dele apresentando uma nova funcionalidade aplicada.
Colocando em exemplos práticos, se estamos com a necessidade de uma pesquisa com clientes que emitiram mais de 100 boletos no último mês, conseguimos, com o Intercom integrado ao ContaAzul, enviar uma mensagem customizada para todos aqueles clientes que atendem este requisito, dentro do produto, em algum momento específico, quando estes clientes emitirem o próximo boleto por exemplo.
Quando queremos entender o comportamento de clientes criando novas categorias financeiras, podemos programar mensagens automáticas, com uma mensagem inicial sobre essa funcionalidade. No momento em que o cliente criar uma categoria nova, receberá um chat perguntando algo sobre a funcionalidade, iniciando uma pesquisa mais aprofundada.
Outro uso que fazemos do Intercom é apresentar novas funcionalidades. Além de ser menos invasivo, podemos coletar feedbacks de forma muito fácil e organizada.
No painel do Intercom você consegue visualizar todos seus usuários e seus acessos específicos. Pode-se filtrar por usuários que estão em determinada área do seu sistema, ou realizando determinada ação no produto, e entrar em contato com ele como um chat.
A visualização das mensagens é de cerca de 98% e tem-se um índice muito mais alto de respostas do que as mensagens enviadas por email.
O Intercom tem se tornado cada dia mais uma ferramenta fundamental no entendimento do problema a ser solucionado, na pesquisa com a nossa base de usuários, tanto quantitativa, quanto qualitativamente.
Typeform
Crie formulários com uma experiência incrível para seu usuário. Além de ser extremamente simples de criar os formulários, configurar templates e distribuir, os formulários tem uma interação incrível, aumentando a taxa de finalização e tendo mais respostas do que formulários comuns.
Criando formulários pelo Typeform, você tem um nível alto de customização, pode criar seus templates e reutiliza-los, e tudo de forma muito simples, não precisa ser um designer para criar formulários que instigam o usuário a responder.
Transições suaves entre as perguntas e vários componentes que auxiliam a ter a resposta mais exata para a sua pergunta.
Os resultados são apresentados de forma bem objetiva e separados por plataforma. Os resultados de perguntas abertas podem ser baixados em arquivo "xls".
Utilizamos muito o Typeform em nossa rotina de trabalho na pesquisa quantitativa anterior a criação. O formulário pode ser enviado ao cliente por email ou dentro do produto por link. Temos utilizado no produto com triggers pelo Intercom e o resultado tem sido ótimo, com um alto índice de abertura e respostas.
Quip
Ferramenta fundamental na documentação de pesquisas e insights, utilizamos o Quip para anotar TUDO que aprendemos com nossos clientes e o que pesquisamos e precisamos compartilhar com a equipe.
Substituimos o uso do Evernote pelo Quip pois ele tem se mostrado muito melhor quando trabalhando colaborativamente no mesmo arquivo. Assim como o Google docs, sua equipe pode trabalhar em conjunto no mesmo documento, mas o que tem nos ajudado bastante são as "Menções". De forma bastante fácil, mencionamos "@membroDoTime" e o arquivo já está compartilhado, acessível e com a marcação do ponto de atenção que este membro deve visualizar.
Também é possível visualizar uma timeline com as edições do seu time, além de poder conversar por chats dentro e fora de cada documento. O documento é automaticamente versionado, e você pode voltar a alguma revisão anterior se necessário.
A edição de listas e parágrafos é bastante facilitada e notas rápidas são muito fáceis de criar e compartilhar.
Por ser Mobile First, o uso é bem simples, o app mobile funciona offline e existe aplicativos para Mac OS e Windows.
Gostamos muito e sugerimos fortemente o teste e uso dessa ferramenta =)
Nosso Head de Design Anderson Gomes esteve no vale em outubro de 2015 e conheceu a equipe e processos do Quip. Estamos esperando ele contar ao mundo um pouco mais sobre essa experiência ;) #desafioArtigoDoVale
Sketch
Prototipar interfaces nunca foi tão rápido e preciso!
Com páginas e artboards trazendo uma visualização bastante ampla e organizada, o sketch é simples no uso porém muito preciso e ágil. Crie um UI-KIT para sua empresa no Sketch e nunca mais se preocupe em perder padrões ou diminuir a produtividade do seu time. Ferramenta principal de prototipação no Design Team da ContaAzul, é o software que nos trouxe maior velocidade de criação de protótipos e testes.
Ferramenta leve e poderosíssima, tem tudo o que é realmente necessário a mão. Consegue se virar muito bem com vários artboards e é bastante intuitiva. A criação de elementos vetoriais e de efeitos é simples e o mais bacana é que você pode copiar estilos de um elemento e colar em outros, além de poder copiar o estilo em CSS de um efeito que você criou e passar ao desenvolvedor front end.
Você pode exportar as imagens em vários formatos, inclusive PNG retina e SVG, além de exportar grupos e redimensionar a imagem no momento da exportação.
Uma integração muito interessante e que tem ajudado muito o desenvolvimento seguir as especificações do protótipo é o Zeplin ( próxima ferramenta a ser abordada), que, com um plugin no Sketch, permite que o desenvolvedor Front End do seu time saiba todas as medidas, cores, fontes, paddings e margins, para que consiga entregar o produto 100% igual ao protótipo
Zeplin
A proposta principal do Zeplin é que o Designer ganhe tempo e que o trabalho do desenvolvedor fique mais fácil, e é exatamente isso que o Zeplin entrega.
O Zeplin é um plugin para o Sketch e uma ferramenta que, ao mesmo tempo que economiza o tempo do designer (diminuido a documentação e especificação necessária para passar ao desenvolvedor front end), torna o trabalho do desenvolvedor mais fácil visto que ele tem tudo que precisa a mão(especificações, assets, paletas de cores e textos).
O que é importante ser lembrado é que o Sketch é um software para Mac OS e em geral os desenvolvedores possuem Linux… O que o Zeplin faz para nós? Ele joga o arquivo Sketch para um visualizador web, então qualquer sistema operacional pode acessar e visualizar =)
Para exportar os arquivos do sketch para o Zeplin você só precisa instalar o plugin, e a parte mais difícil, selecionar o artboard e dar um "Command + E" … Pronto, seu desenvolvedor tem acesso ao que precisa para deixar o produto 100% fiel ao protótipo.
Você pode também comentar e receber comentários no protótipo compartilhado, bem parecido com o Invision ( próxima ferramenta da lista ).
Também se você montar o arquivo certinho no Sketch, com assets marcados como "export", tem no Zeplin todos os seus assets exportados e organizados para seu time, e não ficarão pedindo pra você as imagens!
Dá para usar o Zeplin Free para 1 projeto (você consegue colocar muita coisa lá, inclusive diferentes arquivos do Sketch, aquele jeitinho brasileiro de resolver os problemas funciona aqui, mas eu não contei isso).
*OBS: O Invision está prestes a lançar Insights que é basicamente o Zeplin integrado no Invision… Estamos na lista de usuários beta dessa funcionalidade, assim que tivermos novidades, mostraremos ao mundo ;)
Invision
Criar prototipos navegáveis e testar com o time e usuário nunca foi tão facil e completo =)
Do início ao fim da nossa sprint de design, utilizamos o invision para apresentar os protótipos iniciais ao time e validar já no começo de qualquer hipótese com nossos usuários. Criamos tudo que precisamos criar de tela no sketch e subimos as telas para o invision, organizadas em projetos para cada atividade que atuamos.
Quando colocamos o protótipo inicial, a equipe já recebe alertas e já podem visualizar e testar o que estiver por lá, além de poder comentar nas telas
Enviamos todas as telas para o invision e montados a navegação através de hotspots, áreas clicáveis que levam para outra página ou áreas onde o hover direciona para algum lugar, além disso, podemos criar temporizadores em cada tela e utilizar gifs, caso queira simular um loading por exemplo.
Um dos usos principais no nosso processo, são os comentários. Cada time tem usuários para poder comentar, gerando sugestões de melhorias no protótipo, também utilizamos comentários quando estamos testando com usuários e marcamos os pontos de correção da interface ou fluxo. Você pode direcionar o comentário para alguém do seu time, que receberá uma notificação por email sobre o comentário.
Existe também, dentro de cada projeto um Workflow, que você pode customizar, colocando quadros específicos do seu processo. Isso ajuda muito na visibilidade do progresso de cada tela pelo seu time, e até para sua organização.
O ponto alto do uso do Invision em nosso processo é a utilização do "Live Share", recurso que permite que você compartilhe seu protótipo navegável com os usuários e visualize-os utilizando.
Além de identificar falhas em seu protótipo ou no fluxo, você conversa com o usuário por um chat, pode tomar notas no protótipo e utilizar ( você e o usuário ) uma ferramenta de desenho, na qual vocês podem rabiscar idéias em cima do protótipo.
Também no modo Live Share, você tem um quadro branco compartilhado com o usuário para fazer sketchs de melhorias, podendo salvar as imagens e enviar para seu email com facilidade. Chamadas de voz podem ser feitas por dentro do sistema, mas geralmente utilizamos o skype ou hangout para isso.
Além de tudo isso, ainda tem algumas funcionalidades que ajudam a organizar seus arquivos e pesquisas como os "Boards" e "Assets".
Considero o Invision, a ferramenta principal no dia a dia da equipe de design, aumentando consideravelmente a comunicação, alinhamento e velocidade do time e essencial para os testes que realizamos a todo o momento com nossos usuários.
O que eu quis apresentar com o artigo!
Em linhas gerais o que espero ter apresentado nesse artigo, é o impacto de ferramentas bem escolhidas na velocidade e eficácia na criação dos projetos de design, principalmente quando se trabalha com um time relativamente grande e usuários a distância, mas com uma qualidade altíssima de comunicação e validações.
Com certeza ferramentas são apenas um suporte para o designer, mas são elas que te fazem subir de nível em alta velocidade, individualmente e em equipe.
Espero que tenha contribuído e responderei com muita satisfação perguntas sobre as ferramentas e como as utilizamos aqui no ContaAzul.
