Intertrust Group is one of the world-leading companies specialised in financial administration services for corporate, funding and capital markets, and private wealth management. This enables big companies like FIFA, Blackstone, and Morgan Stanley to invest and grow. There were over 20 Intertrust service applications for external and internal users, each with its own inconsistent UX and UI design patterns due to decentralised software development. The main goal of this project was to streamline each of these service applications to one ‘single source of truth’ design language using the renewed Intertrust branding guidelines.
During a period of 1 year I worked closely together with over 15 product owners from Intertrust and our project team at TBWA\X. Starting off with a major analysis of the Intertrust ecosystem, we built a complete future proof design system in Figma that provides design, development and content ruling for all Intertrust service applications making use of a common set of components and templates as a framework.
Collection of pages that demonstrate component usage from the Intertrust design system.
8pt grid system
The Atomic design component methodology from Brad Frost was used to create the design system for Intertrust. In atomic design we distinguish five levels: atoms (smallest components like buttons and checkboxes), molecules (groups of atoms like a label, field and support text), organisms (groups of molecules like a navigation bar with logo, search bar and text buttons), templates (groups of organism that form the skeleton of a page) and lastly pages (specific instances of templates). For a perfect scaling system we made use of the 8pt grid system using 12 columns as a base.
Collapsable navigation and 12 column content scaling system.
Data visualisation enhancements
Since most of Intertrust applications and services rely on heavy and complex data streams, an upgrade in data visualisation was key in the design process. The resulting visuals are designed to make it easier to compare data which can help users in decision making. Examples of these new iterations include bar, line, combination, bubble and pie charts. In addition, data table components were developed for Intertrust apps and services that display as much data as possible, while being appealing to the eye.
Various forms of modular data visualisation like bars, lines, pies, bubbles and tables.