Home Page Personalization
How I designed Xflow’s Dashboard Home Page personalized for 3 different personas
Project Overview
Designed a personalized home page experience for three key direct user personas of Xflow - Freelancers & Sole Proprietors, IT Exporters & SMBs, and Transfer Pricing users. The project focused on improving relevance and efficiency by introducing new dynamic widgets and redesigning existing ones to better align with each user segment’s goals, workflows, and priorities.
Team
1 UX Designer
1 UX Mentor
1 Product Manager
1 Visual Designer
Duration
1 Month
About Xflow
Xflow is a cross-border payments platform that enables B2B businesses, freelancers, IT service providers, goods exporters, and funded startups to seamlessly receive and manage international payments.
Context
Xflow serves three types of users - Direct Users, Platform Users, and Connected Users. This project focuses on Direct Users, which are further divided into three key segments: Freelancers & Sole Proprietors, IT Exporters & SMBs, and Transfer Pricing users.
User Personas
User Segment
Volume Per Transaction
Transaction Frequency
Needs
Motivation
Freelancers and Sole Proprieters
USD 100.00 - USD 10K
45 Days to 60 Days
Simple and intuitive interface since they visit the dashboard less frequently
Less markup fees and faster payouts — they survive invoice to invoice
Small to Medium Businesses
USD 1K.00 - USD 50K.00
Weekly
Integration of invoicing tools they already use for increased productivity
Return on Investment and word of mouth
Transfer Pricing
USD 1M+
Monthly or Quarterly
Bank-like experience — money gets withdrawn as soon as it hits their Xflow account for payroll disbursement
Maximize INR earnings due to high transaction volumes
Problems
The Xflow Dashboard Home Page faced two main issues.
It was identical across user segments, despite their varying needs, motivations, transaction volumes, and visit frequencies.
Because the dashboard served all user types, every widget was visible to everyone, resulting in a cluttered homepage.
This caused frustration in locating the appropriate widget to complete tasks and increased cognitive load on the homepage due to the abundance of widgets and users' uncertainty about their functions.
Design Approach for each User Persona
To address the identified problems, the design process was carried out individually for each direct user persona. Each journey begins by understanding the requirements and inputs provided by the product team, followed by exploring and designing relevant widgets and experiences tailored to their specific workflows.
Starting with Freelancers & Sole Proprietors.
Freelancers & Sole Proprietors
Designing Widgets
Starting with the Design Process of widgets, starting with the New Widgets
Benefits Widget
Research
I conducted industry research on how leading platforms communicate user benefits — studying apps like Swiggy, Kiwi, Amazon, Uber, and others.
Key insights from industry research:
They don't simply display how much the user has saved. Instead, they frame the number within a sentence that gives it meaning. For example: "You saved ₹9,220 on shopping."
Each metric is paired with a small illustration that visually supports and reinforces the data point.
User Stories
I am Xflow user
“How do I know that I saved on Xflow?”
“How do I know how fast the payouts reached my Indian bank account?”
“How do I know how many payouts I made on Xflow?”
“How do I explore all the features of Xflow?”
Information Architecture
Metrics
Total Payouts Received
Total Savings with Xflow as compared to Banks
Average Payout Time as compared to Banks
Total Referral Earnings
Xflow Features
Multi-Currency
SaaS Payments
Zoho Books
Explorations
I explored iterations which were mostly oriented horizontally. Then, for more exploration, I asked — why restrict horizontally? Let's explore more vertically.
This led me to the idea of a stacked cards and carousels
The carousel idea was promising - the user doesn't get overwhelmed with all the numbers at once, plus it saves space both horizontally and vertically.
While designing Benefits Widget, I was going through the design process for Referrals parallelly.
Referrals Widget
Research
I conducted industry research on how leading platforms communicate user benefits — studying apps like Swiggy, Kiwi, Amazon, Uber, and others.
Key insight:
Every platform that drove high referral adoption used bold illustrations and prominently displayed the reward amount.
User Stories
I am Xflow user
“How do I know how the referral program works?”
“How do I refer my friends?”
“How do I track referrals and earnings?"
“How do I explore all the features of Xflow?”
Information Architecture
Reward Amount for the referee
Reward for the referred user
Referral Link sharing CTA
Referral link
View Details CTA
Explorations
The explorations were of two types:
Simply selling the referral program
Mentioning how it works
We went with simply selling the referral program — with a bold illustration and a prominently displayed reward amount.
Since the information in the "simply selling" exploration was minimal, the width of the referral widget could fit in half the width of the dashboard. And since the Benefits widget was decided to be in a carousel format, Referral and Benefits could fit together — side by side, each taking half the dashboard width.
Benefits and Referral Widgets — UX Design
Deposits Widget
This is an existing widget.
Research
During the Product Feedback sessions, users reported that they visited this widget more often than others — but since it sat at the bottom of the dashboard, they struggled to scroll down and find their deposits.
From this feedback, we also learned that users need to see the top 4–5 payments received quickly at a glance.
We wanted to push the widget up in the dashboard, next to the Bank Transfer Details widget, for the following reasons:
FX Analyst was getting revamped parallelly — the FX AI Analyst, which earlier occupied half the dashboard width, was now taking the full width of the dashboard. This freed up space.
Logical proximity — Sitting next to Bank Transfer Details fits best logically, as both are closely related: Sharing Transfer Details → Getting paid by the partner.
Information Architecture
UX Design
Get Started Widget
This is an existing widget.
Research
We conducted research on the effectiveness of the Get Started widget and how much users were actually using it. We ran two studies:
Study 1 — CTA Click Comparison
We compared how many users clicked the Get Started widget CTAs versus other CTAs on the dashboard. For reference, we used the "Withdraw" CTA from the Balances widget.
Insight
The 3 CTAs from the Get Started widget were clicked nowhere close to the Balances widget CTA.
Study 2 — Create Invoice CTA Effectiveness
We compared the click rate of the Create Invoice CTA from the Invoices tab vs. the Create Invoice CTA from the Get Started widget. We conducted this because, except for Create Invoice, every other ingress was already provided on the home page. Still, we wanted to know the effectiveness of the Create Invoice CTA itself.
Insight
Despite having no other ingress for Create Invoice on the home page, users preferred creating invoices from the Invoices tab.
Decision: Remove Get Started Widget
This research made us realize the Get Started widget was not effective in the first place.
We also agreed on a key principle — other widgets on the home page showed account information that could genuinely help the user, whereas Get Started only served CTAs, which users anyway accessed from other ingresses. Therefore, we decided to remove the Get Started widget.
Final UX Design
User visits the Dashboard for the first time after activation
The Day 0 experience of the user is extremely simplified to drive the user to get paid by their partner first. The visual attention is highly located to get the share the bank transfer details to the partner.
User gets paid by the user
The deposits widget gets populated as the user gets paid from their partners. With little to no distraction, user gets to withdraw their first payout to their Indian Bank Account
User successfully withdraws their first payout
After their first payout, users gets to see FX AI Analyst on the Home Page, as they now got used to how to do their payout
Final Visual Design
Final Visual Design for Freelancer
Day N Visual Design with all the Widgets for the Freelancers and Sole Prop Segment
Comparison between the Home Page for Freelancers, before and after Personalization
As it is clearly be seen, the Home Page got decluttered and the widgets appropriate to
Before
After
Freelancers & Sole Proprietors
This segment needs integration with their existing platforms, and ROI is what motivates them to stick with the platform. Based on product feedback, the Product Team suggested the following widgets for the SMB & ITes home page:
Suggested Widgets
Balances Widget — Displays balances across currencies. These balances reflect after the user receives a payment in that currency.
Bank Transfer Details — Contains the transfer details of the user's Xflow account. Users can share details directly via a Copy CTA or through a detailed view modal accessed from a CTA on the widget.
Payout Summary — A historical graphical view of the payouts the user has made.
Deposits Widget — Lists all deposit entries of payments the user received from their partners.
Benefits Widget (New) — Designed to give users reasons to stick with Xflow. Shows total payouts made, average payout landing time compared to banks, total savings with Xflow compared to banks, and Xflow features.
Referral Widget (New) — Promotes the Xflow referral program.
FX AI Analyst — An existing widget that helps users make informed decisions on foreign exchange.
Zoho Books Connect (New) — This widget was meant to provide an ingress for the Zoho Books Integration.
Out of these, Zoho Books Connect is newly addressed in this segment. This widget was meant to provide an ingress for the Zoho Books Integration. However, since we had already covered the integration ingress in the Features Cards of the Benefits widget, we decided to skip designing a separate Zoho Books Connect widget.
Therefore, there are no new widget designs for the SMB & ITes segment — the existing widget set, combined with the Benefits widget's Features Cards, already addressed their needs.
Final UX Design
User visits the Dashboard for the first time after activation
Since Day 0, we want the SMB user to know about FX AI Analyst and Limit Orders. In the Benefits, the user also gets attended to the Zoho Books Integration. This is because the most SMB users are used to the FX ecosystem and highly seek ROI and integration since Day 0.
User gets paid by the user
The deposits widget gets populated as the user gets paid from their partners.
User successfully withdraws their first payout
After their first payout, users gets to see Payouts Summary Widget and this screen stays as Day N experience.
Final Visual Design
Final Visual Design for Small and Medium Businesses and IT exporters
Day N Visual Design with all the Widgets
Comparison between the Home Page for SMBs and ITes, before and after Personalization
As it is clearly be seen, the Home Page got decluttered and the widgets appropriate to
Before
After
Freelancers & Sole Proprietors
This segment needs a bank-like experience and wants to maximize their INR earnings due to high transaction volumes. To serve this, we wanted to drive these users toward the most sophisticated features on Xflow — Auto Withdrawal, Auto Invoice Creation, FX AI Analyst, and Limit Orders.
Suggested Widgets
Balances Widget — Displays balances across currencies. These balances reflect after the user receives a payment in that currency.
Benefits Widget (New) — Designed to give users reasons to stick with Xflow. Shows total payouts made, average payout landing time compared to banks, total savings with Xflow compared to banks, and Xflow features.
FX AI Analyst — An existing widget that helps users make informed decisions on foreign exchange.
Configure Widget (New) — A dismissible widget that drives users to enable Auto Invoice Creation and Auto Withdrawal. It gets dismissed when the user either dismisses it on purpose or enables the features.
Out of these, Configure Widget is newly addressed in this segment.
Designing Widgets
Starting with the Design Process of widget, starting with the New Widget - Configure
Configure
Research
Since TP users are high-volume users, the Sales Team ensures their onboarding is as smooth as possible — explaining the Auto Withdrawal and Auto Invoice Creation features during onboarding.
It is up to the users whether they want Auto Invoice Creation, Auto Withdrawal, or both. The Sales Team then coordinates with Ops and Engineering to enable the appropriate features in settings.
To drive users to the settings, we had a banner serving as an ingress. However, the Sales Team shared feedback that users were ignoring the banner and instead contacting the Sales Team directly to guide them through enabling the features.
The banner looked the same as any other Xflow feature banner — which was likely the reason it was ignored.
Key insights from industry research:
They don't simply display how much the user has saved. Instead, they frame the number within a sentence that gives it meaning. For example: "You saved ₹9,220 on shopping."
Each metric is paired with a small illustration that visually supports and reinforces the data point.
Explorations
Exploration 1 — Dismissible Widget
I explored a dismissible widget that fits next to the Benefits widget, since TP users didn't have the Referral widget as the referral program didn't apply to them. After dismissing the configure widget, the benefit widget would take full width of the dashboard.
Exploration 2 — Banner
I also explored the banner pattern, as the dismissible behavior fits best with a banner. Since we wanted to drive users to enable features, it made sense to place it at the top of the dashboard.
We decided to go with the banner approach. The earlier banner was a generic features banner. This time, I tailor-made 3 banners based on what the Sales Team communicates about each user's needs:
Auto Withdrawal only — Information and CTA for enabling Auto Withdrawal
Auto Invoice Creation only — Information and CTA for enabling Auto Invoice Creation
Both — Combined information and CTAs for both features
Payouts Widget
Though this widget was not suggested by the Product Team, I conducted my own research and advocated for its place on the TP users' screen.
Research & Rationale
When designing the Freelancers home page, the Benefits and Referral widgets were paired together side by side. Since the Referral widget was not a TP use case, there was a void to be filled. But more than just a void — there was a need to be filled.
TP users visit the dashboard monthly or quarterly. With Auto Withdrawal settings enabled, they visit even less frequently. When they do visit, their primary reasons are:
To get compliance documents for payouts
To check whether payouts are in processing or processed status
Therefore, Payouts is an important widget for TP users. I designed the Payouts widget to sit alongside the Benefits widget, filling both the visual and functional gap left by the absent Referral widget.
Final UX Design
User visits the Dashboard for the first time after activation
After the user visits the Home Page for the first time, t
User successfully withdraws their first payout
After their first payout, users gets to see Payouts Summary Widget and this screen stays as Day N experience.
Final Visual Design
Final Visual Design for Small and Medium Businesses and IT exporters
Day N Visual Design with all the Widgets
Comparison between the Home Page for SMBs and ITes, before and after Personalization
As it is clearly be seen, the Home Page got decluttered and the widgets appropriate to
Before
After
Impact
This Project Helped Other Projects
As Home Page is the key ingress to the major features, it provided ingress to the full-fledged referral program. Visibility to the features with the Features cards in Benefits widget and Full Width FX AI Analyst which brings visibility to the strong features like Limit Orders.
Reflection
What I learned
I advocated my design decision of Payouts Widget for the TP User Segment to the stakeholders, that made me learn how to advocate and put forward my design decisions.