Defining the Design System of the application:
Although the system was internal and the majority of functionalities were used by internal organization users, to ensure that the system can become seamless and that the customers could feel familiar with the system, we defined a design system for the client using Atomic Design System.
This exercise not only helps the designers and the designing process, but also becomes a guide for the future scalability of the system. Thus, by referring to the old systems and other client platforms, we started the Atomic Design by creating different building blocks that would co-exist in the web and mobile applications. The process further led to defining the tangible UI elements, complex structures and page-level objects.
Below is a glimpse of the design system basics that were finalized for the Web and Mobile application:
Atoms: (standard text style or buttons)
Molecules: (tangible design elements like search form by combining the uniform button and the text field)
Organisms: (creating a header or the page layout with text style, buttons and text fields)
Templates and Pages: (standard dashboard template)
With the approved design system, we then designed the interface of the system. The entire User Flow of the system was implemented and based on the various user personas, the respective elements, pages, icons, text fields, banners and other such interface elements of the system were created. The idea was to ensure that the system was not only designed seamlessly and clearly, but it must also appeal to the culturally diverse users of the application.