Gencat eSocials DS
Creating an accessible Design System for a Government
Client & industry
Generalitat of Catalonia
Year
2023
Extract
Standardize and improve the design of the Social Rights department to unify their digital projects catalogue







Project details
Sale, design, and development of an accessible Design System for the Public Sector
Specifically for the Social Rights Department of the Generalitat of Catalonia. The first step was to explain to the client the need for a design system to build applications and websites for the department, as the experience was completely fragmented. Each supplier collaborating with GenCat had a different design approach. Thus, we managed to sell a small design system that would serve as the cornerstone for designing social digital products for Catalonia, projects such as appointment management services, requests for social economic aid, management of waiting lists for residential homes, volunteering campaigns, etc.
Workshops with the client and audit of the existing corporate identity
The first thing we did was an audit of all the designs that were being used up to that date. There was no consistent visual identity, so I took screenshots and audited the different interface components that existed to understand which UI components were most commonly used and to name them correctly. This allowed us to work in a more atomic manner. We held alignment meetings with the client to establish objectives and an implementation strategy where we set priorities and different milestones and releases to publish updates and versions of this design system to various stakeholders and suppliers.
Cornerstone of the Social Rights projects
Thanks to this design system for this specific department, the client (GenCat) realized the necessity and value it added. This DS led to the creation of a new transversal design system common to all departments of the Generalitat of Catalonia. Finally, the team developed a website with all the necessary documentation to create digital products. The website included guidelines such as file installation, foundations with typography, color palette, iconography, spacing system and breakpoints, components with usage guidelines, best and worst practices, variants, typologies, and reusable code.
