Cargo
Product designer
Duração
2 mêses
Time
O que é cielo+
Cielo+ é um aplicativo dedicado à venda de maquininhas da Cielo para estabelecimentos comerciais, oferecendo funcionalidades como prospecção de leads, registro de visitas, condução de negociações, suporte técnico para equipamentos, elaboração de acordos e consultas financeiras.
Resultados
Com a implementação do novo serviço, agora os usuários tiveram um ganho na argumentação de vendas. Sendo assim os clientes da Cielo podem receber seu dinheiro, por exemplo: Master Card - Débito em um banco e Master Card - Crédito em outro. Os usuários também não precisam mais ficar duplicando cadastro para fazer troca de domicílio bancário. Entregamos boa usabilidade com resultado 92 pontos na escala SUS.
Veja o fluxo completo
Problema
Exemplo de fluxograma antigo
Aproveitamos a abertura para melhorar algumas coisas também além do escopo e fomos recorrer a pesquisa de satisfação do app que já estava rodando a um tempo. Uma das reclamações que tínhamos era que a aba de domicilio bancário estava demorando muito para carregar as informações. Descobrimos com a equipe de devs, que era devido a quantidade de informações que precisavam ser requisitadas nessa aba e por isso gerava lentidão. Veja exemplo abaixo:
Antiga aba de domicílio bancário
Outro problema era que sempre ao realizar a troca, o usuário tinha que inserir informações de domicílios bancários que ja havia inserido antes. Essas informações não ficavam salvas em nenhum lugar.
Antiga tela de preenchimento de dados da solicitação de troca
Não existia também uma confirmação com as bandeiras solicitadas para troca. Única coisa que tinha era um pop de reforço da ação de solicitar a troca com um texto que gerava confusão no usuário por não mencionar a solicitação. Aproveitamos também para atualizar alguns componentes que consumiam do design system antigo.
Antiga tela de seleção de bandeiras
Início do caminho para soluções
Antes de mencionar os testes e como resolvemos o problema principal, vamos aos problemas extra-escopo mencionados acima, depois de analisar algumas dores via pesquisa de satisfação.
Para resolver a questão do carregamento de informações na aba de domicílio bancário, decidimos jogar as informações para dentro de módulos. Assim todas as informações que antes eram carregadas diretamente na aba agora carregam dentro de seus respectivos módulos.
Nova aba de domicílio bancário
Para evitar que os usuários preencham novamente as informações de bancos que já haviam preenchido, criamos uma aba com os bancos já cadastrados pelo usuário anteriormente.
Nova tela de preenchimento de dados da solicitação de troca
Criamos também uma tela de confirmação das bandeiras que serão transferidas para outro domicílio bancário.
Tela de confirmação de bandeiras à serem transferidas
Voltando ao problema principal. A solução encontrada junto ao time de negócios é permitir que um cliente tenha mais de um modelo de contratação no cadastro sem ter que duplicar. Com isso seria necessário adaptar o fluxo de domicílio bancário para receber mais de um modelo de contratação.
Então começamos a desenhar o fluxograma, pensando como iriamos agregar outros modelos de contratação (conhecidos pelos usuários como “canais”) no fluxo de domicílio bancário.
Tela de confirmação de bandeiras à serem transferidas
Inicio dos testes
Para validar o fluxo de Domicílio bancário, realizamos um teste remoto moderado com 5 usuários, cada um com diferentes níveis de experiência com o aplicativo. Com base em algumas hipóteses, elaboramos missões específicas para serem cumpridas pelos participantes. O objetivo principal do teste foi avaliar o entendimento das telas e confirmar nossas hipóteses.
Teste de usabilidade
Hipóteses a serem validadas:
•Percepção dos GNs referente a trocas por canais de transação
•Validar o entendimento sobre trocas por produto (déb, cred.) separados
•Validar dinâmica de transferências de bandeiras
As missões eram:
•Troca de domicilio para mais de um canal
•Consultar o histórico de troca
Problemas identificados no teste
Na primeira versão feita do fluxo identificamos alguns problemas. Incialmente pensamos o fluxo de uma forma mais separada onde o usuário entrava em um canal (modelo de contratação), consultava as bandeiras separadas por produto disponíveis em cada banco e a partir dai começava o processo de troca.
•Todos os usuários que fizeram o teste confundiram a tela de consulta de bandeiras com a tela de troca de bandeiras.
Uma das novidades do novo serviço disponível era a possibilidade de ver as bandeiras separadas por produto e isso foi um pedido direto do time de negócios para que essa visualização estivesse presente no fluxo. Só que é sempre importante escutar os usuários, antes de tudo. Sempre reforço isso. Com isso descobrimos que:
•Todos os usuários informaram que não costumam separar bandeira por produto e os clientes não costumam solicitar.
Veja o exemplo das telas mencionadas abaixo:
Primeira versão pré- teste das telas
Como resolvemos ?
Modificamos um pouco essa dinâmica inicial, percebemos que era mais fácil não se preocupar muito em ter uma pré-visualização das bandeiras por canais e sim simplificar o fluxo focando mais na ação de trocar o domicílio. Então o que fizemos:
•Demos a opção para o usuário selecionar todos os canais, ao invés de fazer a troca de 1 canal por vez.
•Retiramos a tela de pré-visualização das bandeiras, assim o usuários já eram direcionados diretamente para seleção de canais.
•Também retiramos a visualização de bandeiras por produto do fluxo. Desta maneira os canais já se aplicavam a todos os produtos.
O fluxo ficava basicamente: escolher os canais, informar o novo banco e tela de confirmação. Veja as telas mencionadas abaixo:
Versão validada pós teste
O que mudou no serviço?
No inicio o serviço estava desenhado focado na escolha de canais e as bandeiras que iriam ser trocadas de domicílio nesses respectivos canais escolhidos. Veja o exemplo abaixo:
Exemplo do serviço desenhado inicialmente
Agora cada bandeira que o cliente escolhesse deveria ser informada para quais canais iriam e quais produtos. Veja o exemplo abaixo:
Exemplo do serviço modificado pelo time de desenvolvimento
Como resolvemos?
Com isso, tivemos que fazer alterações de acordo com o novo serviço e testamos novamente o fluxo com os usuários. Para resolver essa questão tivemos que retirar a seleção de canais do inicio do fluxo.
O fluxo não mudou muito. Basicamente agora o usuário iria informar o banco de destino, escolher as bandeiras, escolher os canais e produtos dentro de cada bandeira pela opção “editar bandeiras”.
Tela de edição de bandeiras que foi inserida com a mudança do serviço
Conclusão do teste
Neste último teste os usuários cumpriram bem todas as missões que foram propostas. Não tivemos muitos problemas, pois já tínhamos resolvido problemas de usabilidade no teste anterior.
Ao final do teste, elaboramos uma pesquisa com os usuários utilizando a Escala SUS (System Usability Scale). Esse sistema de notas nos auxilia na coleta das percepções dos usuários sobre a interface durante o teste. A pontuação obtida nos ajuda a compreender se estamos no caminho certo em termos de usabilidade e experiência do usuário. O resultado final da escala SUS foi de 92.
Escala SUS
Próximo projeto: Gestão de máquinas