Supply Chain Finance

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.

Company

Lead UX/UI Designer

Calculum

Role

Date

Website

2023-24

black blue and yellow textile

Overview

Calculum is revolutionizing how companies optimize their working capital and unlock cash flow through advanced AI-driven supply chain analytics. By leveraging cutting-edge technology, Calculum provides businesses with actionable insights that drive financial efficiency and smarter decision-making. The platform empowers companies to optimize payment terms and cash flow, helping them stay competitive in an increasingly complex financial landscape.

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 that hindered usability and adoption:

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 Problem

Enhance the Design System as the Platform Scales

As Calculum evolved, a scalable design system ensured consistency while allowing flexibility for future growth.

Animated dashboard mockup
Animated dashboard mockup

Final redesign Vcard mockup

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.

Persona Procurement Director
Persona Procurement Director
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

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 home dashboard mockup
Old platform home dashboard mockup

Old platform mockup

Journey Map: Optimizing Payment Terms

How might we help users focus on their progress without feeling overwhelmed by notifications and recommended actions on the dashboard?

Use this space to introduce yourself or your business to site visitors. Share who you are, what you do, and the purpose of this website.

Dashboard redesign Mockup
Dashboard redesign Mockup
⚠️ Alert & notification fatigue
⚠️ Unite systems

A common pain point is navigating multiple data sources and disjointed systems. Providing a global overview offers an at a glance snapshot of what's going on.

Mid-fidelty and information architecture
Mid-fidelty and information architecture

HMW Dashboard Insights & Progress

Final dashboard redesign

✅ Eliminate the difficulty

Prioritize which charts will actually make it to the dashboard is crucial. A good understanding of the persona Mark S, what are they currently doing to obtain this information? Of these things, which ones do they do every day? Versus once a month or once a quarter?

Stage 2: HMW Explore Insights

How might we visually highlight key data points to reduce cognitive load and improve scalability?

Challenges

Users encountered hurdles in navigating the growing collection of features, and the interface struggled to keep pace with the platform's evolving nature.

Old design mockup
Old design mockup
⚠️ Enhance charts

Value in the chart effects accessibility in reading the data. "Med" is incomplete and amp of the contrast.

⚠️ Scaleability

Layout is difficult to scale and add more metrics to help user analyze data relationships and further insights.

⚠️ Gaze point

Old platform design

Geolocation chart is getting all the focus. The rest of the information is getting lost. Visual heiarchy not supporting what the user is trying to execute.

Final redesign mockup

Instant context for insights

Users need to quickly understand the purpose and potential benefits of each each screen.

Old platform design
Old platform design
⚠️ 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.

Dashboard redesign
Dashboard redesign

Final redesign mockup

Eye data map to measure focus
Eye data map to measure focus

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 focus map

Redesign screen's gaze point meteric
Redesign screen's gaze point meteric

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.

🚀

Get in Touch