Chatbot Design Kit: como o Figma nos ajudou a construir e compartilhar melhor nossos aprendizados de UX Design

chatbot design kit figma take capa post

Confira os principais aprendizados e takeaways da migração do Sketch para o Figma e como isso facilitou o nosso trabalho neste Chatbot Design Kit construído pelo UX Designer, Adolfo Melo.
 

Quando entrei na Take, há 2 anos, documentávamos os fluxos de chatbots no Sketch (que só roda no MacOS). Observei que era preciso exportar cada um dos arquivos em PDF, enviar por e-mail para clientes e aguardar o processo de baixarem o arquivo, lerem a documentação, comentarem e responderem o email com os feedbacks (isso quando não acontecia o fatídico “Desculpe, faltou o anexo”). O feedback era uma parte improdutiva e pouco ágil do processo.

O Figma não era tão popular quanto hoje, mas eu já o utilizava em projetos pessoais. Sugeri um teste e, em poucas semanas, o time inteiro já tinha se adaptado à ferramenta.

Em vez de compartilhar e estocar PDFs, mandávamos um link que tinha sempre a versão mais atual do nosso trabalho, onde UXs, DEVs, PMs e clientes podiam colaborar simultaneamente. Até hoje, não tive outra experiência de migração entre softwares que tenha sido tão suave quanto a do Sketch para o Figma. Dá uma olhada no quanto o Figma otimizou a nossa performance 😀

figma produtividade chatbot design kit
Infográfico: Comentários em projetos no Figma

Componentes de conversa

Com o Figma estabelecido, o próximo passo foi componentizar nossos recursos. Como designers, Além dos balõezinhos de mensagens enviadas e recebidas, precisávamos deixar claras as tomadas de decisões, manipulação de variáveis e possíveis observações para que todas as pessoas envolvidas entendessem nossas propostas.
canais figma chatbot design kit

Os valores que orientam nosso Chatbot Design Kit

Focamos em três qualidades para criar cada componente: simplicidadeagilidade e flexibilidade. Outras qualidades (como responsividade, fidelidade e adaptabilidade) também estão presentes, mas, nos momentos em que era preciso tomar uma decisão sobre o visual ou comportamento dos componentes, buscamos favorecer as qualidades mais importantes:

1. Simplicidade

Os componentes que criamos para cada canal de mensagem são bem próximos do visual real, mas você vai notar que removemos alguns detalhes. Informações como a hora de envio da mensagem do WhatsApp ou o balãozinho de typing são dispensáveis e podem tirar a atenção de quem está vendo a documentação.

Assim, a simplicidade nos ajuda no objetivo de apresentar a lógica de funcionamento de uma conversa de forma clara e objetiva, dispensando detalhes que não agregam.

2. Agilidade

Chegamos a criar diversas variações para os possíveis cenários de utilização dos componentes, mas, na prática, tal como a lei de Hick prevê, quanto mais opções, mais tempo a gente gastava para escolher uma delas.

Outra decisão importante foi otimizar o tamanho dos componentes. Quando importamos o design kit do Facebook Messenger para o Figma, tudo funcionava bem, mas observamos que, para carregar fluxos maiores, a demora era significante. O tempo para carregar ou exportar um arquivo caiu pela metade quando diminuímos o tamanho de todos componentes.

Então é isto: a agilidade permite que a gente passe mais tempo pensando no que realmente importa.

3. Flexibilidade

No design de conversas, a forma também muda de acordo com o conteúdo. Em várias situações, precisamos adicionar ou remover itens de uma lista ou esticar um elemento para que comporte o conteúdo, então priorizamos a flexibilidade dos componentes. É fácil combinar elementos conforme a quantidade de itens que você precisa incluir, ou ajustar o tamanho das mensagens até que o texto fique todo dentro de cada balãozinho.

A flexibilidade nos permite fazer mais com menos componentes. Isso favorece as duas qualidades anteriores, porque ter menos componentes torna o design kit mais simples e fácil de utilizar, e ao mesmo tempo reduz o tempo que você gasta para criar e atualizar seus fluxos de conversa.

O Conteúdo do Chatbot Design Kit

Dividimos o Chatbot Design Kit em duas partes: canais e componentes auxiliares. Os canais componentizados são:

  1. WhatsApp
  2. Facebook Messenger
  3. Google Assistant
  4. Apple Business Chat
  5. BLiP Chat (canal de chat da Take)
  6. SMS

Além dos componentes de cada canal de troca de mensagens, componentes auxiliares também vêm no pacote e fazem toda a diferença. Organizamos tudo em três grupos: Tags, Descrições e Marcações de apoio.

As Tags servem para:

  • Indicar mudanças (laranja)
  • Fazer anotações importantes (azul)
  • Indicar chamadas de API (verde musgo)
  • Marcar trackings (amarelo)
  • Indicar momentos em que transferimos a conversa para humanos — o que chamamos de transbordo (rosa)
  • Indicar o sucesso de um fluxo (verde flat)

tags figma chatbot design kit

As Descrições nos ajudam a:

  • Nomear fluxos e sub-fluxos
  • Documentar menus persistentes
  • Descrever telas de saudação
  • Fazer comentários secundários

descrições chatbot design kit

Já as Marcações de apoio são para:

  • Documentar versões
  • Indicar critérios de decisão
  • Ir para outro fluxo (“Go To”)
  • Conduzir a leitura dos diferentes caminhos possíveis
  • Indicar tempo de digitação ou pausa

marcações de apoio chatbot design kit


Alguns exemplos práticos

  • Basta esconder os botões de cards que você não precisar utilizar:

botões de card figma chatbot design kit

  • Dá pra combinar componentes e criar uma lista com quantos itens você precisar:

combinação de componentes figma chatbot design kit

  • Alterne entre componentes a partir da Instance:

instance figma chatbot design kit
Confere o detalhe:

instance figma chatbot design kit
É possível alternar entre variações de componentes a partir da Instance, no menu à direita
  • Repara que, para cada um dos canais de mensagens, temos um background diferente. Do Google Assistente é amarelo e do WhatsApp é verde, por exemplo. Mnemônica para facilitar no dia a dia.
canais chatbot design kit
Cada canal tem sua própria cor de fundo. O WhatsApp, por exemplo, é verdinho
  • Escolhemos priorizar simplicidade mais do que adaptabilidade. Por conta disso, nem sempre os componentes vão se comportar como gostaríamos. Para esses casos, basta utilizar a função Detach instance e ajustar manualmente.

Detach instance chatbot design kit


Agora é a sua vez de experimentar!

O que estamos compartilhando é o resultado de meses de colaboração e aprendizado. Se estiver iniciando agora ou já tiver um bot no ar, mas que falta documentação, você pode poupar um bom tempo utilizando a nossa biblioteca.

>> Aqui está o link para a biblioteca de componentes <<

Esse é um documento vivo que crescemos e aprimoramos a cada feedback, então, se tiver alguma dúvida ou sugestão, manda uma mensagem pra gente: design@take.net

Dica: Se não tiver uma conta paga no Figma, você pode copiar os componentes para uma aba de um arquivo e projetar as conversas em outra com a mesma facilidade.

É isto! Aproveite, compartilhe e deixe seu feedback.


adolfo post chatbot design kit
Adolfo Melo
UX Designer
 

Leia mais:

Dicas de uma UX Designer para realizar workshops bem sucedidos

Protótipos colaborativos: como prototipamos a evolução do BLiP em 1 dia

Aprendizados de um projeto inesperado como UX-PO no Google Assistant

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Talvez você goste desses conteúdos também: