Two different design systems were in use in a variety of touchpoints, one in use on a sales tool by the employees of our client, and a second one in use on their consumer applications. Our client requested the migration of the design system of the sales platform into the commercial one.

Brief

Our client had assigned vertical design teams for each touchpoint they developed at different times. A first design system (DS) had been produced (in Sketch) for their salesforce platform. 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 DS as well, the one in use on the consumer applications, such as to unify the design and development efforts.

Team

I was the only designer assigned to this task. I had continuous interactions with the designers and business analysts in charge of both the platform I was trying to map and bridge.

Process

Sales team Design System

The first DS created was clearly designed to become the system for all applications, both consumer and for the employees: to cover all touchpoints. The components used have a very friendly look and feel, even playful, and use wide and comfortable spacing between elements, even if this would typically not allow much information to be displayed on a single screen. This DS privileges readability over quantity of information given. Responsiveness was developed mainly for large screens, and only down to a tablet viewport size, already presenting problems in smaller tablet displays.

Consumer Design System

Like the first DS, the second design system was produced with a purely consumer-facing interaction in mind, as demonstrated by similar 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. Unlike the previous DS, however, this system is also fully responsive from mobile screens to large desktop viewports.

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, atoms and molecules all the way to the most complex organisms and layouts. But also, understand and compare the general philosophy of design and user experience for both design systems.

Fill in the gap

At this point it was possible to establish how all the initial 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 design system to which we were migrating, 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 solution to be implemented.

Takeaway and future development

But a more important problem was posed by the user these design systems were aimed at. As previously explained, none of the DS’s that I analyzed took into consideration employees as their target personas, both creating very good looking but also very simple and spacious interactions, following the UX mantra of don’t make-me-think. A simple example of this are the table components.

This did not adapt well to the needs of the employees, who use the same interface day-in and day-out, and very much prefer having more information on screen, more complex tools and interactions available, if that will offer the possibility to work faster, even at the expense of a small learning curve. As a persona, the employee had user needs that were simply unmet by any of the design systems, that were not simply a matter of changing proportions or making a few new components, but a fundamental philosophy of the system which begged the question if it was not perhaps better to have two separate design systems after all, just not these two.