Case Credutpay ENG | Rebecalinhares

THE COMPANY

CredutPay is a fintech payment processor that simplifies the financial journey of Brazilians, leading innovation and providing positive solutions for users, making payments quick and secure.

PRODUCT'S GOALS

• Digital wallet app focused on the C/D/E income segments

• Facilitate credit anticipation through installment payments via PIX on the card

• Promote and encourage financial education through our mascot

CHALLENGES

• Ensure accessibility in accordance with WCAG guidelines

• Design an interface that conveys a sense of security to the user

• Reduce the learning curve for using the app

• Provide immediate feedback on user actions

• Build a library of interface elements

• Implement a Design System

Strategy to drive change

The first challenge in developing this interface was integrating the product team with the developers. When we started the project, the team didn’t yet have a well-established daily meeting culture, which made internal alignment difficult and caused delivery delays and code rework. Together with the project’s Product Manager, we brought the team into the daily meeting space and solidified this practice within the company. This shift positively impacted all the results shown below and made the team more confident and secure in moving the project forward.

"All effective innovations are
surprisingly simple."
Peter Drucker

Userflow

When I joined the project, I came across the screens that had been created before I joined the team and decided to organize the user flow through a flowchart. In it, I included both the completed screens and those still in progress to give the team better visibility. I also mapped out future features and potential improvements for the MVP version. There was a significant communication gap between the dev and product teams — information wasn’t circulating properly. From this flowchart, we were able to improve team integration and outline the next steps toward delivering real value.

Research

After completing the user flow chart, I was able to focus on the existing screens and, through research on other financial apps from the perspective of Nielsen’s heuristics, I identified several areas that required more urgent improvements:

• Buttons and elements did not comply with WCAG color contrast guidelines

• Icons from different libraries caused inconsistency within the app

• Steep learning curve and lengthy transaction flow

• Long and tiring onboarding process

• Lack of auto layout use, which hindered the speed of design updates

“User experience encompasses all aspects of the end-user's interaction."
Donald Norman

Solutions

Accessibility and WCAG

A major problem found in the interface was the lack of minimum contrast between text and background color on the buttons (highlighted in pink in the previous images). According to the Web Content Accessibility Guidelines (WCAG):

"WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text"

To test contrast, I used the WCAG Color Contrast Checker, which showed that the green used did not provide sufficient contrast with white text. I then selected another color from the palette that met the minimum contrast requirements for buttons and highlighted areas of the app. This change significantly improved legibility, enabling people with low vision and screen readers to correctly read the text.

In the images, the color #49DCA4 fails all contrast tests, whereas the color #004651 passes all minimum contrast tests and was therefore chosen as the replacement color.

Icon's library and Inconsistency

Right on the HOME screen, we identified inconsistencies in the icon library, with a mix of outline and filled icons. Another issue was the use of colors, which also affected legibility, as well as the minimum font size, which in some cases was as small as 10pt for items that should have been at least 12pt.

For the new HOME screen proposal, I prioritized using Portuguese terms to focus on our target audience, avoiding the use of “HOME” and other English terms previously present in the app. I moved the profile to the top right corner, following a standard found in current apps, thereby reducing the user’s learning curve.

For the functionalities, greater emphasis was given by increasing the font size from 10pt to 14pt. Other changes included: updating the card design to follow minimum contrast colors, adding a “Coming Soon” menu with future app features to generate anticipation, and simplifying the menu to just three icons: Home, Help tab, and Wallet.

Userflow and the learning curve

Another improvement was reducing the learning curve by streamlining user flows. I decreased the number of screens and standardized the use of buttons and icons for easier comprehension, significantly shortening the time needed to complete flows and finalize transactions within the app. This reduces user stress while using the app and allows the finance team to process a higher number of transactions in less time. The following image shows the previous onboarding flow, which required a long path to complete registration.

“It's far easier to adapt the technology to the user than to force the user to adapt to the technology”
Larry Marine

Innovation and market alignment

With the flows adjusted and the most urgent issues resolved, we had a more intuitive, accessible app with a low learning curve—but one key element was still missing: benchmarking and alignment with the financial market. Using Design Thinking and Desk Research, I conducted a visual and image-based study of the latest trends in financial apps and how these apps perform in the Brazilian market. Some of the sites consulted for this research included Mobbin, Dribbble, Behance, UX Collective, and NN Group.

Through this research, I updated our app to better align with market standards and improve user comprehension.

Collaboration with the Marketing team and the responsible agency also allowed the implementation of additional improvements, such as incorporating original illustrations. This approach follows the example of apps like Nubank and iFood, which use illustrations to foster user identification and make the interface more friendly and engaging.

ED and the user’s financial journey

Ed is CredutPay’s mascot and sets the tone for the company’s communication across social media and the website.

Through alignment with the Marketing team, I was able to increase Ed’s presence within the app to foster a connection between the user and the character, who accompanies them on a financial journey of learning and achievement. I also added a direct link within the app to Ed’s blog, which offers tips for a more balanced financial life.