DESY, el primer sistema de diseño en abierto de una comunidad autónoma en España

Desde 2021, el Gobierno de Aragón tiene su propio sistema de diseño que sirve al equipo de SDA para diseñar servicios digitales consistentes y con una buena usabilidad. Se llama DESY, el acrónimo de Design System o sistema de diseño en inglés, y está disponible en abierto para que cualquier persona que desarrolle interfaces digitales, dentro o fuera de la comunidad autónoma de Aragón, lo utilice.La existencia de este sistema de diseño con vocación de convertirse en un estándar para toda la administración hace que muchas aplicaciones que se están creando o renovando, como el Gestor deExpedientes que usa el personal público o la Cita Previa que utiliza la ciudadanía, estén emparentados visualmente… y también en la manera en la que interactuamos con sus pantallas.

Tener un sistema de diseño nos ayuda a reutilizar recursos, aprender de la investigación previa realizada en materia de usabilidad y accesibilidad, y evita tener que repetir trabajo que ya se ha hecho. Todavía más importante, un sistema de diseño hace que la experiencia de las personas usuarias, tanto el personal público como la ciudadanía, aprendan a usar nuevas herramientas de manera mucho más rápida.

Un sistema de diseño facilita que las personas usuarias tengan una experiencia más fluida al usar las diferentes aplicaciones que utilizan al hacer trámites con la administración (en el caso de la ciudadanía) o al utilizar diferentes herramientas de gestión en su trabajo diario (como ocurre con el personal).

El desarrollo de DESY comenzó en 2020 y desde entonces se ha implantado ya en numerosas herramientas como el Gestor de expedientes, CARD, el entorno de preproducción del catálogo de servicios y procedimientos (SEDA) y otras que se están desarrollando en la actualidad.

Al diseñar todas estas herramientas utilizando un mismo sistema de diseño no solamente se busca que estas compartan un 'look&feel' o carácter visual: lo principal es que se mantenga una consistencia en cuanto a cómo reacciona la interfaz a las acciones de las personas usuarias.

¿Qué es un sistema de diseño?

Visto desde fuera, con sus componentes individuales, un sistema de diseño podría parecer una colección, un repositorio o archivo con diferentes estilos (colores, tipografías) y componentes o piezas con las que se construyen las interfaces (una web, una pantalla en una aplicación).

Pero hablamos de “sistema de diseño”, y no de “biblioteca de componentes”, porque los elementos que lo componen están interrelacionados, y se comportan de diferentes maneras según se sitúen en relación a otros elementos. Por eso, al explicar qué es un sistema de diseño se suele hacer el símil con la gramática y la sintaxis, ya que se trata de desarrollar el orden y combinación de los elementos, y sus funciones en un contexto específico.

DESY es el primer sistema de diseño en Aragón y posiblemente el primero de este calado para una administración pública en España. El design system de Gov.uk es la referencia más reconocida, y otras administraciones en el mundo han seguido sus pasos para lograr una herramienta que pueda ser utilizada a través de todas las aplicaciones, herramientas e interfaces digitales de una administración (el Ayuntamiento de Oslo, el gobierno canadiense, o la agencia de transformación digital italiana). En España, otras administraciones tienen manuales y guías de recomendación para construir webs, como en la Generalitat de Catalunya o sistemas publicados en formato PDF, como el de la Junta de Andalucía, pero no conocemos otro sistema publicado en abierto y que permita construir interfaces de todo tipo.

Contar con un sistema de diseño significa contar con un marco único de trabajo para los equipos de diseño y desarrollo. En el Gobierno de Aragón trabajan múltiples equipos de diseño y desarrollo, internos y externos, y DESY ordena y acota las diferentes visiones de diseño que se puedan tener dentro de equipos heterogéneos con el fin de conseguir una experiencia de uso consistente.

