Giuffrè Francis Lefebvre creates multi-device and multi-platform web applications in the legal field. An Italian case of digital transformation. I collaborated in particular with the IT team of the CliensPiù management software.
The Challenge
CliensPiù is just one of Giuffrè's software: the existence of many products, many developed internally or by other partners, led to having inconsistent and therefore unusable software. From a draft front-end framework, called "Instrumenti", the goal was to iteratively evolve it towards a design system, with a definition of guidelines identifying the essence of what good team design means and shared practices on how to use it.
Design principles
Through the product vision, we thought - within a workshop - the design principles that characterize the CliensPiù product.
Those have been the guide for the definition of the first design patterns, reusable and repeatable blocks of the interface.
Design pattern
Together with the Giuffrè team, on another day of workshop, we analyzed the structure of the contents. We defined the key behaviors and actions and named them in a shared way, according to the domain and purpose of the product defined with the principles.
The results were then formalized within a first version of a CliensPiù’s design system.
Those have been the guide for the definition of the first design patterns, reusable and repeatable blocks of the interface.
The results were then formalized within a shared document, in particular as regards the list and table elements, or the components most present in CliensPiù. Furthermore, work has been done on a clear definition of the textual styles of the UI: label, call-to-action, titles, and text bodies. The results were then formalized within a shared document, in particular as regards the list and table elements, or the components most present in CliensPiù. Furthermore, work has been done on a clear definition of the textual styles of the UI: label, call-to-action, titles, and text bodies.
The outcomes
From here, thanks to short iterative cycles, we continued to integrate the parts of the application not yet fully analyzed. By making an heuristic analysis, we identified issues and opportunities compatible with the design system activities. One of these was the need to have a new color palette that extended the current one and made the information more understandable and consistent.
The analysis revealed the need to make interaction and navigation elements, such as buttons, intuitive and accessible, to distinguish them from other interface elements such as tags and labels.
