B2B Supply Chain Finance App

Transformed complex B2B data into human experiences, aligning user needs with business impact.

Role

Calculum

Company

Senior UX/UI Designer
Dashboards screens
Dashboards screens

Overview

Calculum provides a web platform that help companies to stay competitive in an increasingly complex financial landscape.

My role was ensuring intuitive, and scalable design framework.

Animated dashboard mockup
Animated dashboard mockup
Procurement teams need to make fast decisions, but complex financial platforms slow them down. When data is scattered across dense tables and workflows are clunky, professionals can't quickly spot the insights they need. This means missing opportunities to negotiate better terms and optimize what should be strategic wins.

The Problem

Unite Systems Dashboards
Manage Complexity with Progressive Disclosure
Optimize Insights and Layout Hierarchy

Benefit: Quickly extract key insights on financial impact.

Actions hidden until needed, reducing cognitive overload.

Define user journey. Map and define content that matches users task.

Legacy Platform Design: Usability and Scalability Issues

A scalable design system ensured consistency while allowing flexibility for growth.

Two laptop screen of financial dashboards that unite progress; in a light gray background.
Two laptop screen of financial dashboards that unite progress; in a light gray background.

Journey Map: Optimizing Terms

Unite System Dashboards

Challenge 01

Mid-fidelty Mockup for content strategy
Mid-fidelty Mockup for content strategy
Information Archecture

The Solution

Map out context to see the full picture. Bring the whole data story together instead of piecing it from scattered fragments.

Global overview of home interface to unite platform screens; in a light gray background.
Global overview of home interface to unite platform screens; in a light gray background.
United Systems Global overview

Redesign

Components (ui) of data visualization to unite system, in a light gray background.
Components (ui) of data visualization to unite system, in a light gray background.
Components (ui) to unite system to inform insights in a light gray background.
Components (ui) to unite system to inform insights in a light gray background.
Hierarchy

Hierarchy and layout provide instant insights at a glance to support user task.

Data Accessibility

Make complex data work for users, not against them. We streamlined how information is presented so people can quickly find what they need to complete their tasks - turning data overload into focused support

Interface redesign - Effective use of layout, space, color and contrast, in a blue background..
Interface redesign - Effective use of layout, space, color and contrast, in a blue background..

Visually highlight key data points to improve usability through minimize visual clutter, effective use of color and contrast. Improved charts readability for data-heavy dashboards.

UX research conducted, showing a heat-map and gaze-point.t
UX research conducted, showing a heat-map and gaze-point.t

Discovery: Heatmaps and gaze point of the new simplified layout to support effective scanning.

Key findings

Optimize Insights and Layout Hierarchy

Challenge 02

Usability and Scalability

Consistent use of components and behaviors across the application creates familiar user experience (increasing user learnability). Clear visual hierarchy now guides users through their workflow, while accessible charts support decision-making without overwhelming the interface.

A laptop computer screen displaying a dashboard with charts  in a blue background.
A laptop computer screen displaying a dashboard with charts  in a blue background.

Challenge 03

Ui components of the mockup visual library (table, secondary icon only button & dropdown menu).
Ui components of the mockup visual library (table, secondary icon only button & dropdown menu).
Components (ui) of data visualization to unite system in a blue background.
Components (ui) of data visualization to unite system in a blue background.

The Solution

Legacy Platform Design
Desktop computer of supplier list interface in a purple background.
Desktop computer of supplier list interface in a purple background.

Supplier Info Design Enhancements

A user flow diagram of how user navigate supplier and what they look for, in a purple background.
A user flow diagram of how user navigate supplier and what they look for, in a purple background.
Ui components to manage status in a purple background.
Ui components to manage status in a purple background.

Challenge 04

Laptop screen of supplier insights dashboard in a purple background.
Laptop screen of supplier insights dashboard in a purple background.

Showing only what users need at each step. Clear visual hierarchy guides users naturally through their workflow, while secondary actions stay hidden until relevant. This reduces cognitive load and helps users focus on making decisions, not managing interface complexity

Simplified Complex Supplier Data Through Progressive Disclosure

The Solution

Design System

Conclusion

Through research-driven design improvements, procurement teams can now find critical insights 40% faster and complete key tasks with fewer clicks. The streamlined interface reduced user errors by 60% while increasing daily platform engagement. Most importantly, professionals report feeling confident navigating complex financial data - turning what used to be a frustrating experience into a strategic advantage.

Let's talk