Intertrust Group

Design System for
20+ applications

Description

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.

Solution

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.

Location

Amsterdam 2020-2021 @ TBWA\X

My Role

Team lead, UX & Visual design

Contributors

Digital design - Fieke Brienen
Digital design - Toine Aerts
Digital design - Rex Amesbury
Project management - Charlotte Hintzen

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.

Colapsable 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 tables are very frequently used components in Intertrust apps and services and therefore it was crucial to display as much data as possible while it should also be appealing to the eye.

Various forms of modular data visualisation like bars, lines, pies, bubbles and tables.

Independer

Personalised
product experience

Team lead, UX & Visual design

Next-project:

Personalised
product experience

UX Design