2023 Design System Sector Público

De +20 apps fragmentadas a una experiencia unificada

Sistema de diseño para la Dirección General de Tráfico. Un marco contenedor, componentes accesibles y gobernanza para 3.200+ usuarios internos.

+20
Apps unificadas
3.2K
Usuarios
AA
WCAG 2.1
intra.dgt.es
App 1
App 2
App 3
01
El problema

Caos digital heredado

La DGT operaba con un ecosistema fragmentado: cada departamento había desarrollado sus herramientas de forma independiente durante años.

URLs dispersas

Los usuarios memorizaban decenas de direcciones diferentes para acceder a sus herramientas diarias.

Múltiples logins

Credenciales distintas para cada aplicación. Onboarding de nuevos empleados duraba semanas.

UX inconsistente

Cada app con su propia lógica. Los usuarios aprendían patrones que no servían en la siguiente.

Sin mantenimiento

8 de cada 10 aplicaciones llevaban años sin actualizaciones de diseño o accesibilidad.

Antes
App
App
App
App
App
App
App
App
Después
INTRA-DS
02
La solución

Marco contenedor + SSO

Un punto de entrada único que envuelve todas las aplicaciones con navegación por pestañas, autenticación centralizada y notificaciones unificadas.

01

Single Sign-On

Una autenticación para todo. El usuario entra una vez y accede a las +20 aplicaciones sin volver a loguearse.

02

Dashboard personalizado

Cada usuario ve solo las aplicaciones a las que tiene acceso según su rol y departamento.

03

Navegación por pestañas

Cambiar entre aplicaciones abiertas sin perder el contexto. Como un navegador, pero para herramientas internas.

04

Notificaciones centralizadas

Un único canal de alertas y comunicaciones que agrupa avisos de todas las aplicaciones.

Proceso de diseño

Discovery

Entrevistas con stakeholders y observación de usuarios reales navegando entre aplicaciones.

Wireframes

Concepto inicial basado en dashboard. Feedback: simplificar navegación.

Prototipo

Sistema de pestañas validado con usuarios. Testing de flujos principales.

Aprobación

Diseño final validado con todos los stakeholders. Handoff a desarrollo.

03
El sistema

Design System escalable

Componentes atómicos, tokens de diseño, patrones de interacción y documentación exhaustiva para que cualquier equipo pueda construir consistentemente.

Fundamentos

  • Paleta de color institucional
  • Tipografía con alta legibilidad
  • Sistema de espaciado 8px
  • Elevaciones y sombras

Componentes

  • Botones, inputs, selects
  • Tablas con ordenación
  • Modales y notificaciones
  • Navegación y breadcrumbs

Patrones

  • Flujos de formularios
  • Estados de carga
  • Manejo de errores
  • Feedback al usuario

Documentación

  • Guías de uso por componente
  • Especificaciones para dev
  • Ejemplos de código

Accesibilidad WCAG 2.1 AA

Cada componente testado, navegación por teclado y contraste mínimo 4.5:1. El sector público exige accesibilidad — la entregamos.

04
El resultado

Impacto medible

-40%
Tiempo cambiando entre apps
+35%
Satisfacción (NPS)
-60%
Tickets soporte UX
12
Apps ya migradas
-30%
Tiempo desarrollo features
"El nuevo sistema está mejorando la eficiencia y facilita a nuestros empleados la interacción con nuestras herramientas. Por fin, tenemos una experiencia coherente."
— Usuario DGT

Aprendizajes clave

01

Co-creación genera adopción

Involucrar a usuarios finales desde el inicio redujo resistencia al cambio.

02

Rollout gradual

Migrar app por app permitió detectar problemas temprano y ajustar.

03

Documentación es producto

En organizaciones grandes, la documentación es tan crítica como el diseño.

Rol actual

Auditorías y evolución continua

Hoy sigo vinculado al proyecto realizando auditorías de implementación, desarrollando componentes ad-hoc cuando surgen necesidades nuevas, y formando a equipos de desarrollo en el uso correcto del sistema.