Live Payment Operations Dashboard for Payment ReconciliationLive Payment Operations Dashboard for Payment Reconciliation
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Live operations dashboard for a payment engine: design and build
A real-time dashboard I designed and built for a payment system, so a team can see at a glance that no payment is lost or paid twice, even while things go wrong.
Design highlights
A “promises” scoreboard: three big rings (Lost, Sent twice, Stuck) that stay green at 0
A one-click, 90-second demo that plays a story on the live system: the network gets flaky, a worker crashes mid-payment, the network goes down, the team fixes it, and the day ends balanced
A life story for every payment: click any payment to see each retry, who handled it and why
Live charts and a control room to break the network on purpose and watch the system recover
End-of-day reconciliation in one click, checked against the payment network’s own records
Not a mock-up: it’s connected to a working payment engine I also built (Python, FastAPI, PostgreSQL, Redis), so every number on screen is real.
Built with: HTML, CSS and JavaScript, no framework.
🔗 Code: github.com/annastudios/settlement-engine
#DashboardDesign #UIDesign #DataVisualization #Fintech #WebApp #UXDesign #FrontEnd #JavaScript #SaaS #ProductDesign
Post image
Post image
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started