.italia design system | Marco Maria Pedrazzo

A gif animation showing UI element styling, moving across an abstract background. Fancy stuff for regularly-sighted people who, for reasons I don't understand, likes useless imagery.

How can 22.000 public administrations deliver coherent, quality digital services?

With an amazing team, we built the Italian government design system. We assessed the status quo to cherry-pick the best of existing UI and open source front-end code libraries. We extensively tested for accessibility, delivering a bootstrap fork with better A11y then the global-community solution. We built a whole new home for it, investing a lot in documenting every aspects of its usage. We made it simple for the community to contribute to it. Almost 3.000 public administrations are already using it, projected to be 18.000 in 2 years.

Problem statement

The italian government is made of more than 22.000 autonomous public administrations. Each of them should deliver digital services to citizens. For the citizen, the government is one: she expects consistency across all the channels and entities.

Autonomy without coordinations leads to a frangmented citizen experience.

Researching the root cause

A series of design (Sketch) and code (Bootstrap Italia, centrally maintained, and React Italia, community driven) libraries with different layers of maturities. On top of it, some of the components were not fully tested for accessibility, key requirement for public service.

The misalignment creates doubt in the community of suppliers that implements those digital services – Will these libraries last? Will they be maintained? Shall we build our own tools?

A conveyor-belt machinery that turn design into code. Fancy right? — Bootstrap Italia code – cc-by Designers Italia

The UX and UI team mapped one by one components over 100 items (kickstart guides, foundations, components) to check their health status.

The spreadsheet we used to establish a baseline of every element (foundation or component) across the different libraries and the different tests, including a11y. — The excel file we used to check the health of everything related to design public interfaces

In parallel, with the help of a service designer, we run quantitative and qualitative research with the goal to understand how our community builds front-end, what are their hopes&fears, which feature would make them desire to use this design system.

180 respondents to the survey from the community;
14 interviews in between developers, interaction designers, front-end engineers, directors and project managers of both supplier and public ICT companies.

Some screen of the stakeholders interview report, illustrating who they are on a radar-map and which tools/technology are they using. — Some of the maps used to summarize the stakeholder interviews.

At this point, the insights where clear:

not having a public roadmap (and showing some public “love”…) of the libraries and the repos in the 2 years prior this project was interpreted as unreliability
the misalignment between the libraries was such that no single library could be used as a unique source of truth, not even the UI library which was left
in addition to this, what was then a standard (Sketch) became a far less used tool by the community in favor of Figma.

Design & prototype

The team worked on multiple fronts.

On the UI library was converted to Figma to match the users expectation, while making sure an automated system could backup to open-source files (mandatory in egov projects) every time the repo was updated.

Fancy gif with elements of the UI kit moving around. — CC-BY Designers Italia

In the process of update of the community website (designers.italia.it) the design system UX real estate was taken into account

By benchmarking we tested and implemented directly on the website the structure of the design system documentation, and started tackling one-by-one foundations and components technical writing.

Fancy gif with elements of the documentation moving around.

Validate & iterate

Based on this:

a first round of user testing was done with designers and project managers from public entities, identifying experience gaps;
within the process of the website update, a feedback function was created to ensure less technical personnel could still contribute;
based on users’ feedback, we published a first contribution model, with the possibility to open issues and pull request;
while bootstrap italia library was aligned, and tested for accessibility component by component. In particular, we took chance of a public event (Wired Next Fest) to stress-test both some webpages and the protocol, by testing with and by people with disabilities.

A user researcher and a blind developer user testing with a deaf person, assisted by a sign language interpreter.

Key results

3.000

public administrations are implementing coherent digital services, with one of the accessible by-default design system libraries

expected 18.000 (+100% / year for 3 years)

public administrations are in roadmap to use the design system within 2026, also thanks to recovery fund impulse to digital transformation.