Calypso Financial Cloud Services

Founded in 1997, Calypso Technology is a global financial software and services company delivering 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: build scalable webapp solution for various needs of financial institutions, i.e. market and credit risks management, collateral and clearance
Reasoning: while Calypso has 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

First version delivered in the end of 2016 was meant to be consistent in look and feel with existing web service of Forex trading.
It served the purpose because imagine the typical UI the Java engineer can deliver:
I talked to product managers, gathering the requirements of the product, and with engineers, digging into the details of the technology, which we are going to apply for this webapp (appeared to be AngularJS):


The next screenshots were produced in Omnigraffle (which worked very well in the pre-Sketch times).
The asset below is a site map, which is a diagram for the structure of new web UI with user actions:
And visualized it into new design. It was a leap for the product as now we had UI very much similar to these mockups:
With the heatmap displaying the credit risk exposure, and more detailed and simple UI:
Not only the structure, the concept, and high-fidelity mockup. I gained the access to the repository and helped engineers with CSS, HTML, and even put my hands in the components of angular in TypeScript.
However the implementation lacked lots of functionality, and real application looked similar to this:
And then, starting from this page, Material Design trend began. Group of PMs and engineers inclined towards Material Design principles by Google. And I redesigned it again. This time I followed the Material guidelines.
Indeed, looks just fine, IMHO:


And finally, adopted Material Design.
Wizard screen of Regulatory Risk Services:
Responsive design. Either fixed or floating navigation bar depending on the width of the screen.
Collateral web services. Screen with Paper Card:
The implementation of the Material Design screens will hopefully continue in Calypso by engineering forces. I hope I completed my part successfully here, and gave a good jump start to the engineering team.