Transformación digital de un sistema legacy a una experiencia web escalable. Optimización de captura biométrica, gestión de identidades y digitalización de flujos burocráticos para el DTOP.
Al unirme al proyecto en febrero de 2024, el DTOP enfrentaba un reto crítico: modernizar su ecosistema digital "DAVID".
El sistema heredado dependía de procesos manuales, formularios en papel y una interfaz obsoleta que ralentizaba la atención en los centros CESCO y DISCO. Como Product Designer Ssr, mi misión no fue solo estética. Tuve que sumergirme en reglas de negocio gubernamentales complejas (Ley 22, Real ID) para diseñar soluciones que redujeran el error humano y digitalizaran trámites físicos por completo.
El Departamento de Transportación y Obras Públicas (DTOP) operaba con sistemas desconectados y procesos dependientes del papel. Esto generaba inconsistencias en la data, largas filas en los CESCO y una alta tasa de errores humanos en la carga de documentos legales y biométricos.
Como Product Designer Ssr, lideré el diseño end-to-end de módulos críticos (Captura, Identidades, Pagos).
Colaboré diariamente con analistas y desarrolladores para definir reglas de negocio, realizar QA visual y asegurar la implementación de un Design System coherente.
Reducción de Carga Cognitiva: Apliqué limpieza visual y divulgación progresiva para evitar la saturación del operador.
Consistencia Sistémica: Creación de patrones de interacción repetibles que aceleran la adopción de nuevos módulos.
Confort Visual: Modernización de tipografía y contraste previniendo la fatiga en jornadas de uso intensivo.
Rediseñé la experiencia de ingesta de documentos (fotos, firmas, identificaciones). Pasamos de un input básico a un pre-visualizador avanzado que permite al operador auditar la calidad de la imagen (zoom, rotación) antes de guardarla.
El Problema
La captura de documentos era un punto de dolor masivo. Los operadores subían imágenes mal encuadradas o ilegibles, lo que rechazaba trámites posteriores. Además, el sistema no daba feedback al momento de la carga.
La Solución
Un entorno de trabajo similar a herramientas de ediciónPara reducir la curva de aprendizaje, realicé un benchmarking de herramientas de gestión documental estándar (como Adobe Acrobat). Identifiqué que los usuarios necesitaban control total sobre el archivo antes de enviarlo.
Implementé un flujo de feedback visual donde el sistema sugiere automáticamente el "Tipo de Documento" escaneado, reduciendo la clasificación manual errónea.
Basado en patrones de herramientas líderes como Adobe Acrobat para reducir la curva de aprendizaje.
El módulo “core” del ecosistema DAVID. Unifiqué la visualización de datos críticos dispersos para crear una "Ficha Única del Ciudadano", reduciendo los tiempos de consulta en ventanilla.
El Reto: Organizar cientos de atributos sin scrolleos eternos. La Solución: Implementé una navegación por pestañas semánticas (Identidad, Real ID, Estatus Migratorio, Documentos DHS) que permite al operador saltar entre contextos legales y personales con un solo clic.
El Reto: Localizar expedientes con datos parciales.
La Solución: Rediseñé el flujo de consulta para soportar criterios de búsqueda combinados.
Identificadores Críticos: Prioricé la búsqueda por datos duros (SSID, Licencia) para resultados exactos.
UX de Formulario: Agrupación lógica de campos y selectores de fecha optimizados para reducir la carga cognitiva del operador."
Transformé un proceso burocrático manual (formularios de papel con múltiples firmas físicas) en un workflow digital transparente.
Arquitectura de Roles y Trazabilidad
Diseñé un sistema de gestión de tickets digital que respeta la jerarquía gubernamental, pero elimina el papel:
Niveles de Aprobación: Mapeé y diseñé flujos condicionales. Para CESCO, la solicitud viaja por 4 niveles (Supervisor > Director > Ejecutivo > Técnico). Para Agencias, simplificamos a 3 niveles.
Auditoría: Cada acción deja una huella digital (timestamp y usuario), garantizando transparencia total en la asignación de permisos.
Diseñé flujos diferenciados para CESCO (4 niveles: Supervisor > Director > Ejecutivo > Técnico) y Agencias (3 niveles).
Dashboard de gestión de estados y roles, permitiendo auditoría completa de quién aprobó qué y cuándo.
Este módulo fue un desafío personal: lo diseñé de principio a fin, colaborando directamente con 2 desarrolladores y 1 analista. El objetivo era permitir que los ciudadanos se acogieran a planes de pago de multas de forma 100% digital.
Insight Clave
Detecté que los operadores y usuarios se confundían al mezclar deudas, debido a la falta de distinción visual clara entre los gravámenes atados a la tablilla del vehículo y las infracciones personales de la licencia.
Decisión de Diseño
Separé visual y lógicamente las deudas en dos grandes categorías: Vehículos (multas de auto) y Licencia (multas personales), para mitigar el riesgo de selección errónea y asegurar que los planes de pago se constituyan sobre los conceptos correctos.
El Flujo
Viajé a Puerto Rico para realizar observación directa (Shadowing) con operadores en las oficinas de DISCO. Los insights recolectados permitieron ajustar la visualización de las tablas de multas (separando Vehículos de Licencias) para evitar errores de cobro.
Flujo completo desde la validación de identidad (SSN + Email), aceptación de términos, hasta la configuración de débito automático.
Para el módulo administrativo (Usuarios, Configuración, Estadísticas), definí un patrón de diseño repetible para acelerar el desarrollo y mantener consistencia.
Creé una plantilla maestra aplicada a todas las sub-secciones: 1. Dashboard General -> 2. Crear -> 3. Editar -> 4. Solo Lectura.
Apliqué este sistema a gestión de usuarios, terminales, impresoras y auditoría.
Construí una librería de componentes en Figma para asegurar consistencia entre los módulos desarrollados por distintos equipos.
Definición de colores, tipografía accesible y espaciados (8pt grid).
Inputs con validación en tiempo real, tablas con acciones contextuales y modales de confirmación para acciones destructivas.
Se logró rediseñar y documentar la totalidad de los módulos críticos del sistema DAVID.
La implementación de validación por IA y previsualización de documentos minimizó el rechazo de trámites por errores de captura.
La digitalización de las Solicitudes de Acceso eliminó tiempos muertos de traslado de papeles físicos entre oficinas.
"Este proyecto reforzó mi capacidad para desenmarañar lógica de negocio compleja y traducirla en interfaces intuitivas, validando mis decisiones con investigación en campo y colaboración técnica estrecha."
Transformación digital de un sistema legacy a una experiencia web escalable. Optimización de captura biométrica, gestión de identidades y digitalización de flujos burocráticos para el DTOP.
Product Design (UI Focus)
🏢
Gobierno de Puerto Rico (DTOP)
🗓️
Feb 2024 – Actualidad
🖥️
Web App / Desktop
🛠️
Figma, Jira, AI Tools
Al unirme al proyecto en febrero de 2024, el DTOP enfrentaba un reto crítico: modernizar su ecosistema digital "DAVID".
El sistema heredado dependía de procesos manuales, formularios en papel y una interfaz obsoleta que ralentizaba la atención en los centros CESCO y DISCO. Como Product Designer Ssr, mi misión no fue solo estética. Tuve que sumergirme en reglas de negocio gubernamentales complejas (Ley 22, Real ID) para diseñar soluciones que redujeran el error humano y digitalizaran trámites físicos por completo.
El Departamento de Transportación y Obras Públicas (DTOP) operaba con sistemas desconectados y procesos dependientes del papel. Esto generaba inconsistencias en la data, largas filas en los CESCO y una alta tasa de errores humanos en la carga de documentos legales y biométricos.
Como Product Designer Ssr, lideré el diseño end-to-end de módulos críticos (Captura, Identidades, Pagos).
Colaboré diariamente con analistas y desarrolladores para definir reglas de negocio, realizar QA visual y asegurar la implementación de un Design System coherente.
Reducción de Carga Cognitiva: Apliqué limpieza visual y divulgación progresiva para evitar la saturación del operador.
Consistencia Sistémica: Creación de patrones de interacción repetibles que aceleran la adopción de nuevos módulos.
Confort Visual: Modernización de tipografía y contraste previniendo la fatiga en jornadas de uso intensivo.
Rediseñé la experiencia de ingesta de documentos (fotos, firmas, identificaciones). Pasamos de un input básico a un pre-visualizador avanzado que permite al operador auditar la calidad de la imagen (zoom, rotación) antes de guardarla.
El Problema
La captura de documentos era un punto de dolor masivo. Los operadores subían imágenes mal encuadradas o ilegibles, lo que rechazaba trámites posteriores. Además, el sistema no daba feedback al momento de la carga.
La Solución
Un entorno de trabajo similar a herramientas de ediciónPara reducir la curva de aprendizaje, realicé un benchmarking de herramientas de gestión documental estándar (como Adobe Acrobat). Identifiqué que los usuarios necesitaban control total sobre el archivo antes de enviarlo.
Implementé un flujo de feedback visual donde el sistema sugiere automáticamente el "Tipo de Documento" escaneado, reduciendo la clasificación manual errónea.
Basado en patrones de herramientas líderes como Adobe Acrobat para reducir la curva de aprendizaje.
El módulo “core” del ecosistema DAVID. Unifiqué la visualización de datos críticos dispersos para crear una "Ficha Única del Ciudadano", reduciendo los tiempos de consulta en ventanilla.
El Reto: Organizar cientos de atributos sin scrolleos eternos. La Solución: Implementé una navegación por pestañas semánticas (Identidad, Real ID, Estatus Migratorio, Documentos DHS) que permite al operador saltar entre contextos legales y personales con un solo clic.
El Reto: Localizar expedientes con datos parciales.
La Solución: Rediseñé el flujo de consulta para soportar criterios de búsqueda combinados.
Identificadores Críticos: Prioricé la búsqueda por datos duros (SSID, Licencia) para resultados exactos.
UX de Formulario: Agrupación lógica de campos y selectores de fecha optimizados para reducir la carga cognitiva del operador."
Transformé un proceso burocrático manual (formularios de papel con múltiples firmas físicas) en un workflow digital transparente.
Arquitectura de Roles y Trazabilidad
Diseñé un sistema de gestión de tickets digital que respeta la jerarquía gubernamental, pero elimina el papel:
Niveles de Aprobación: Mapeé y diseñé flujos condicionales. Para CESCO, la solicitud viaja por 4 niveles (Supervisor > Director > Ejecutivo > Técnico). Para Agencias, simplificamos a 3 niveles.
Auditoría: Cada acción deja una huella digital (timestamp y usuario), garantizando transparencia total en la asignación de permisos.
Diseñé flujos diferenciados para CESCO (4 niveles: Supervisor > Director > Ejecutivo > Técnico) y Agencias (3 niveles).
Dashboard de gestión de estados y roles, permitiendo auditoría completa de quién aprobó qué y cuándo.
Lo que antes eran múltiples hojas de papel viajando entre oficinas, ahora es una vista unificada.
Diseñé el formulario para que evolucione visualmente: las secciones de aprobación (firmas inferiores) permanecen inactivas [Disabled] hasta que el rol anterior completa su parte. Esto guía al usuario y previene cuellos de botella, asegurando que cuando la solicitud llega a Servicios Técnicos, ya cuenta con todas las certificaciones de Supervisores y Directores requeridas por norma.
El desafío no era solo técnico, sino legal.
Digitalicé la aceptación de políticas críticas, transformando la lectura de normativas en un paso fluido pero vinculante.
Este módulo fue un desafío personal: lo diseñé de principio a fin, colaborando directamente con 2 desarrolladores y 1 analista. El objetivo era permitir que los ciudadanos se acogieran a planes de pago de multas de forma 100% digital.
Insight Clave
Detecté que los operadores y usuarios se confundían al mezclar deudas, debido a la falta de distinción visual clara entre los gravámenes atados a la tablilla del vehículo y las infracciones personales de la licencia.
Decisión de Diseño
Separé visual y lógicamente las deudas en dos grandes categorías: Vehículos (multas de auto) y Licencia (multas personales), para mitigar el riesgo de selección errónea y asegurar que los planes de pago se constituyan sobre los conceptos correctos.
El Flujo
Diseñé un proceso lineal estricto para evitar errores legales:
Viajé a Puerto Rico para realizar observación directa (Shadowing) con operadores en las oficinas de DISCO. Los insights recolectados permitieron ajustar la visualización de las tablas de multas (separando Vehículos de Licencias) para evitar errores de cobro.
Flujo completo desde la validación de identidad (SSN + Email), aceptación de términos, hasta la configuración de débito automático.
Para el módulo administrativo (Usuarios, Configuración, Estadísticas), definí un patrón de diseño repetible para acelerar el desarrollo y mantener consistencia.
Creé una plantilla maestra aplicada a todas las sub-secciones: 1. Dashboard General -> 2. Crear -> 3. Editar -> 4. Solo Lectura.
Apliqué este sistema a gestión de usuarios, terminales, impresoras y auditoría.
Construí una librería de componentes en Figma para asegurar consistencia entre los módulos desarrollados por distintos equipos.
Definición de colores, tipografía accesible y espaciados (8pt grid).
Inputs con validación en tiempo real, tablas con acciones contextuales y modales de confirmación para acciones destructivas.
Se logró rediseñar y documentar la totalidad de los módulos críticos del sistema DAVID.
La implementación de validación por IA y previsualización de documentos minimizó el rechazo de trámites por errores de captura.
La digitalización de las Solicitudes de Acceso eliminó tiempos muertos de traslado de papeles físicos entre oficinas.
"Este proyecto reforzó mi capacidad para desenmarañar lógica de negocio compleja y traducirla en interfaces intuitivas, validando mis decisiones con investigación en campo y colaboración técnica estrecha."
