Role
UX | UI Designer
Duration
2 weeks (June 2023)
Youpay was created with the aim of automating the invoice process for schools. With its expansion, its solutions have evolved to centralize the financial management of the clients in one place.
I joined the product team at Youpay with the mission to design the experience of its solutions. In this project, as the only designer, I decided to involve the programmers and support teams closely in my design process.
Context
With the prioritization of building new features, the payment flow had been out of date and unoptimized for business metrics. As the main flow of the platform, we feel the necessity to give more attention to it.
To understand our ecosystem, the majority of schools have sent their charges as bank slips to the students’ parents. With Youpay, the charge is sent monthly as an invoice link, and in addition to bank slips, there are also available payments with a credit card and Pix (an instant bank transfer method in Brazil).
Challenge
How can we reduce payment fees and build our brand connection through our products, avoiding mischaracterizing the school's identity?
Each payment method has a service fee, with bank slips having the highest operating cost.
Besides to having the highest compensation period, which takes until 72 hours, the bank slip also has multiple security steps in it flow, making the payment process slower and tiring for users. In this manner, changing the payment pattern to others methods would be healthier for Youpay, as well as for schools and parents.
Solution
Redesign the payment flow, giving more emphasis to payment methods that are faster and more rentable.
For this purpose, a style guide was created, establishing a pattern for all experiences through the products and reinforcing the Youpay’s brand without distorting the identification of schools, once the users of this flow were schools’ clients.
Discovery
Analyzing the data on payments received in the 2nd quarter of 2023 through the platform, I could notice that 80% of all payments were made by bank slips, and also that 97% of all traffic came from mobile devices, even though the page hadn't had a good responsive design.
To contextualize the data, together with the support team, I collected the most common feedbacks from schools and students' parents about the payment process.
Key Takeaways:
Lack of information about payment fees and discounts, which created support calls from students’ parents with questions about the price of tuition;
Outdated and aggressive visual, resulting in the resistance of new users to distrust if the pages were official from their schools;
After being used to the schools using bank slips, when the users started to use Youpay they just replicated this behavior;
The lack of a responsive design on the pages made readability difficult on mobile devices, which, combined with a critical payment flow, resulted in users’ fear of making mistakes, so they preferred to choose a familiar path;
Ideation
The first step was to talk with the programmers’ team to understand the business rules behind each payment method in the flow. For each method, a different group of information was requested to create the charge safely.
With the business rules crystal clear, it was time to build the users flow, starting from the moment they receive the payment link, until the success feedback for each of the payment methods.
Analyzing the flow, it’s clear that security steps in the bank slips and credit card flows created a longer and more painful path for the users, but the Pix method visibly has a shorter and more efficient flow, combined with the lowest service’s fees between the three methods… It’s that.
We have found our golden path!
Prototyping
Now it’s time to scribble some ideas to lead the users down this golden path.
To avoid a big relearn process and consequently some frustration from the users, the wireframes were designed to be simple and familiar.
With the screens designed and validated technically for the team, it was time to evolve the design for high fidelity. For that, I created a style guide that, in the future, would become the base for the first design system of the company.
Releasing the update
Before this step, it is usually recommended to do a usability test with real users and capture feedback to improve the flow and screens. However, because of the short window to launch the project and considering the changes proposed and the current flow, we decided to launch the product and monitoring the user behavior in a period of low demand.
Beyond the internal metrics of platform use, I also capture some users feedbacks together with the support team, and could extract the following learns:
We received positive feedbacks about the pages’ visuals and the facility to read the information;
The amount of calls with questions about the price of tuition decreased significantly;
None changes were noticed in users’ behavior, keeping the payment by bank slips around 80%.
Improving the solution
Part of the task was done, but our main goal wasn’t reached yet, so I went back to analyze the layout and the data I had. Looking to make the Pix method more attractive and persuasive, I applied some psychology concepts:
Turn Pix the default option
Users tend to accept the default option to avoid risks and because it is more convenient.
Giving more emphasis
The colors and visual hierarchy build a bigger contrast for this option.
Adding a “recommended” tag
The tag makes the option more persuasive, leading the user to a more advantageous choice.
Increasing the title length
With just three letters, the title could transmit less credibility. Therefore, I changed the button text to just “Pix” for “Pay with Pix”.
The impact
After launching these little changes, we finally reached our goal:
23% of all payments were converted to Pix in the first month after the update.
Unfortunately, in my position, I didn’t have access to precise information about the company's revenue, but in feedback with the stakeholders, I could confirm that the update's impact was expressive and very positive for business.
To understand the schools' feelings after the first payment window, we did quantitative research with 26 schools' customer services.
Key Takeaways:
81% noticed an improvement in the parents' doubts about the tuition price;
58% reported calls from parents with questions about the update.
That shows us the necessity of creating a release policy, giving more instructions to the users, and preparing the schools to deal with possible questions.
Repeating the process, but this time with 19 parents, we extract the following learnings:
73% declared their preference for the new flow or that it doesn’t make much difference for them;
31% said the credit card payment flow is still problematic.
The limitation of the credit card flow was already known, but the research reinforced even more the necessity to review this experience in the future.
Therefore, we declared the project as "finished", but there are some points to be better explored in future opportunities. And, to equip our team with data, I asked the tech team to keep tracking data about the chosen payment methods, the average time spent in the flow, and the abandonment rate for each method.
My reflection
The process was challenging, specially for being the only designer in the company, which made me bring the other areas closer in my design process, after all my team are every people in the company. This experience was a lesson that I carry with me for the future.
I had to leave my comfort zone by not doing the usability tests. It was necessary to create an after-launch monitoring strategy, which was totally new for me. It was a risk, but a conscious one, necessary for our scenario. I had to thank my manager for helping me in this process. Thanks, Marcus!
Finally, the project reinforced something that I always bring with me, the details make all the difference. Redesigning all the payment flow was essential to rebuilding the experience, but in the end, the outline of a button made all the difference in achieving our main goal.
❤️ Made with love by Wellison Gonçalves