Calypso Financial Cloud Services

Founded in 1997, Calypso Technology is a global financial software and services company that delivers integrated cross-asset solutions for trading, risk, processing, and control. It offers a software platform for financial institutions such as banks, prime brokers, hedge funds, and insurers.


Goal: To build a scalable webapp solution for the various needs of financial institutions, i.e. market and credit risks management, collateral and clearance
Reasoning: While Calypso has a robust desktop Java-based app with complex financial math and algorithms, they are behind the rest of the market players providing online access to their services with modern UI

design process

The first version delivered at the end of 2016 was meant to be consistent in look and feel with existing web service of Forex trading.
It served well as the initial redesign, considering the original had been designed by a Java Engineer without regard to appearance.

I talked to product managers, gathering the requirements of the product, and with engineers, digging into the details of the technology, which we were going to apply for this webapp (using AngularJS so that developers would not have to start from scratch):


The next screenshots were produced in Omnigraffle.  The asset below is a site map, which is a diagram of the structure of the new web UI with user actions:

This was visualized into the new design. It was a leap for the product as now we had a UI very similar to these mockups:

A heatmap displaying the credit risk exposure was added, along with a more detailed and simpler UI:

Not only did I define the structure, the concept, and high-fidelity mockup. I also gained the access to the repository and helped engineers with CSS, HTML, and even contributed to the components of angular in TypeScript.

However, the first iteration of the implementation was lacking functionality, and looked similar to this:

At this time, the Material Design trend was beginning. Group of PMs and engineers were inclined towards the Material Design principles by Google. So I redesigned it again, this time following Material Guidelines.

The old site horizontal navigation served as inspiration for the new UI.  Below is a screenshot of that navigation.


This is the new UI after Material Design principles were adopted.
The wizard screen of Regulatory Risk Services:

Responsive design was incorporated: the navigation bar was either fixed or floating depending on the width of the screen.

The collateral web services screen with Paper Card:


The implementation of the Material Design screens will hopefully be continued in Calypso by the engineering teams. I completed my part successfully and gave a good jump-start to the engineering team.