Mosaic Design System is a collaborative work of the User Experience Engineering Research & Design Team at Finastra. From typography, layouts and grids, colours, icons, components and coding conventions, to voice and tone, style-guide, documentation, the design system is bringing all of these together in a way that allows the internal and external teams to learn, build, and grow.

This task included to do an in-depth research on design systems, analysis of our product structures and creating an architecture model of how the physical design system will look and be operated by users. It also included defining guiding principles, standardising reusable design patterns, establishing the pattern library, setting up the design files with up-to-date patterns and refactoring the code and front-end architecture to support the modular approach. 

Throughout the project a critical aspect was the re-usability and maintenance of patterns and components. After looking through a pattern inventory, the possible personas and current organisation structure a certain model was set in place to assist designers and developers understand the lifecycle of the design system and how to best utilise it to efficiently speed up their design purposes. 

Implementing the design system on our proprietary platform with the appropriate naming conventions and code including a minimum level of WVAG2.0 AA accessibility compliance allowed developers to re-use components and templates faster while focusing on higher level tasks. 

Following the atomic design approach, as a team of two leading the research, design and implementation of patterns we managed to release an internal beta version in May 2018 with 40+ patterns and style principles and interaction including motion design principles and standards. 

Would like to see and know more about this project?