Design and Data Strategies to Enhance the Web Experience
The logged-in area of GuiaBolso’s web version was outdated, hindering user experience and reducing financial product sales conversion rates. Despite the mobile app being a sector benchmark, many users preferred the web version for their professional routines. Therefore, the project aimed to modernise the interface, improve usability, and increase engagement by placing the user at the centre of decisions.
GuiaBolso – Fintech
-
Project
Logged-In Web Area - 7 months (2020/2021)
-
My Role
Figma, Hotjar, Google Analytics, Adobe Suite, Office Suite
-
Tools
Figma, Hotjar, Google Analytics, Adobe Suite, Office Suite
-
Team
Product Manager, Front-End Developer, Software Engineer, Software Architect, Agile Coach, Design Ops, and Marketing
About the Company
GuiaBolso revolutionised financial management in Brazil, helping over 6 million people organise their finances practically and intelligently. A pioneer in Open Finance, the fintech solidified its market relevance before being acquired by PicPay in 2021.
My Contribution
As a UX/UI Designer, I actively contributed to all project stages, from mapping flows to implementing a new web design system. My work focused on visual and functional restructuring, where I conducted benchmarking and redesigned priority pages such as login, registration, accounts, and cards. I also created new components by developing a web design system to ensure visual and technical consistency. Utilizing a data-driven strategy, I integrated tools like Hotjar and Google Analytics for continuous analysis. Additionally, I collaborated with multidisciplinary teams to implement scalable and effective solutions.
Deliverables
User Research, flow and navigation restructuring, prototyping, web design system, design system components, analysis tool integration.
Design Process
Empathise
Analysed usage data on Google Analytics, conducted qualitative interviews with internal stakeholders, and performed benchmarking with competitors.
Ideate
Facilitated brainstorming sessions to restructure navigation flows, developed moodboards and concepts aligned with strategic goals, and conducted Design Critique sessions to co-create with other areas and designers.
Prototype
Created wireframes and interactive prototypes for iterative validation and worked with the development team to create and validate design system components.
Test
Implemented Hotjar to analyse interactions through heatmaps and recordings and conducted satisfaction surveys (CSAT) to monitor and improve user experience.
Challenges
-
Critical issues with responsiveness and alignment in the web version.
-
Fragmented design system, limited to the mobile app.
-
Low financial product conversion rates, requiring functional integration in the web environment.
Insights
-
Users preferred the web version for optimising tasks during work but faced usability barriers.
-
Customising financial offers was essential to increase engagement and conversions.
-
Heatmaps revealed critical areas, such as "Accounts and Cards," requiring immediate redesign.
-
A unified design system for web and mobile was indispensable for scalability.
Impact
This project was crucial for modernising GuiaBolso’s web experience, connecting user needs to the fintech’s strategic goals. The integration of data, design, and interdisciplinary collaboration resulted in a more efficient platform. As a result, there was a 20% increase in sales conversions, particularly for credit and insurance products in the user journey. Usability improved by 35%, raising user satisfaction from an average CSAT of 3.1 to 4.2. Furthermore, the development of a scalable design system with reusable components accelerated future projects.