Modular Interface is a design system of ready to use components and patterns, created with an intention of time and cost saving as well providing coherent visual and interactive layers of a product.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/78d243e3-df1e-41ee-8b9c-c0fce903f907/5c17ff53ab4dd79b73716d94_designsystem-assets-casehero.jpg

The goal

Solution saving time and cost of interface development

My role

Product Designer

Principles

Creating this design system we needed to face a couple of challenges related to research, visual design as well collaboration.

What are principles for the design system? To help teams follow visual and interactive patterns, Modular Interface was built on these three principles:

Depth

Dashboards are overloaded by information. This may cause a lot of problems with legibility of individual interface areas. The Modular Interface comes with help, offering illusions of depth by two variants of shadows and transparency. Thanks to those treatments, the work area is raised to a higher elevation, or a target context remains in sight caused by the transparency of a object laying above.

Consistency

The Modular Interface has been designed with great care to ensure that all of its elements are consistent visually, in terms of component functions and their appliance. Hence the whole visual shell is based on: Typography, Neutral palette of colors and Grid System.

Guidance

Like GPS, Modular Interface with Cognitive Overload Reduction and Motion, allows an application to conduct user in the way that is not only pleasurable but fully understandable. COR treatment provides removal of unnecessary visual elements and highlights the most important ones to improve their reachability by the user. Motion, on the other hand, allows perceiving the continuity of changes that occur on the users' displays to allow them to follow and understand what is currently happening.

Improving the existing

Being aware of an existence of patterns working in a correct way as well the fact that users used to some the patters in the previous interface, we decided to make research in order to find them, improve and use in the new version.

Inputs

the group of modules (components) we mostly took from a previous interfaces' version and improved applying guidelines of Modular Interface.