2024 – Product design
Trazendo consistência
e escalabilidade para
um sistema de pagamento
2024 – Product design
Trazendo consistência e escalabilidade para um sistema de pagamento
Minha função
Architecture, Prototipação, Design de interação
Equipe
Henrique Machiavelli, TL
Tulio Carvalho, SWE
Márcio Rosa, PM
Linha do tempo
3 meses, lançado em Julho 2024
Visão geral
Efí bank é uma intermediária de pagamentos online que oferece soluções de cobrança por meio de boletos, carnês e cartões de crédito.
Oferecendo também serviços como Pix, API, Open Finance, Gestão de Recebimento, Faturamento, API Pix e Tecnologia para gestão empresarial.
Declaração do problema
A empresa havia acabado de concluir uma reformulação da marca (alteração de nome) e do sistema (para v.7), porém o fluxos de links de pagamento e os e-mails ainda estavam na v.6.
Impactos após a entrega
Produtos foram contemplados neste lote de atualizações
fluxos (web, tablet e mobile) foram projetados e entregues
Atualização visual de todos os e-mails do produto Link de pagamento.
Objetivos principais
Atualizar o Link de pagamento e seus e-mails para v.7 (padrões visuais, componentes, interações, cores, arquitetura da informação, etc).
Construir todos os fluxos e novos componentes no Figma para fins de alinhamento e facilidade de acesso da equipe de design.
Criar fluxos e componentes nas versões mobile e web (a v.6 tinha apenas versão web).
No processo de handoff, garantir a qualidade da implementação, considerando Pixel perfect do layout desenhado.
Processo
Segui um processo não linear, então pude trabalhar de forma flexível em várias fases simultaneamente. Tivemos algumas surpresas durante a fase de ideação, que explicarei a seguir.
Ideação
Novos layouts (e-mails e fluxos)
Agora entendendo o fluxo a ser atualizado e a complexidade do trabalho, comecei a prototipação em alta para economizar tempo na entrega. Esta foi a primeira proposta apresentada:
Redesign dos e-mails
Como esperado, o redesign se estendeu aos e-mails do Link de Pagamento.
Foram realizadas várias sessões de apresentação envolvendo equipes de design, CX e PM para validar a proposta final.
Evolução do fluxo
Naturalmente, novas telas foram adicionadas ao fluxo (pagamento confirmado, negado, cancelado, etc.)
Fluxos de boleto
Desde o início entendi que por serem dois produtos que andam juntos, eu também precisaria desenhar fluxos para boleto. Algumas dessas representações:
Fluxos tablet
Também projetamos uma versão intermediária para tablets, garantindo maior flexibilidade para o cliente pagador.
Entregas
Vamos recapitular: As entregas feitas para a equipe de desenvolvimento foram:
Fluxos de link de pagamento (Web, tablet e mobile)
E-mails link de pagamento (Web e Mobile)
Fluxos de Assinaturas (Web, tablet e mobile)
E-mails de Assinaturas (Web e Mobile)
Fluxos de botões de pagamento (Web, tablet e mobile)
Handoff
O terceiro mês foi especificamente dedicado a reuniões com a equipe de desenvolvimento.
Após a implementação, finalizei meu processo aplicando 2 etapas de Design review para analisar
se haviam pontos que precisavam de ajustes, garantindo entregas de Pixel perfect.
Aprendizados e opiniões
Gerente de projeto alinhado
A tarefa escalou, então eu precisava entregar mais do que o planejado originalmente. Foi muito importante manter o project manager sempre alinhado com todo o andamento para que ele pudesse ajudar a definir sua entrega.
Algumas mudanças
Eu realmente não esperava que houvesse uma versão para tablet.
Para agilizar e não estender nossos prazos realizei diversas reuniões individuais com os Devs e isso foi crucial para alcançar nossos objetivos.
Design review
Às vezes pela pressão de entregar a tarefa rapidamente e ver o sistema online, a parte de revisão do Design acaba ficando de lado. Mesmo com a adição de novos produtos à tarefa, fiquei feliz por não ter ignorado esse processo.
Organização primeiro
Comecei a trabalhar no fluxo Link de Pagamento utilizando processos de componentização nos fluxos e organizar tudo em cada detalhe. Essa prática me ajudou muito a dimensionar e reutilizar para criar os fluxos de Assinaturas e Botões de Pagamento. Então, organização primeiro.
Novo conhecimento
Para entender alguns contextos, eu precisei estudar o modelo de pagamento e-commerce. Isso me ajudou a separar o que eram Assinatura, Pagamento Único e Botões de Pagamento, foi um aprendizado muito interessante.
Equipe de desenvolvimento
É muito importante considerar que a equipe de desenvolvimento também tem seus próprios processos So, for example, if delivery must be made in 3 months, it is interesting to deliver your task well before the deadline.
Próximos passos
Os próximos passos serão acompanhar as métricas e trabalhar nas necessidades e melhorias do cliente (o produto está vivo, então as melhorias sempre continuam). 😁
Vamos conversar sobre como transformar ideias em soluções reais?
Designed by Marcus Martins | 2025 © Todos os direitos reservados.