Trazendo consistência e escalabilidade para um sistema de pagamento
2024 – UI design
Minha função
Equipe
Henrique Machiavelli, TL Daniel Martins, UXM Adalberto Filho, SWE
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.
Also offering services such as Pix, API, Open Finance, Receipt Management, Billing, API Pix, and Technology for business management.
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
13
fluxos (web, tablet e mobile) foram projetados e entregues
+
Atualização visual de todos os e-mails do produto Link de pagamento.
3
Products were convered in this
batch of updates
Objetivos principais
Update the payments link and your e-mails to v.7 (visual standards, components, interactions, colors, information architecture, etc).
Build the entire flow and new components in Figma for alignment purposes and ease of access for the design team.
Create flows and components in web and mobile versions (v.6 was web only).
In handoff process, ensure quality of implementation, considering Pixel perfect of the designed layout.
Processo
I followed a non-linear process, so I had the flexibility to work on several phases simultaneously. We had some surprises during the ideation phase, which I will explain below.
Ideação
After a few meetings, i was instructed to start the design and prototyping considering the same content and representations (error, approved, under analysis, etc.) already applied to the current payment links. I conducted an complete analysis of our e-mails and payment link flows, as well as other competitors’ payment link flows. In addition to the flows, it was also important to map the e-mails that are sent by the system.
Novos layouts (e-mails e fluxos)
Now understanding the flow to be updated and the complexity of the work, I started hi-fi prototyping to save time for delivery. This was the first proposal presented:
Redesign dos e-mails
As expected, the redesign extended to the Payment Link emails. Several presenting sessions involving design, CX and PM teams were held to validate the final proposal.
Evolução do fluxo
Naturalmente, novas telas foram adicionadas ao fluxo (pagamento confirmado, negado, cancelado, etc.)
Fluxos tablet
Também projetamos uma versão intermediária para tablets, garantindo maior flexibilidade para o cliente pagador.
Entregas
Let’s recap: The deliveries made to the development team were:
Payment link flows (Web, Tablet and Mobile)
E-mails link de pagamento (Web e Mobile)
Recurring payment flows (Web, Tablet and Mobile)
Recurring payment e-mais (Web and Mobile)
Fluxos de botões de pagamento (Web, tablet e mobile)
Handoff
The third month was specifically about meetings with the development team. After the implementation, I finalized my process by applying 2 stages of Design review to analyze whether there were points that needed adjustments, ensuring Pixel perfect delivery.
Aprendizados e opiniões
Gerente de projeto alinhado
The task escalated, so i needed to deliver more than was originally planned. It was very important to keep the project manager always aligned with all progress so that he could help define its delivery.
Algumas mudanças
I didn’t really expect on there being a tablet version. To speed up and not extend our deadlines, I held several individual meetings with the Devs and this was crucial to achieving our objectives.
Design review
Sometimes due to the pressure of delivering the task quickly and seeing the system online, the Design review part ends up being left aside. Even with adding new products to the task, i was glad i didn’t skip this process.
Organização primeiro
I started working on the Payment Link flow using componentization processes in the flows and organizing everything in every detail. This practice helped me a lot to scale and reuse to create the Recurring Payment and Payment Buttons flows. So, organization first.
Novo conhecimento
To understand some contexts, i needed to study the payment model e-commerce. This helped me separate what Recurring Payment, Single Payment and Payment Buttons were, it was a very interesting learning experience.
Equipe de desenvolvimento
It is very important to consider that the development team also has its own processes. So, for example, if delivery must be made in 3 months, it is interesting to deliver your task well before the deadline.