Função
UX | UI Designer
Duração
2 semanas (Junho 2023)
A Youpay nasceu com o intuito de automatizar o processo de cobrança de colégios de pequeno e médio porte. Com seu crescimento suas soluções se expandiram para centralizar a gestão financeira de seus clientes em um único local.
Entrei no time de produto da Youpay com a missão de projetar a experiência dessas soluções. Nesse projeto eu estive atuando como o único designer, por esse motivo optei por trazer mais para perto do processo tanto a equipe de desenvolvedores, quanto o time de suporte ao cliente.
Contexto
Com a priorização da construção de novas funcionalidades, a manutenção de recursos mais antigos acabaram sendo deixados em segundo plano, e dentro desses recursos, o fluxo de pagamentos. Mesmo sendo a principal funcionalidade da plataforma, o fluxo acabou ficando não só desatualizado visualmente como também pouco otimizado para as métricas do negócio.
Para entender o ecossistema que estávamos inseridos, em sua maioria os colégios efetuam as cobranças através do envio de boletos para os pais de seus alunos. Ao utilizarem a Youpay, a geração e envio dessa cobrança passa a ser automática por um link enviado mensalmente, e além do boleto, também é possível efetuar o pagamento com cartão de crédito e Pix.
Desafio
Como reduzir as taxas dos pagamentos e criar uma conexão da nossa marca pelo produto sem descaracterizar a identificação dos colégios?
Cada método de pagamento gera uma taxa de serviço, dessa forma o custo da operação depende do padrão de comportamento dos usuários. Visto que antes de contratarem a Youpay as escolas comumente possuem apenas o boleto como método de pagamento, os usuários entram condicionados a continuarem com seu comportamento padrão.
Além de ser o método de pagamento com maior custo operacional, o boleto também tem o maior tempo para a identificação do pagamento, podendo levar até 72h e possui diversas etapas de segurança que tornam o fluxo obrigatoriamente maior e mais cansativo para os usuários. Sendo assim, uma mudança no padrão de pagamento migrando para outros métodos seria benéfica não só para a Youpay, como também para as escolas e pais.
Solução
Redesenhar o fluxo de pagamento dando maior destaque para métodos de pagamento mais ágeis e rentáveis.
Para isso foi criado um style guide, padronizando a experiência por todos os produtos e reforçando a marca da Youpay, porém sem descaracterizar a marca das escolas, uma vez que os usuários desse fluxo são clientes da escola.
Descoberta
Ao analisar os dados pagamentos recebidos no segundo trimestre de 2023 pela plataforma, pude perceber que 80% dos pagamentos eram efetuados por boletos e que a 97% dos acessos eram de dispositivos móveis, mesmo a página atual não possuindo uma responsividade adequada.
Para contextualizar os dados, juntamente com o time de suporte, coletei os feedbacks mais recorrentes de escolas e pais sobre o processo de pagamento.
Aprendizados extraídos:
Falta de informações sobre taxas e descontos, o que gerou chamadas de suporte dos pais dos alunos com dúvidas sobre o preço da mensalidade;
Visual desatualizado e agressivo, resultando na resistência de novos usuários em desconfiar se as páginas eram oficiais de suas escolas;
Depois de estarem habituados às escolas utilizarem boletos bancários, quando os usuários começaram a usar o Youpay, eles apenas replicaram esse comportamento;
A falta de um design responsivo nas páginas dificultou a legibilidade em dispositivos móveis, o que, combinado com um fluxo de pagamento crítico, resultou no medo dos usuários de cometer erros, então eles preferiram escolher um caminho familiar;
Ideação
O primeiro passo foi conversar com a equipe de desenvolvedores para entender quais eram as regras de negócio por trás de cada um dos métodos de pagamento dentro do fluxo. Para cada método um conjunto de informações diferentes era requisitado para gerar a cobrança de forma segura.
Com as regras de negócio claras, era hora de construir o fluxo do usuário do momento em que ele recebia o link de pagamento até o feedback de sucesso para cada um desses métodos.
Ao analisar esse fluxo fica claro que as requisições de segurança tanto do boleto, quanto do cartão de crédito criam um caminho muito mais trabalhoso para os usuários, porém o Pix possui um fluxo visivelmente mais curto e eficiente, além de possuir a menor taxa de serviço entre os 3 métodos.
Achamos o caminho dourado!
Prototipação
Agora era hora de rabiscar as telas para direcionar os usuários até ele.
Para evitar grandes reaprendizados e consequentemente uma frustração dos usuários, as wireframes foram projetadas para serem simples e familiares.
Com as telas projetadas e validadas tecnicamente pela equipe, foi o momento de evoluir o projeto para alta fidelidade, para isso foi criado um guia de estilos que posteriormente seria utilizado como base para a criação do primeiro design system da Youpay.
Lançando o projeto
Antes dessa etapa é recomendado a validação com usuários reais, testando a usabilidade e coletando feedbacks para identificar problemas e possíveis melhorias no fluxo, porém o projeto em questão possuía um caráter atípico e precisava ser lançado rapidamente devido à janela de pagamentos. Levando em consideração as alterações propostas e o estado do fluxo atual, optamos por lançar o produto e monitorar o comportamento dos usuários em um período de baixo acesso.
Além das métricas internas de uso da plataforma, também foram coletados feedbacks dos usuários por meio do canal de suporte e os seguintes aprendizados puderam ser extraídos:
Recebemos feedbacks positivos sobre a parte visual das páginas e a facilidade de ler as informações;
A quantidade de ligações com dúvidas sobre o preço da mensalidade diminuiu significativamente;
Nenhuma mudança foi notada no comportamento dos usuários, mantendo o pagamento por boletos bancários em torno de 80%.
Refinando a solução
Parte da tarefa tinha sido cumprida, porém, o principal objetivo ainda não tinha sido alcançado, com isso voltei a analisar o layout. Buscando tornar o método de pagamento por Pix mais atrativo e persuasivo, foram aplicados alguns conceitos da psicologia:
Tornar o Pix a opção padrão
Usuários tendem a aceitar a opção padrão para evitar riscos e por ser mais cômoda.
Maior destaque
As cores e hierarquia visual criam um contraste maior para essa opção.
Adicionado uma tag de “recomendado”
Torna a opção mais persuasiva direcionando o usuário para uma escolha com mais vantagens.
Aumentar o tamanho do título
Por ter apenas 3 letras o título pode passar menos credibilidade, sendo assim foi alterado o texto do botão de apenas “Pix” para “Pagar com Pix”.
O impacto
Lançando essas pequenas alterações finalmente conseguimos alcançar nosso objetivo:
23% dos pagamentos convertidos para Pix no primeiro mês após as alterações.
Infelizmente em minha área eu não possuía acesso a informações mais precisas sobre o faturamento, porém em feedbacks com os sócios pude confirmar que impacto da atualização foi expressivo e muito positivo para os negócios.
Para capturar o sentimento das escolas, após a primeira janela de pagamentos, foi realizado uma pesquisa quantitativa com os atendimentos de 26 escolas.
Aprendizados extraídos:
81% relatou ter percebido uma melhora nas dúvidas dos pais sobre as taxas e valores cobrados nas mensalidades;
58% relatou que tiveram contatos de pais com dúvidas relacionadas a atualização.
Isso apontou a necessidade de criar uma política de lançamentos, dando mais instruções aos usuários e deixando as escolas mais preparadas para lidarem com possíveis dúvidas.
Ao realizar uma pesquisa quantitativa semelhante, mas desta vez com 19 pais, extraímos os seguintes aprendizados:
73% declararam preferir o novo fluxo ou não fazer diferente para eles;
31% comentou sobre o fluxo de pagamento por cartão de crédito ainda ser problemático.
A limitação do fluxo com cartão de crédito já era conhecida, porém, a pesquisa reforçou ainda mais a necessidade de revisitar esse fluxo no futuro.
Com isso, declaramos esse projeto “finalizado”, porém tendo diversos pontos a serem melhor explorados em futuras oportunidades. Para munir nosso time com dados, pedi para continuarmos mapeando a preferência dos usuários pelas formas de pagamento, o tempo médio de permanência no fluxo e a taxa de abandono para cada um dos métodos.
Meus aprendizados
O processo foi desafiador, principalmente por ser o único designer na empresa no momento, o que me trouxe a necessidade de estar mais próximo das outras áreas da empresa, afinal minha equipe são todos os colaboradores. Essa foi uma lição que aprendi nesse projeto e que levei para o restante da minha jornada na Youpay.
Tive que sair da minha zona de conforto ao ter de abdicar dos testes de usabilidade da funcionalidade. Foi necessário criar uma estratégia de monitoramento e aprimoramento pós lançamento totalmente nova para mim, e sem sombra de dúvidas corremos um risco, porém um risco consciente e estratégico para o cenário em que estávamos, e tenho muito a agradecer ao meu gestor por me ajudar nesse processo. Valeu Marcus!!
Por fim, o projeto reforçou algo que sempre carreguei comigo, detalhes fazem sim muita diferença. Mudar todo o design da página foi essencial para reconstruir a experiência, mas no fim o contorno de um botão fez toda a diferença para alcançarmos nosso objetivo primário.
❤️ Feito com amor por Wellison Gonçalves