Transforming processes: Concrete examples of Design Systems at work

The previous post highlighted how Design Systems can improve operational efficiency through standardisation, automation and collaboration.

This follow-up blog post focuses on practical examples from our experience to show how Design Systems can deliver significant benefits across multiple operational areas. Through direct testimonials from Tangiblers, we will see how these systems have improved workflow, facilitated design and accelerated development.

Improving the workflow: The Coop Alleanza 3.0 example

Coop Alleanza 3.0 manages many simultaneous projects that require constant updates and modifications. In this context, a well-structured Design System is essential to speed up processes and ensure visual and functional continuity.

Thanks to the Design System developed for Coop Alleanza 3.0, we can reuse existing components without having to redesign them each time. This not only ensures a consistent visual representation close to the final site graphics. It also facilitates precise and timely feedback from the client. By reusing pre-tested and validated components, we can design pages that respect the client's accessibility and tone of voice, reducing unnecessary duplicate work and improving overall efficiency.

Another benefit during the design phase is the ability to accurately predict space and layout on the page, ensuring that important content follows a visual hierarchy and rhythm.

Finally, the Design System serves as a central reference point for the entire team, including external suppliers involved in software development. It allows us to "speak the same language", based on the same rules and components. This further improves the efficiency of rework or new designs.

Making work easier: The impact of the UI kit

Another practical example of how the presence of a Design System facilitates project delivery comes from another recent experience.

The client for whom we carried out the project had a Design System that had previously been built. During the initial kick-off phase, we reviewed the design conventions that were in place for all past and future projects.
These rules, known as Foundations, define typefaces and typographic scales, palettes, spacing and grids, shadows, icon systems and other guidelines. These guidelines, which we incorporated and expanded upon, provided a clear guide to how to proceed and what decisions to make when creating new components throughout the project.

In addition to the foundations, the Design System was already populated with pre-existing components such as headers, cards, footers, input fields, buttons and many other elements used to create interfaces for other products in the same brand. The presence of pre-existing components indicates the existence of a well-defined visual style that was followed in the creation of the initial components and dictates the visual consistency pursued in the creation of new projects.

The design process became more efficient and collaborative through the ability to reuse and adapt existing components. Designers were able to work on different parts of the project at different times, relying on the consistent guidance of the Design System. This reduced the need for ongoing stylistic analysis.

Development acceleration: The Bologna Airport experience

The Bologna Airport (AdB) website is a constantly evolving organism with a dual soul: informative and service-oriented. The site is managed by a multi-company team, which makes the use of a common glossary and structured references essential, especially since AdB stakeholders directly manage the CMS to ensure up-to-date content.

Whenever there is a request for a change or integration, we always start with the Design System. This catalogue of components allows us to build new parts of the site or update existing ones using consistent objects. The Design System not only facilitates internal communication but also becomes a shared working tool. It ensures a good level of autonomy for the Product Owner and his colleagues.

It is very satisfying to be able to meet the needs of AdB's internal stakeholders. We can simply indicate which component should be used for a specific need, without having to intervene in the development.

Marianna Cerato - Project Manager

Nei casi di nuove funzionalità o variazioni impattanti, utilizziamo il Design System per realizzare wireframe e valutare con attenzione l'introduzione di varianti ai componenti. Il Design System inoltre ci aiuta a testare gli impatti delle modifiche prima di rilasciarle, riducendo il rischio di regressioni e garantendo la coerenza funzionale e visiva.

For new functionality or major changes, we use the Design System to create wireframes and carefully evaluate the introduction of component variants. The Design System also helps us to test the impact of changes before they are released. This reduces the risk of regression and ensures functional and visual consistency.

The aspects of responsibility in careful component selection, functional and visual consistency, continuous improvement and asset maintenance are particularly important to AdB. In addition, long before accessibility became a mainstream issue, AdB and its Design System had to comply with WCAG and a number of ENAC regulations to ensure proper support for passengers with reduced mobility or special needs departing from Bologna Airport.

We have seen how Design Systems can transform the day-to-day operations of various organisations, improving workflow, facilitating design and accelerating development. The first-hand testimonies of the Tangiblers clearly show how a well-structured Design System can make a difference in both efficiency and product quality.

In future articles, we will continue to explore the world of Design Systems, the challenges and opportunities they present, and how artificial intelligence could further transform these essential tools.