Bringing consistency and scalability for a payment system
2024 – UI design
My Role
Team
Henrique Machiavelli, TL Daniel Martins, UXM Adalberto Filho, SWE
Tulio Carvalho, SWE
Márcio Rosa, PM
Timeline
3 months, launched in July 2024
Overview
Efí bank is an online payment intermediary that offers billing solutions through bills, payment slips and credit cards.
Also offering services such as Pix, API, Open Finance, Receipt Management, Billing, API Pix, and Technology for business management.
Problem statement
The company had just completed a rebrand (changed name) and system (to v.7), however the payment link flows and the emails were still on v.6.
Impacts after delivery
13
flows (web, tablet and mobile) were designed and delivered
+
Visual update of all Payment Link product emails.
3
Products were convered in this
batch of updates
Main Goals
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.
Process
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.
Ideation
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.
New layout (e-mails and flows)
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:
Email redesign
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.
Flow evolution
Naturally, new screens were added to the flow (payment confirmed, denied, canceled, etc).
Tablet flows
We also designed an intermediate version for tablets, ensuring greater flexibility for the paying customer.
Deliveries
Let’s recap: The deliveries made to the development team were:
Payment link flows (Web, Tablet and Mobile)
Payment link e-mails (Web and Mobile)
Recurring payment flows (Web, Tablet and Mobile)
Recurring payment e-mais (Web and Mobile)
Payment buttons flows (Web, Tablet and 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.
Learnings & opinions
Project manager aligned
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.
Some changes
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.
Organization first
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.
New knowledge
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.
Development team
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.