TRAMA
Diseño de interfaz para la plataforma de tramitación de asuntos personales de empleados del Gobierno de España. Una herramienta que simplifica y centraliza la gestión de trámites administrativos en un único portal.
Contexto
Una plataforma centralizada para tramitación administrativa
El Gobierno de España necesitaba una solución integrada para que sus empleados pudieran gestionar trámites personales de forma simple, rápida y segura. Hasta el momento, estos procesos eran dispersos, requiriendo acceso a múltiples sistemas y documentación manual.
TRAMA surgió como respuesta: una plataforma centralizada donde los empleados pueden:
- Solicitar permisos, licencias y otros trámites administrativos
- Seguir el estado de sus solicitudes en tiempo real
- Acceder a documentación y formularios desde un único portal
- Recibir notificaciones sobre cambios en sus trámites
- Contactar con recursos humanos de forma integrada
El diseño de interfaz debía ser intuitivo, accesible y estar alineado con los estándares de usabilidad del sector público español.
El desafío
Simplicidad en un sistema complejo
La plataforma TRAMA debía gestionar múltiples tipos de trámites administrativos, cada uno con sus propios flujos y requisitos. El reto principal era crear una interfaz unificada que fuera fácil de usar incluso para empleados sin experiencia técnica.
- Múltiples flujos de trámites con lógica diferente
- Información compleja que requería presentación clara
- Audiencia heterogénea (edad, experiencia técnica, ubicación)
- Requisitos de accesibilidad WCAG AA obligatorios
- Integración con sistemas legacy del Gobierno
No era suficiente un diseño bonito; necesitábamos que funcionara para todos, en cualquier dispositivo, y que guiara paso a paso a los usuarios a través de procesos administrativos complejos.
Objetivos
Diseñar una experiencia inclusiva y accesible
- Interfaz intuitiva: usuarios deben completar trámites sin necesidad de training
- Accesibilidad WCAG AA: funcional para personas con discapacidades visuales, motrices y cognitivas
- Responsive design: mismo experience en desktop, tablet y móvil
- Feedback claro: usuarios siempre saben en qué paso están y qué hacer
- Confianza: diseño que transmita seguridad en un portal gubernamental
- Eficiencia: reducir el tiempo necesario para completar trámites
Solución
Arquitectura de interfaz basada en DINTEL
TRAMA fue diseñada siguiendo DINTEL, el Design System oficial de la Administración Pública de España. Este sistema define los estándares visuales y de usabilidad para todos los servicios digitales públicos, garantizando coherencia y accesibilidad en todo el ecosistema gubernamental.
Adoptando DINTEL, TRAMA hereda:
- Foundations: Paleta de colores accesible, tipografía Clara (Arial), espaciados y grid system
- Componentes reutilizables: Botones, inputs, cards, modales, notificaciones documentadas
- Patrones de comportamiento: Estados, validaciones, feedback visual basado en estándares públicos
- Accesibilidad garantizada: WCAG AA nativo en todos los componentes
- Documentación clara: Guías de uso, principios de diseño, criterios de adopción
Estructura de navegación clara
La plataforma se organiza en tres áreas principales:
- Home: resumen de trámites activos, acceso rápido, notificaciones
- Mis Trámites: lista completa con filtros y seguimiento
- Nuevo Trámite: wizard step-by-step para iniciar solicitudes
Componentes DINTEL adaptados para TRAMA
Los componentes de DINTEL se adaptaron y extendieron para los flujos específicos de tramitación:
- Cards de estado: Componente DINTEL personalizado para trámites (pendiente, en progreso, completado)
- Formularios accesibles: Inputs, selects y checkboxes DINTEL con validación en tiempo real
- Stepper / Wizard: Componente para guiar el flujo de nueva incidencia paso a paso
- Timeline: Historial de cambios con componentes de badge y texto DINTEL
- Notificaciones: Alerts y toasts siguiendo el sistema DINTEL, nunca invasivas
- Iconografía: Conjunto de iconos DINTEL para acciones y estados
«En sector público, la accesibilidad no es un requisito legal, es un derecho. El diseño debe servir a todos, no a la mayoría. Una interfaz accesible es una interfaz mejor para todos.»
¿Necesitas diseñar una plataforma accesible?
Hablemos sobre cómo hacer interfaces que funcionen para todos.