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.
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?
The UX and UI team mapped one by one components over 100 items (kickstart guides, foundations, components) to check their health status.
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.
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.
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.
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.
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.