We have been working for several years with the IT business unit of Giuffrè Francis Lefebvre for the creation of multi-device and multi-platform web applications in the legal field. The software has become a key asset of the company, flanking the editorial one for which the company is known nationwide. The development of this software goes hand in hand with the evolution of the telematic process, which came into use in 2014, allowing Italian lawyers and chancelleries to work in a totally digital way. An Italian case of digital transformation.
The ever-changing legal constraints inherent in the domain require us to be highly agile in our project management.
Giuffrè has received these contributions very positively. The weekly iteration meetings to check the work done in the previous week and establish which user stories to develop, the incremental and iterative release of the functionalities to the end users, the tests with the users to check the interaction with the functionalities, the analysis of the results through the metrics. All this created a strong synergy, helping to achieve the objectives in the required time and manner, positive results at business level, allowing users – law firms – to face major changes with confidence.
The Cliens management system is very articulated and requires desktop installation: to allow its use also on the move, we have created Cliens web, a multidevice application, so that the interface adapts to the various contexts of use (web, tablet and smartphone) and multiplatform, usable from iOS, Android and Windows devices.
Over the years – following our incremental approach – the product has become more and more complete.
CliensPiù is an autonomous cloud product (no longer needing to rely on its desktop “predecessor”).
The choices regarding the user experience are based on quantitative and qualitative data: in particular, through analytics we have implemented usage metrics that we check regularly; this analysis is accompanied by user tests to see how they use and interact with the functions available to them. For example, tests have shown that users are accustomed and ‘attached’ to the way the client software interacts: the new web interface takes this into account, so we are careful to make gradual transitions in the layout and use of the functions.
CliensPiù is only one of Giuffrè’s software offerings for law firms: other products, such as Cliens Access Point, are developed in-house or by other Giuffrè Francis Lefebvre partners. In the recent past, this led to inconsistent software that was difficult to use. As responsible for the frontend and user interface, we developed a framework consisting of interface, layout and style components (icons, typography). The elements are a small number (about 20 plus a set of about 600 icons), so they are easy to maintain, but can be combined according to constraints. In this way one can obtain practically infinite interface possibilities. The framework is written in scss and is documented. This approach guarantees consistency and robustness, and allows each team to maintain its own habits and work independently. Moreover, it can be used on different levels: compiled as a standalone CSS to avoid complicating the build process or imported via scss, so that the style variables can be adapted to the context.
The framework, called ‘Instrumenti’, was subsequently evolved into a design system, thanks to the definition of guidelines that identify the essence of what good design means for the team and shared practices on how to use it.
Through the product vision, the design principles of the CliensPiù product were discussed in a workshop. These were the guide for the definition of the first design patterns, i.e. reusable and repeatable blocks of the interface.
Together with the Giuffrè team, in a second day of workshops, we analysed the application using tools such as the degree of specificity and the content structure. The definition of the key behaviours and actions contained in these allowed us to clusterize widespread patterns and name them in a shared way, according to the domain and purpose of the product defined in the previous activity.
The results were then formalised in a shared document, in particular with regard to list and table elements, which are the most common components in CliensPiù. In addition, a clear definition of the textual styles of the UI was worked on: labels, call-to-actions, headings and text bodies.
From here, short iterative cycles continued to integrate those parts of the application not yet analysed in depth. By carrying out an heuristics analysis, which examined the screens most frequently used by users, problems and opportunities for evolution compatible with the activities of defining the design system were identified. One of these was the need for a new colour palette to extend the current one and make the information more comprehensible and consistent. In addition, the analysis revealed the need to make interaction and navigation elements, such as buttons, intuitive and accessible, in order to distinguish them from other interface elements such as tags and labels.
This was a first draft of the most widely shared and diffused patterns, but the activity of formalising and evolving a design system is by definition never finished: as Alla Kholmatova says, this type of activity is “like gardening”: the more care is taken, the better the results and the higher the quality.
Evolving by doing Continuous Delivery
The project is constantly evolving: at the moment we are implementing all the necessary mechanisms to support the “continuous delivery” needed for Giuffré’s strategy on the CliensPiù product, which requires a fast evolution in the coming months in terms of supported functionalities.
In order to guarantee more stability to the project, we decided to start porting the application from AngularJS to a Frameworkless project based on ES6 and custom-elements. In order not to compromise the need for continuous evolution that the project requires, we applied the StranglerApplication pattern.
This pattern allows us to inject a new application into an existing one and make it grow over time, so as to completely replace the original. In our case the Frameworkless application “strangled” the old AngularJS 1.2 application. In this way we were able to improve the quality of our code without having to give up the speed necessary to adapt the software to the needs of the users.