01
Not every customer will feel the impact of onboarding
Our onboarding feature is divided by weights, so this change would have low impact, reaching few users and possibly increasing customer support calls
ABOUT
One of the largest investment brokers in Brazil
INDUSTRY
Financial Services, Fintech, EdTech
OCCURRED IN
February 2020
KEY TAGS
UX/UI DesignWebMobile
Fixing flows by addressing needs
After XP Investments became a Bank, we accessed a database of 400,000 customers able to claim for our credit card. To highlight this feature, we added a "Card" option to the tab bar, replacing the "Profile" item, which was also available in the top-left corner.
The Challenge
02
Not every customer knows the top-left corner gives access to the "Profile" menu
Both on the top-left corner - at the customers names - and in the "Profile" menu - situated at the tab bar -, the customer can get access to the same functions
Off all the 166.000 clients that clicked on the "Profile" menu:
62%
Used the Profile tab only
Most users accessed settings using the profile in the tab bar
22%
Used both entry points
Some users explored both the Profile tab and the top-left entry
12%
Used the top-left entry
Few users clicked the customer name in the top-left corner
The Process
So, we decided to make some visual explorations focused on two different goals:
01
Least impact on development
We would address only this problem making it clear that at the top-left corner, the customer could get access to the "Profile" menu
02
High impact on development
Not only solve the problem of clarifying access to the "Profile" menu, but the following related:
Improve copy/paste for account numbers
Explain top-right icons
Hide account balance
Goal 1: Least Impact on Development
First Proposal
Legacy Interface
A fragmented layout that obscured primary actions and increased cognitive load
Lacks a visual link indicator to prompt user interaction
Agency/account info clutter the header with persistent secondary data
Optimized Interface
A streamlined architecture that establishes clear visual priorities and removes clutter
Replaced text acronyms with a recognizable user avatar to improve recognition
Inserted a suggestive label ("Look at your profile") to stimulate clicks
Second Proposal
Legacy Interface
A fragmented layout that obscured primary actions and increased cognitive load
Lacks a visual link indicator to prompt user interaction
Agency/account info clutter the header with persistent secondary data
Optimized Interface
Simplified home screen with a clear call-to-action
Replaced text acronyms with a recognizable user avatar to improve recognition
Inserted a suggestive label ("Look at your profile") to stimulate clicks
Grouped essential banking details directly under the improvements
Goal 2: High Impact on Development
So, we decided to make some visual explorations focused on two different goals:
Only one proposal
Legacy Interface
A fragmented layout that obscured primary actions and increased cognitive load
Lacks a visual link indicator to prompt user interaction
Agency/account info clutter the header with persistent secondary data
Optimized Interface
Simplified home screen with a clear call-to-action
Replaced text acronyms with a recognizable user avatar to improve recognition
Inserted a suggestive label ("Look at your profile") to stimulate clicks
Replaces quick-access toggles with clear labels for better icon clarity
Final Thoughts
Design is often about navigating constraints. The decision to proceed with Exploration 1 (Solution 1) was a strategic choice to meet a critical deployment deadline.
While it offered the least impact on development, it served as a vital MVP (Minimum Viable Product) to validate the new information architecture without delaying the launch of the Credit Card feature.
Data-Informed Decisions
Only 12% of users looked at the top-left for profile functions. This confirms visual affordance is essential to reduce customer support
Managing Design Debt
Documenting Exploration 2 as our "North Star" preserved the ideal UX. Moving it to the backlog turned a "compromise" into a phased plan
Cross-Functional Synergy
This project showed the need for front-end weight. Deliver a functional change now, not a perfect one that never reaches users