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.

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).

Journey Map: Optimizing Payment Terms

Key issues

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 Styles

User requires to learn different ui-patterns which hinders learnability.

⚠️ Clutter

Old platform design

Users need quick supplier identification with key details visible at a glance.

Final redesign mockup

Simplified layout effective for quick scanning and key insights.

✅ Key findings

Heatmaps & gaze tracking provided insights on which sections users focused on. Identified the top insights to the user, optimizing their hierarchy and usability.

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

🚀 Takeaways

Optimizing working capital shouldn’t be a struggle. With better UX, smart data visualization, and intuitive workflows, businesses can make smarter financial decisions—faster.

Let's talk