O Boleto Bancário e a UX

Era uma vez um país onde empresas cobravam seus clientes por cartas. Os anos se passaram e ainda recebemos as mesmas cartas, só que digitais.

A carta que recebíamos continua a mesma em conteúdo, o que mudou foi apenas seu meio de transmissão que antes era por correios, e agora, também por internet.

O Layers Education é a plataforma de E-Commerce da Tenda Digital, e aqui gostamos de repensar a roda sim.

Vai que encontramos formas mais convenientes e melhores de explorar a tecnologia do presente para melhorar experiências do passado? Quando implementamos o pagamento com boletos nos perguntamos:

Porque todo boleto é confuso?

Ler um boleto para a maioria das pessoas é um processo de decodificar uma mensagem. Eis um exemplo comum de um boleto bancário:

Este é um boleto bancário tradicional. Dividimos as informações em Muito Importante, Importante, Pouco Importante e Confuso. É possível perceber que muitas informações na verdade não são tão importantes para o Cliente ou a forma de mostrar é confusa.

Pontos de potenciais melhorias na organização da Informação:

• Valor e Vencimento:
  De longe, a informação mais valiosa de um boleto antes do pagamento, e que deve ser ser facilmente identificável.
• Sacado e Cedente:
  Nomes formais e incomuns para o Pagador e o Recebedor/Beneficiário
• Número ao lado da Logo do Banco:
  É uma informação sem cabeçalho, e de pouca importância. Curiosamente é a fonte de maior tamanho.
• Local de Pagamento:
  Hoje já é possível pagar um boleto emitido pelos principais bancos em qualquer banco, essa informação já não é mais necessária.
• Espécie da Moeda:
  Só se utiliza boleto bancário no Brasil, e RÉIS não é mais uma moeda corrente do País. Já pensou um boleto sendo pago em Dólar?
• Data do Documento, Data de Processamento e Vencimento:
  Tantas datas diferentes, e a mais importante que é o vencimento tem igual apelo visual.
• Demais campos:
  Estão misturados e não correlacionam com o Pagador ou Beneficiário

Depois de analisar as informações contidas, partimos para o próximo passo:

Melhorando a Interação de um Boleto

Em sua essência, um boleto é um número rodeado de informações. O número é a única coisa necessária hoje para realizar um pagamento de Boleto: Seja ele digitado ou escaneado por um leitor de código de Barras.

As formas de se pagar um Boleto no Caixa:

• Boleto impresso em papel e código de barras
• Apenas o número do Boleto digitado

As formas de se pagar um Boleto no App do Banco:

• Copiando e colando o código do boleto no App do Banco
• Abrindo um PDF com o aplicativo do Banco, assim ele já reconhece os números automaticamente
• Escaneando um código de barras usando a Camera do Celular

Pontos de potenciais melhorias na interação digital:

• Responsividade:
  Um boleto foi originalmente feito para ser Impresso e não aberto em um smartphone. Hoje já temos capacidade de permitir uma leitura tão boa quanto um papel né?
• Número do Boleto sempre visível:
  Um boleto é um código, e esse número deve sempre estar visível na tela do usuário e evitar qualquer rolagem de tela.
• Permitir Salvar ao invés de Imprimir:
  Faz mais sentido Baixar um boleto no celular que Imprimir. Mas em um desktop, é muito comum utilizar ação Imprimir. Estas ações devem ser adaptativas dependendo do dispositivo
• Permitir Copiar o Código do boleto:
  Segurar em cima do código, aguardar selecionar, ajustar o inicio e fim do texto que irá copiar e clicar em copiar no menu. Isso é facilmente resolvido com um botão de copiar o código do boleto

E por fim, criamos:

O Boleto Bancário Ideal

(se é que isso existe)

Fizemos inicialmente um sketch no papel, e depois realizamos um design com maior fidelidade no Figma. Após isso, imaginamos quais micro-interações seriam necessárias e implementamos um mockup com HTML e JS.

Ao todo, o desenvolvimento ocorreu em 5 dias: 2 Dias de ideação e design e 3 dias para implementar e testar.

E o resultado final?

• Acesse aqui para ver o Boleto Pendente
• Acesse aqui para ver o Boleto Pago
• Acesse aqui para ver o Boleto Vencido

Implementação final para Desktop e Mobile do Boleto Bancário

Sintetizando o que melhoramos:

• Copiar o código com um clique
• Deixamos o boleto Responsivo, com um look mais atual e organizado
• Permitimos visualizar o Status do Pagamento Atualizado
• Permitimos Gerar segunda Via quando vencido caso seja permitido
• Fácil botão de Salvar ou Imprimir dependendo do dispositivo
• Incluímos uma forma de Entrar em Contato com a empresa

Para nós, foi muito bom ouvir o feedback positivo de todos os clientes e apresentar o boleto de todas as Adquirentes e Instituições Financeiras de maneira unificada e otimizada.

Tivemos uma redução no número de atendimentos, e também no tempo de pagamento médio dos boletos.

São coisas difíceis de se medir e priorizar, mas acreditamos que são os pequenos detalhes e micro-interações que passam a sensação de confiança e segurança para nossos clientes.

Afinal, qual será a próxima roda agora?