A day in the life of a collateral manager

CloudMargin offers a platform that covers all the aspects of collateral management across the entire life-cycle, a tool that basically aims to improve collateral managers workflow through a very intuitive and easy to use user interface with a strong and secure back-end codebase.

The firm Norman & Sons approached me through a colleague asking me if I could help them to design and maintain a design system and a component library that would help the development team in CloudMargin with the redesign of the whole platform.

So in combination with a talented team of user experience designers, we worked to design and deliver the best solution possible from a UX and UI point of view.

Starting with a vision.

The first part of the project was very exciting as we were asked to work in a future vision of the platform to see how the final product would look and what features could be achieved within the project roadmap.

Project Kickoff

When I arrived to CloudMargin’s offices, I joined the Norman & Sons team that had been working in the research and UX phase for a number of weeks before me, my task: to work on a high fidelity prototype that would demonstrate future system capabilities and also serve to stakeholders as a communication tool with clients and other firms to bring them on board for this exciting and new version of their existing product.

At this point another UI designer already worked doing some visual explorations which I took over in order to extend it an build the protoype in record time.


Perfect combo: Sketch + Principle + Invision

The project required finding the best tool combination in order to tick all the boxes and get the deliverables done in the right way, so we decided to go with the combo: Sketch + Principle + Invision.

I used Sketch to create wireframes and design a component library that is scalable, responsive and as dynamic as possible. A functionality among the new ones that Sketch has implemented – namely, linked libraries – allowed the team to work together by sharing the same set of components.

For the best performance in terms of animations and transitions we chose Principle for Mac. This app allows you to create a fast workflow that, once refined, translated into quick prototyping, well received by both the stakeholders and the development team, as we could test ideas rapidly before doing any code work. With Principle we created a desktop prototype with a resolution of 1920×1080 and more than 60 screen states in less than a week.

As there’s no such thing as a perfect prototyping tool out there yet, we had to choose a PC-friendly companion for Principle – as it only exports prototypes that run on Mac. Hence, the need for a tool to test user journeys and flows. Invision worked perfectly in this regard, as it is static in terms of animation but allows commenting and annotations that made it the perfect ally for the Principle prototype.

Prototyping a full collateral manager’s daily workflow.

The main goal of the prototype was to showcase the full workflow of a collateral manager during a normal day of work. They have a pretty well defined set of tasks and items to tackle during the day and the different items within the system have a lifecycle that updates and changes according to the actions triggered by the manager at a specific point in time.

So in order to reflect this on the prototype we created a script including several milestones that would be fully interactive within the prototype with different chapters so we could demonstrate the product capabilities.

After a milestone was triggered, the prototype would fast forward to the next chapter animating the different parts of the UI.

Delivery a vision.

After 3 months of intensive work we reached the end of the phase 1 of the project delivering a first version that will pave the future design and development of the new and improved platform.

At this point we delivered:

We created a whole set of documents in Confluence including a glossary of terms, diagram flows, user stories, decision-making tree… and all the relevan UX documents like wireframes and interaction design patterns.

As part of the Vision delivery items were a high fidelity desktop prototype describing a day in a collateral manager’s life, with more than 70 different screen states and full interactivity. Prototype was made using Principle.

One of the main limitations of using Principle is the lack of PC/Windows support, so we also delivered a fully clickable prototype using Invision replicating the same functionality as the Principle prototype.

As part of the design deliverables, we created a design system that was scalable and future-proof. As part of the design files we provided there were a set of fully designed screens for the most important screen templates. 

The team at CloudMargin had in mind to adapt their platform so they can be fully responsive so we did a set of design explorations and delivered fully responsive layouts for their platform.

Redesigning micro-interactions.

Part of the UX work that had to be done involved re-visiting some UI elements and micro-interactions in a component-by-component basis.

Previous interaction

From complex processes to simple solutions.

One of biggest issues with the user experience in their previous product was the vast amount of different data that need to be input into the system, we improved the way the information is presented on screen and simplify the interaction by including a side navigation into more complex dialog windows.

Presenting only the necessary information at once, and dividing processes into smaller steps helped reducing complexity and user errors.

A future-proof design system.

I also helped the team by creating and maintaining a design system that will help them to iterate and improve the new UI design in the future.

Sketch was a great ally for this, keeping a symbol library that is scalable and customisable that can be shared across multiple design files was a time saver and proved very useful over time, a single source of truth for design that would not only define the type and structure of UI components but would also keep all the information regarding typography, colours, iconography and templating.

Exciting and rewarding project from beginning to end.

I have to be thankful as this project involved lots of different responsibilities and challenges, I worked in both UX and UI design tasks trying to bring innovation and a refreshing note into a complex ecosystem. Working with a team that wasn’t used to have a design team around was a very good opportunity to bring some best practices and design processes into play.

Before our team left, I help them to bring a full time designer into the company that would take things forward and continue to improve and extend new functionalities, using as a base the work that we did during more than 8 months.

I’m sure CloudMargin would keep improving their product over time, and now they have the design knowledge and necessary tools to do it with ease.