Due to the development, at different times, of two different design systems for different touchpoints, our client requested that the design system in use on their sales tool be substituted by the design system in use on their consumer applications.

Brief

Our client had assigned vertical design teams for each touchpoint they developed at different times. A first design system had been produced (in Sketch) for their salesforce platform, created to be used by the employees to sell products to the final consumer. Some time later, a second, different design team was put in charge of developing consumer applications, and this resulted in a different, second design system (created in Figma) for all these touchpoints. The client’s request was to migrate the first platform to the second design system as well, the one in use on the consumer applications, such as to unify the design and development efforts.

Salesforce Design System

The first design system to be produced clearly intended becoming the system to be used for all consumer applications–to cover all touchpoints. The graphic patterns used are friendly and even playful, and uses wide and comfortable spacing between elements, even if this would typically not allow much information to be displayed on a single screen, privileging readability over quantity of information given. This design system was only meant to be responsive down to the tablet viewport size, and therefore some layouts produced would present problems in smaller tablet displays.

Consumer Design System

The second design system was produced with a purely consumer-facing interaction in mind, as demonstrated by elements that allow very simple interactions and do not foresee high amounts of information on display at any given screen, resulting in layouts with more straight-forward paths. This UI is also fully responsive from mobile screens to desktop, although subsets of the system were later created for specific contexts.

Delta

I proceeded to map all elements of the two design systems in order to establish their equivalences, find the design elements that were missing in the design system that we were migrating to, and understand how corresponding elements were not identical in function and how their differences affected both the interaction, the aesthetic homogeneity of the layout and the brand experience.

Understanding the delta required me to analyse and understand each DS from the ground up, starting with the grid and the typography, all the way the most complex organisms establish as part of the DS.

Fill in the GAP

At this point it was possible to establish how all the old elements would be substituted and , more importantly, what elements could not be substituted for lack of an equivalent in the design system we were migrating to, requiring new design elements to be created in order to keep, and sometimes even, improve all of the interactions of our platform.

Impact on the target Design System

Through the analysis of the components of the target design system, the opportunity arose for a critique of its structure and elements.

One simple example of this was the use of the base lines for the text inputs, which were designed to go slightly beyond the containing grid. This simple style choice proved problematic when set in the context of extensive forms with dozens of inputs organised in columns, which, in conjunction with the tight grid, created a busy visual effects and made the lines seem almost contiguous.

In this way, the design system we were leaving behind offered alternative functional and interface solutions for the same interaction needs, resulting in improvements to the definitive