Se define tanto a nivel visual como de código los componentes y elementos para construir interfaces. Colores, fuentes, componentes, patrones, lenguaje, navegación, animaciones... cualquier elemento que sea necesario para desarrollar interfaces digitales. Entre otras cosas, se caracteriza por su limitación de las opciones de diseño, lo que simplifica la toma de decisiones y obliga a centrarse en la lógica de la herramienta o proceso que estamos construyendo o diseñando.

¿Por qué construir y utilizar un sistema de diseño?

Hay muchas razones para tener un sistema de diseño, y vamos a explicar algunas:

Un sistema de diseño que pone a las personas en el centro

DESY es un sistema pensado para hacer la vida más fácil a las personas usuarias. Cuando una administración usa el mismo sistema visual y de interacción a lo largo de todas las interfaces digitales con las que interactúan los usuarios, es fácil que estos recuerden o identifiquen patrones. Por ejemplo, qué es un botón, cómo se ve cuando está activo o inactivo, o cómo se muestra un error o una información que no está completa. Así, los usuarios pueden trasladar la experiencia que han tenido en otro servicio al que están usando en la actualidad. Esto evita que tengan que aprender cada vez las “reglas” de este sistema: ya estén tramitando una cita previa o el pago de un tributo, la interfaz digital va a compartir patrones de uso y eso hace que la experiencia sea más amable y fluida.

DESY ha dedicado esfuerzo en que los componentes sean accesibles, lo que implica la selección de colores, el diseño de los elementos de navegación y otros que permitan acceder desde pantallas pequeñas o con lectores de pantalla. Es un proceso en continua evolución donde aún queda mucho por hacer, pero estamos en la línea adecuada: nuestros componentes son revisados por Olga Carreras, nuestra consultora externa de accesibilidad para cumplir con el estándar AA (Web Content Accessibility Guidelines (WCAG) 2. Poniendo a disposición de los equipos de desarrollo este sistema de diseño, hacemos más fácil que las aplicaciones internas también cumplan con ese estándar.

Optimizando los recursos limitados bajo la premisa del ‘Menos, y mejor’

En el Gobierno de Aragón, y especialmente desde SDA, desarrollamos cada año nuevas herramientas y mejoramos continuamente el funcionamiento de las ya existentes. Gracias a DESY hemos conseguido concentrar los esfuerzos de diseño de interfaz en una sola herramienta que sirve para todos. Siguiendo nuestro principio de ‘Menos, y mejor’, nos esforzamos por crear una solución que sirva en cientos de situaciones, en lugar de cientos de soluciones, una para cada necesidad. Es por eso que DESY incorpora nuevos elementos a su biblioteca, pero siempre valorando que esos elementos son necesarios y no duplican los ya existentes, para evitar que este sistema crezca en exceso.

Un sistema de diseño publicado en abierto, con vocación de servicio

DESY surge en SDA, a partir de nuestra necesidad de tener un sistema que respondiera a las necesidades de diseño de los equipos. Pero siguiendo nuestra vocación de dar servicios a toda la administración pública, hemos creado una herramienta abierta, de libre uso y descarga, que puede utilizarse por el Gobierno de Aragón, pero también ser utilizada por otras administraciones y organismos para construir sus propias herramientas digitales. Conforme DESY se ha ido “haciendo mayor”, este crecimiento ha beneficiado al Gobierno de Aragón pero también a todos aquellos equipos que decidan usarlo ahora o en el futuro.

Una forma diferente de hacer las cosas para ser inspiración

Desde SDA aspiramos a que esta manera de hacer las cosas (trabajar en abierto, publicando recursos y dando apoyo a otros equipos) sea nuestro estándar. Sentimos orgullo de tener el primer sistema de diseño publicado en abierto de una administración autonómica en España y esperamos seguir viéndolo crecer en numerosas herramientas y aplicaciones.

Si quieres saber más sobre DESY o te gustaría aportar información o feedback sobre su uso, puedes escribirnos a sda@aragon.es. Si trabajas para una administración pública y estás pensando en usar DESY o estás desarrollando un sistema de diseño propio, nos encantaría saber más.