From Complexity to Clarity : Enhancing Citi Connectโs B2B Payment Dashboard for Faster Financial Insights
TL;DR:
Citi Connect is a B2B platform used by treasury managers to oversee transactions, process batch payments and reconcile transactions across global accounts & vendors
Whatโs the problem?
Most of the B2B solution are legacy platforms with less emphasis less on the user expereince. A customer audit found that the Billing and Payment portal had low customer satisfaction scores, caused by disjointed data, no visual summaries, and filters that reset every time.
Whats our solution
The redesign gave treasury managers at a glance transaction summaries, saved custom filter views, and direct payment CTAs, cutting the time spent hunting for information before a payment could even be actioned.
My Contribution
Discovery with SMEs and PMs
Ran a Heuristic Analysis identifying core usability issues and synthesizing findings to frame the redesignโs problem statement.
Applied Jobs-to-be-done framework
to map treasury manager workflows, then ran a feature prioritization matrix to narrow 10 concepts to 4 must-have features
Designed & Shipped 3 user flows
After validating design choices with design critique sessions with actual users, shipped 3 flows with dev hand-off documentation
Led the 4-week design sprint for Citi Connectโs B2B billing and payments dashboard
Finding and reconciling payment records is Slow, cluttered, and overly manual for treasury managers
Treasury managers struggled to find relevant payment records due to Outdated UI paradigms and excessive data cluttering the screen, delaying reconciliation of financial reports.
Yes, This is what they had to work with!
The Solution
The system interprets data, & summarizes essential information for informed decision-making.
Treasury managers can now build custom pages for every vendor, location, or account combination, refine them with column-level filters pages, and create reconciliation-ready reports directly quick export options
Chrome
File
Edit
View
History
Bookmarks
Profiles
Tab
Window
Help
Mon Jun 22
9:41 AM
Citi Connect - Home
Home โ Confluence
connect.citi.net/home
Hide
Daily
Monthly
9th August, 2024
Processed
3
Unpaid
2
Quick Payment Summary
Rolls total transactions, processed payments, and amount due into one widget, with a daily or monthly toggle to view any period and direct Pay Now and View CTAs surfaced right alongside the numbers.
How this solves the problem
Managers get the information right when they need it, instead of manually piecing it together from a full table.
Create Custom Views
Treasury managers can save a default view for frequently visited pages, or create a custom view scoped to a vendor or account, each with its own column-level filters.
How this solves the problem
Managers pick up right where they left off, instead of rebuilding the same view from scratch every time.
All Transactions
Processed Payments
Unpaid Bills
+ Add New Tab
Due Date
Payment ID
Payment Amount
Due Date
Account
Vendor
886010
$ 127.33
08/09/24
US Bank Corporate
ABB Corporation
886009
$ 100.00
08/09/24
US Bank Corporate
ABB Corporation
Create Flexible Exports
Reports are generated directly from whatever columns are currently shown, trimmed or expanded to fit the task, and filters can be pinned so they persist when a manager moves from a transaction to the payment page.
How this solves the problem
Eliminates the need for Excel or other external tools to filter, sort, and clean up the data before itโs reconciliation ready.
Impact
The redesigned Citi B2B Payments Dashboard was successfully launched after an intensive 4-week design sprint
Faster reconciliation
of financial reports
Reduction in repetitive tasks
filtering different vendors
Increase in user satisfaction
Post-launch metrics
