CNS Treasury

CNS Treasury is an elite corporate FX risk management and hedge accounting platform built to automate IFRS 9 compliance and remove human spreadsheet error from enterprise financial operations. To elevate its highly reliable but severely outdated legacy system into a premier digital hub, we executed a complete visual and structural UI/UX transformation.

The Challenge

The core challenge stemmed from CNS Treasury's legacy system architecture. Having safely managed corporate financial exposures for years, the underlying software was highly dependable, but the user interface was visibly dated, cluttered, and rigid. Dealing with sophisticated treasury data, such as real-time market data, derivative position hedging, journal entries, and P&L volatility calculations, demanded extreme structural clarity.

The legacy design increased cognitive load, making it harder for finance teams to run scenarios, verify policy limits, or audit complex cash flow hedges quickly. The primary hurdle was executing a ground-up visual modernization without disrupting deep functional workflows or compromising complex multi-currency tables. Furthermore, this enterprise-tier shift required flawless precision under a strict, accelerated time constraint.

Our Solution

The redesign of CNS Treasury focused on executing an uncompromising, pixel-perfect UI/UX transformation to elevate the platform to modern financial standards. This process involved a complete overhaul of the typography, spatial grid system, and overall layout composition. Every element, including data charts, treasury tables, and nested menus, was redesigned on a component-by-component basis. This strategic approach maximized visual clarity and "breathing room" while carefully retaining the dense, actionable financial intelligence necessary for enterprise-grade operations.

To guarantee the integrity and reliability of this complex treasury software, the team implemented a rigorous, two-step internal Quality Control (QC) verification pipeline before any design work reached the client. The first phase, the UX/Logic Gate, involved senior design leads auditing layouts against the functional math rules of legacy operations, ensuring no compliance workflows or data fields were lost during the modernization.

The second phase, the Pixel-Perfect Alignment Gate, utilized a dedicated QA reviewer to examine spacing tokens, interactive micro-states, and visual assets at a sub-pixel level. This meticulous focus on total design-system adherence ensured that the high-fidelity screens were not only visually intuitive but also functionally flawless, maintaining the strict precision required by the platform's core corporate finance users.

CNS Treasury

Tech Stack

Core UI/UX Tooling
Figma
Inspection & Testing
Figma Dev Mode

Team Composition

Lead UI/UX Designer

Oversaw the creative direction, structured the design tokens, and built the high-fidelity component system.

Information Architect

Audited complex accounting rules and remapped data hierarchies to keep the user experience seamless.

Quality Control (QC) Auditors

Managed the multi-step structural and aesthetic review gates to guarantee pristine client-ready handoffs.

Project Duration

2 Months (8 Weeks) Fixed Schedule

W1-W2
W3-W4
W5-W6
W7
W8
Discovery & Auditing
Design System Foundation
High-Fidelity Execution
2-Step Internal QC & Edits
Final Asset Handoff

The Journey

Our design team began by mapping out the day-to-day user tasks of corporate treasurers, looking specifically at where the older layout generated friction during high-stress market closures or audits. Moving into Figma, we established a cohesive, highly accessible theme optimized for data-rich dashboards. We built unified states for every reusable UI molecule, from currency-switching inputs to dynamic hedge-effectiveness charts.

By utilizing advanced auto-layout frameworks in Figma, we guaranteed that complex data states scaled correctly across varying resolution requirements. Because our 2-step internal QC gate caught spatial mismatches and contextual workflow errors early, client feedback sessions were remarkably brief and highly efficient. This streamlined workflow allowed us to iterate with absolute certainty, translating conceptual wireframes into high-fidelity screens without stalling the development path.

Key Impact

The resulting UI/UX redesign completely revitalizes how finance executives experience CNS Treasury. The interface transitions seamlessly from a legacy database look into an intuitive, high-performance toolkit, creating a clean, professional, and trustworthy presentation for leading finance teams.

Finance teams can now monitor currency exposure, trigger automated journals, and review bank connectivity pipelines with zero friction. Cognitive fatigue is lowered significantly, and manual error risks drop as critical thresholds are visually highlighted via smart layout hierarchies. For the engineering handoff, our clean, organized Figma design tokens provided a production-ready blueprint that eliminated development ambiguity and dramatically expedited the technical frontend implementation.

Why it Stands Out

The CNS Treasury redesign highlights how rigorous, disciplined UI/UX workflows can completely modernize complicated legacy infrastructure. It breaks the misconception that powerful enterprise accounting tools must look dated or unintuitive to be taken seriously.

By handling every data vector with exact visual respect and subjecting every design file to a hard-line, multi-tiered QC review system, we developed a sleek, reliable, and premium interface. The new design matches the immense power of the backend architecture, empowering top-tier corporate finance teams to manage market exposures safely, effortlessly, and with complete visual clarity.