Diagnosticar la plataforma
Revisé diferencias de identidad, usabilidad y navegación en los sistemas existentes para orientar una propuesta común.
CASO 02 / UX/UI · Front-end
2023Orden visual para un sistema de beneficios.
Dar coherencia a una plataforma que reúne procesos de administración de beneficios sociales.
- Proyecto
- SUSESO
- Mi rol
- Diseño UX/UI · Identidad visual
- Herramientas / Entrega
- UI Kit estatal · AngularJS · HTML/CSS
- Contexto
- Célula ágil en Tecnova
01 / CONTEXTO
El reto.
La plataforma PIAS reunía procesos de administración de beneficios con diferencias de identidad y navegación entre sistemas existentes. Mi trabajo fue convertir historias de usuario y flujos funcionales en una interfaz estructurada, alineada al UI Kit estatal.
02 / RESPONSABILIDAD
Mi aporte.
- Diagnóstico de las plataformas y de sus brechas de consistencia.
- Traducción de historias de usuario y flujos a interfaces estructuradas.
- Entrega de componentes AngularJS: navegación, formularios, botones y selectores.
Participé como diseñador UX/UI dentro de una célula ágil de Tecnova, junto a ingeniería, analistas y jefatura de proyecto. Mi responsabilidad abarcó identidad visual, interfaces y componentes de entrega en AngularJS.
03 / DECISIONES Y DESARROLLO
Del contexto a la entrega.
Estructurar las operaciones
Transformé historias de usuario y flujos en navegación, formularios y vistas de consulta, trabajando con el equipo ágil.
Entregar componentes
Preparé header, footer, menú lateral, formularios, botones y selectores para una implementación visual coherente.
DECISIONES EN LA ENTREGA
Separar la búsqueda de los resultados
La vista de monitoreo organiza primero los filtros y luego la tabla. En la captura se muestran seis criterios de consulta, por lo que una tarea de búsqueda compleja queda agrupada antes de revisar registros.
Hacer visibles los estados del proceso
La tabla distribuye los estados por etapa de carga y utiliza símbolos de confirmación, advertencia y error. Esa combinación hace explícitas las diferencias entre registros y conserva el contexto de cada etapa.
Ordenar la navegación por operación
El menú lateral reúne tareas en grupos como informe financiero, cartola, rendiciones y reportes. La estructura permite ubicar las operaciones dentro de la plataforma integrada.
04 / IMPACTO Y APRENDIZAJE
Lo que aporta la solución.
Una experiencia visual y funcional unificada.
La entrega documentada integra identidad, navegación, formularios, consulta y componentes AngularJS dentro de una estructura visual común. Las piezas muestran cómo se organizan la búsqueda, el monitoreo y los estados operativos; la muestra de código acompaña esa entrega a ingeniería.
- Consulta estructurada
- Filtros agrupados antes de la tabla de resultados.
- Lectura operativa
- Estados visibles por etapa del proceso.
- Continuidad técnica
- Componentes y documentación visual para implementación.
En una plataforma compleja, la claridad y la consistencia son parte central de la solución.
SIGUIENTE CASO / 03