Crafted a Design System for LTIMindtree’s Cloud Department Flagship product “INFINITY”

Problem Statement on Product Design Level

There was no centralized system of Design. No predefined colors, components, interactions, states etc.

When I reached to management regarding this, the feedback I received was “Darpan, we are not aware of such thing which defines the design practice for a product. There were 3 designers before you and this is what they designed and we expect you to improve it. So, take any step necessary but make sure design requirement regarding current tasks are delivered.”

product design problem

Problem Statement on Team Management and Delivery Operations Level

An important input I received from developers was “Darpan, your design, color codes and components are different from the previous one. What should we follow ? We may have to do changes in central library.”

I have development skills too, so when I was instructed regarding how different features would work I asked a lot of queries regarding both frontend and backend functionalities. The common feedback I received is “Darpan previous developers coded this stuff and left the company without giving proper guidance regarding how different components have been coded and how they will be interacting with users. Also, they never stated how different components are populating, processing or taking data.”

Problem Statement Summary

So, developers were struggling in order to incorporate my new designs as making changes in central library is a tedious and time taking task. Me as a designer, also struggled to pickup from where the previous designers left.

Also, whenever a new developer joined the team he/she would be running to other developers and management to understand the code base, to pickup from where the previous developer left which would affect the delivery deadline for them.

As it is obvious by now that problem exist on product design as well as team management and delivery operations levels and this cycle will keep on repeating if any senior resource exit the team, I decided to take matter in my own hands as it needed a permanent solution.

My Solution

Typography - Infinity Color Pallette 2 Inputs - Infinity Selection - Infinity - 2
Buttons - Infinity Color Pallette 1 Selection - Infinity - 1 Tabs and Alert - Infinity

Impact

Results on Product Design Level

Select a Tab & drag from left to right

Widgets are unscalable. The increase in number of applications will result in decrease in visibility and readibility.

Infinity-before-1

Improper usage of UI Design to showcase data which could have been showed much efficiently, just to use up sapce.

Infinity-before-2

Same issue as previously stated, along that inconsistent widget design.

Infinity-before-3

Loss of data due to inefficient UI Design as legends are invisible.

Infinity-before-4

As mentioned early, Tables looks like Accordions. No need of "Application per Page", we can use lazy loading. Usage of filter may result in loss of data if an application is selected. Too many legends.

Infinity-before-5

Userflow breaks when user is navigating through filters. Inefficient UI Design as selection is not proprly visible. Hence, Data loss.

Infinity-before-6

Inefficient onboarding experience, as steps which are needed to be taken are out-shined by the code required.

Infinity-before-7

Very bad UX regarding userflow while populating data as every time the user have to click a button for it after making a selection, which can be handled just by one click of selection in previous fields. The "selected file" looks like a link. Inefficient provisions for editing and replacing files and details.

Infinity-before-8

Scalable widgets. Improved visibility and readibility.

Infinity-after-1

Consistency in widget design and hence, no data loss.

Infinity-after-2

Application Table was implemented with lazy loading hence, no data loss when filter applied. Minimal legends as well.

Infinity-after-3

Better filter design for efficient user flow.

Infinity-after-4

Off-Canvas structured navigation and breadcrumbs for user to understand where they are at the moment and where they wanna be.

Infinity-after-5

Proper onboarding experience. Multiple clicks issue fixed. Input does look like Files and text fields as they should.

Infinity-after-6

Results on Team Management and Delivery Operations Level

I instructed developers to make a code repository where every component is coded with their specifications as well as with their states of interactions such as default, hover, inactive, selected etc. This code repository also had validations regarding input fields. Also, instances where the platform has to interact with user via messages of success, failure, warning etc were also coded.

Now any developer can just go to this repository and copy the required elements resulting in smooth delivery.

Results Summary

Presence of a design system made sure that the Design is consistent across the platform. It also ensured broken user flows are fixed and all the elements and platform as a whole is interacting with user seamlessly. This Design system also made sure nothing is disrupted even if I choose to exit this company.

The presence of code repository will make sure that even if a developer choose to exit the company and new developer joins the team, he/she is not running to different resource for training, neither any other resource is wasting time to train the new resource, ensuring timely delivery.

In this way, I solved the problem of entire cloud team not only on the level of Product Design but also on the level of Management and Operations, displaying excellent Design, Project/Team Management and Leadership skills.

So, what are you waiting for ?
Let's get connected & Hire me Now !
I am a contact dice

Call, Text or WhatsApp me on +91 - 9163310282

Take a look at my Behance Portfolio

Visit my LinkedIN Profile

See my Dribbble Shots

Find me on