Supply Chain Finance Platform
Transformed complex B2B data into human-readable experiences, aligning user needs with business impact
Company
Lead UX/UI Designer
Calculum
Role
Date
Website
2023-24

Overview
Calculum provides a web platform that empowers companies to optimize payment terms and cash flow, helping them stay competitive in an increasingly complex financial landscape.
My role as Lead UX/UI designer was ensuring a structured, intuitive, and scalable design framework. Enhancing data visualization principles to improve engagement and comprehension. Overseeing the development of an evolving design system to support platform growth.
CEO & Co-founder | Oliver Belin
"Our vision is a future where data-powered financial services are accessible, affordable and efficient for all. Data insights can democratize finance, empowering businesses of any size to gain control and a competitive advantage."
Improving Clarity, Efficiency, and Data Accessibility
Financial data platforms must balance complexity with usability. The initial platform faced key challenges:
Apply Data Visualization Principles
Consider the data type, minimize visual clutter, effective use of color. Intuitive charts improved readability for a data-heavy audience accustomed to numbers and tables.
Manage Complexity with Progressive Disclosure
Cognitive overload was reduced by revealing less frequently used features only when needed (via visual hierarchy, hover, click, or expansion states).
The challenge
Enhance the Design System as the Platform Scales
As Calculum evolved, a scalable design system ensured consistency while allowing flexibility for future growth.


Final mockup of vCard analytics
Financial Strategist – Mark Schwartz
"I need the right insights fast. I don’t have time to dig through endless tables—just show me what matters."
Behaviors
Goals
Quickly extract key insights on suppliers, payment terms, and financial impact.


Frustrations
Cognitive overload, inefficient data filtering, excessive scrolling in long tables.
Role: VP of Finance / Treasury Manager / Procurement Director
Industry: Large Enterprise, Manufacturing, Retail, or Supply Chain
Oversees working capital efficiency and supplier payment terms.
Balances cash flow optimization with maintaining strong supplier relationships.
Works closely with Procurement, Treasury, and senior management to align financial strategy with operational needs.
Uses financial analysis tools and benchmarking data to guide decision-making on payment terms.
Works in procurement, optimizing supplier relationships and payment terms. Visits the platform frequently but for short bursts (avg. 10 min per session).
Responsibilities
Persona
Journey Map: Optimizing Payment Terms
Problem Statement
Mark Schwartz, a procurement director, needs a more streamlined and data-driven approach to negotiate favorable payment terms and secure rebate opportunities with vendors because she faces challenges in balancing cash flow management, supplier relationships, and maximizing financial incentives, leading to inefficiencies and missed cost-saving opportunities.


Old platform mockup
⚠️ Alert & notification fatigue
This can have serious consequence as diminish attention. That defeats the purpose of the dashboard, which is to provide timely and actionable insights.
⚠️ Unite systems
Providing a global overview offers an at a glance snapshot of what's going on. A common pain point is navigating multiple data sources and disjointed systems.
How might we help users focus on their progress without feeling overwhelmed by notifications, recommended actions and disjointed systems on the dashboard?


✅ Map out user context


HMW 1- Dashboard insights & progress
Final dashboard redesign
Unifying dashboard systems and content hinges on prioritizing actionable information for Mark S. Let's analyze his current workflow to determine which data points are essential for his daily, monthly, and quarterly decisions, and streamline the dashboard accordingly.
Stage 2: HMW Explore Insights
How might we visually highlight key data points to reduce cognitive load and improve scalability?
Legacy Platform Design: Usability and Scalability Issues


⚠️ Layout
Platform's rigid layout limited scalability, hindering the inclusion of new metrics for deeper data analysis.
Old platform design


Final redesign mockup
The geolocation chart's visual dominance diverted attention from other essential data, demonstrating a poor visual hierarchy.
⚠️ Gaze tracking
Low contrast and incomplete labels ("Med") impeding accurate interpretation.
⚠️ Chart data accessibility
Instant context for insights
Users need to quickly understand the purpose and potential benefits of each each screen.


⚠️ Hierarchy
Users struggled with interfaces lacks a clear hierarchy and layout.
⚠️ Inconsistent UI
The tertiary buttons for maximizing view had a border meanwhile other icon only buttons don't like the ellipse. Other screens use blue as first series of the chart colors.
⚠️ Clutter
Old platform design
Users need quick supplier identification with key details visible at a glance.


Final redesign mockup


Simplified layout for quick scanning and key insights. Heatmaps & gaze tracking provided insights on which sections users focused on. Identified the top insights to the user, optimizing their hierarchy and usability.
✅ Key findings
Gaze point and attention heatmap


Stage 3: HMW Analyzing Opportunities
How might we prioritize the most critical supplier details without overwhelming the user?
Usability Study
Inefficient Supplier Cards: Users wanted quick supplier identification with key details visible at a glance.
✅ Gaze point on screen
Z-Pattern: User focus on scanning the entity name and logo in a Z-pattern" as they scroll down the list.


Cluster of information takes longer for the user to scan and navigate.This does not optimize the flow.
⚠️ Difficulty readability




✏️ Drilling into information
Drilling further into the information to reveal more detail, reference something or double-check information is an important part of the experience in a dashboard. This is the part where users are free to explore more and discover and really “use” the data. If people want more, that’s usually a good sign.


Final redesign Mockup
Conclusion
By refining the UX through research-driven enhancements, Calculum transformed into a more intuitive, efficient, and engaging platform. These optimizations improved usability, reduced friction, and empowered procurement professionals to extract key financial insights quickly and effectively.
🎯
Final thought
Optimizing working capital shouldn’t be a struggle. With better UX, smart data visualization, and intuitive workflows, businesses can make smarter financial decisions—faster.