Web App
Rediseño del portal público de SisPT (desktop-first) para convertir un universo de recursos en una experiencia editorial clara: orientar, explicar y habilitar consulta con consistencia. El caso recorre diagnóstico, arquitectura por intención, wireframes y decisiones de UI aplicadas a pantallas finales (Home, Catálogo de insumos y Ayuda).
Brief
Un portal con alto valor institucional, pero con fricciones de lectura y consulta para audiencias con niveles de experticia distintos.
El alcance se centró en el portal público como punto de entrada a la consulta (desktop). El reto: ordenar el contenido para que la persona entienda qué está viendo, por qué importa y qué hacer después, sin depender de ensayo y error.
Una vista rápida para entender el reto y el norte del proyecto antes de entrar al proceso.
Consulta pública para planeación territorial
SisPT integra visores, guías, normativa e insumos para apoyar formulación, seguimiento y consulta. El portal público debía servir a ciudadanía, academia y equipos territoriales con necesidades, urgencias y niveles de conocimiento diferentes.
Densidad + dispersión + ambigüedad
Rutas redundantes y etiquetas similares obligaban a “probar suerte”. Esto afectaba el uso y debilitaba la confianza al no dejar claro vigencia, alcance, fuente y acción recomendada desde el listado.
Portal público como punto de entrada
Nos enfocamos en navegación y consulta: home como orientación, listados (catálogos), señales editoriales y consistencia entre secciones. La prioridad fue reducir exploración a ciegas y mejorar decisión antes del clic.
Objetivos editoriales y de producto para ordenar el contenido, guiar decisiones y permitir que el portal escale con consistencia.
Consolidar contenido disperso, eliminar redundancias y definir una categorización editorial que reduzca rutas duplicadas y búsqueda a ciegas.
Reducir pasos y dudas para ubicar recursos clave, con navegación y listados consistentes orientados a tareas concretas.
Incorporar señales de vigencia, alcance, fuente y contexto para que el usuario sepa qué está viendo y por qué aplica.
Establecer patrones UI y reglas de contenido para crecer secciones sin improvisación, manteniendo consistencia entre pantallas.
Proceso
Desliza para ver el proceso (varía por proyecto)
01
Consolidación de secciones y recursos, detección de redundancias y fricciones de rotulación/navegación. Priorización por tareas núcleo y momentos de uso.
02
Reorganización con lógica de lectura y decisión (Entender → Consultar → Usar). Jerarquía editorial, naming y profundidad por tipo de contenido.
03
Estructura y jerarquía antes de la estética: navegación, listados, filtros, estados y módulos de soporte (Ayuda) para alinear equipo y reducir ambigüedad.
04
Aplicación de patrones en pantallas finales desktop (Home, Catálogo de insumos, Ayuda) + especificaciones y checklist de accesibilidad para implementación y QA.
Diagnóstico
Antes de proponer UI, alineamos necesidades reales: tareas, urgencias, comprensión de conceptos y señales que construyen confianza institucional.
El diagnóstico se apoyó en revisión del universo de recursos y co-creación con el equipo. Priorizamos claridad editorial y consistencia para reducir exploración a ciegas y error por selección al azar.
Diseñamos para perfiles con distintos niveles de conocimiento y frecuencia de uso: desde equipos técnicos hasta ciudadanía ocasional.
Señales recurrentes que aparecieron temprano y orientaron decisiones editoriales y de navegación.
“Yo entro a resolver una tarea, no a entender cómo está organizado internamente.”
Angela Maria Barrera
Entidad territorial
“Si me explican en una línea qué encuentro aquí y si aplica, avanzo sin miedo.”
Luisa Fernanda González
Planeación y seguimiento
“Cuando hay muchas opciones parecidas, termino abriendo varias pestañas y pierdo tiempo.”
Carlos Ándres Guerrero
Usuario recurrente
Sin micro-contexto, aumenta la duda y el abandono.
Cuando el alcance no es evidente, el usuario abandona o abre múltiples pestañas. La salida: micro-contexto visible desde el listado (qué es, a quién aplica, vigencia y fuente).
Fecha y fuente reducen incertidumbre.
Vigencia y fuente deben verse antes del clic. Reduce fricción y evita consultas asociadas a “no sé si esto aún aplica”.
Sin orden útil, todo se vuelve ruido.
Listados largos requieren jerarquía, estados y un orden significativo. Sin estas señales aumenta el tiempo de búsqueda y el error por selección al azar.
Patrones repetibles aceleran la consulta.
Repetir estructura y patrones entre secciones reduce la curva de aprendizaje y mejora la velocidad de consulta.
Solución
En vez de empezar por pantallas finales, ordenamos el problema en tres capas: arquitectura, flujos y decisiones editoriales de interfaz.
La solución se diseñó para reducir incertidumbre antes del clic: rutas por intención, listados con señales y patrones reutilizables que sostienen consistencia entre secciones.
Un sitemap que guía lectura y decisión: qué hacer, dónde ir y qué esperar antes del primer clic.
Entender → Consultar → Usar
Reorganizamos el universo de recursos por intención y momento de uso. Esto reduce ambigüedad y habilita navegación y listados consistentes entre secciones.
Un user flow repetible: explorar, filtrar y llegar a detalle con señales suficientes para decidir.
Menos exploración a ciegas, más señales antes del clic.
Definimos un recorrido coherente: explorar, aplicar filtros, comparar opciones y avanzar con contexto mínimo visible (qué es, vigencia, alcance y fuente).
Checklist de decisiones: lo que reduce duda y acelera el hallazgo.
Rutas por intención desde el inicio para orientar la primera decisión.
Evita que el usuario “pruebe suerte” desde Home.
Listados consistentes con estructura repetible: búsqueda + filtros + estados + orden útil.
Aprende una vez, aplica en múltiples catálogos.
Micro-contexto visible antes del clic: qué es, vigencia, alcance y fuente.
Reduce incertidumbre y apertura de múltiples pestañas.
Ayuda como capa de soporte: FAQ + CTAs claros para resolver bloqueos.
Reduce abandono y soporta usuarios de baja frecuencia.
Wireframes
Validamos lectura y decisión antes de pulir UI: jerarquía, acciones primarias y estados.
Los wireframes ayudaron a alinear estructura, navegación y patrones repetibles. El foco fue consistencia editorial: catálogos, cards, filtros, módulos de recomendados y soporte.
Sistema de diseño
Convertimos lineamientos en reglas operativas: jerarquía tipográfica, contraste, estados y patrones reutilizables.
El objetivo fue evitar que cada pantalla “naciera distinta” y asegurar escalabilidad: mismos componentes, mismas reglas, misma lectura.
Sistema aplicable para producto institucional: paleta, tipografía, estados y accesibilidad como señal de calidad y confianza.
Logotipo
Logotipo (archivo)
Paleta
Paleta de apoyo para UI institucional: claridad, contraste y jerarquía.
Navy institucional
#111A2A
Blue Denim
#4573D0
Emerald
#80C7AE
Lemon
#D3CE3D
Earth
#755E51
Tipografía
Tipografía pensada para lectura prolongada y jerarquía en listados.
Work Sans
UI / texto
Legibilidad para contenido y listados (Aa Bb Cc · 0123)
Montserrat
Titulares
Jerarquía editorial para secciones y módulos (Aa Bb Cc)
Componentes
Componentes base para consistencia entre secciones.
Cards editoriales
Listados consistentes con jerarquía, metadatos y CTAs.
Búsqueda + filtros
Patrón repetible para explorar, refinar y decidir.
Chips / etiquetas
Señales de alcance, estado, vigencia y tipo de recurso.
Estados
Empty, loading, error y “sin resultados” con guía accionable.
Interfaz de Usuario
UI diseñada como experiencia de lectura: orientar, explicar y permitir acción sin fricción.
Aplicamos el sistema en pantallas finales para que el usuario aprenda una vez y navegue mejor: misma lógica, mismos patrones, mismas señales en Home, Catálogo y Ayuda.
Impacto
Éxito en tareas clave
Tareas completadas sin asistencia (proxy basado en validación interna)
0%
+45%
Tiempo para ubicar una sección clave
Reducción en tiempo de hallazgo durante prueba guiada (proxy)
0:00
-50%
Consultas por “no encuentro”
Estimación de reducción en tickets/consultas recurrentes a soporte (proxy)
0%
Conclusión
El cambio más valioso no fue “hacerlo más bonito”, sino hacerlo más claro y confiable. Al centralizar contenido, ordenar por intención y estandarizar patrones, el portal público se vuelve más usable para quien llega por primera vez y más eficiente para quienes consultan con presión operativa.
Arquitectura por intención que guía sin ambigüedad.
Patrones reutilizables para crecer el portal con consistencia.
Señales de confianza (vigencia, alcance, fuente y contexto) que reducen fricción y elevan adopción.
