PROYECTO
MARCO — Cornare
Diseño UX/UI de página de inicio, header, footer, módulo pedagógico y dashboards internos de gestión ambiental para Cornare, desarrollado con Rain Ingeniería.
2023
Año
Diseño UI/UX & Sistema de Diseño
Categoría
Diseño UX/UI para Rain Ingeniería (Página de Inicio, Header, Footer, Módulo Pedagógico y Dashboards Internos para Cornare)
Mi Rol
Figma, Design Systems, UX Research, Data Visualization, GIS Mapping
Herramientas
RESUMEN
Un sistema de diseño y plataforma geoespacial intuitiva para el monitoreo de cuencas, ríos y alertas climáticas.
Contexto
MARCO (Monitoreo Ambiental Regional de Cornare) es la plataforma tecnológica desarrollada por Rain Ingeniería para la gestión y monitoreo ambiental en 26 municipios del Oriente Antioqueño. El proyecto ya contaba con un desarrollo técnico y visual en marcha. A través de Rain Ingeniería, mi trabajo se centró en diseñar la experiencia de usuario y la interfaz para la nueva página de inicio, el header, el footer institucional, el módulo pedagógico interactivo ('¿Qué es MARCO?') y los dashboards de uso interno para la administración y visualización de datos telemétricos de sensores y cuencas. Un requerimiento fundamental fue conservar la UI existente y dar continuidad rigurosa a la línea gráfica institucional de Cornare.
Mi Rol
Diseño UX/UI para Rain Ingeniería (Página de Inicio, Header, Footer, Módulo Pedagógico y Dashboards Internos para Cornare)
Desafío
El gran desafío fue diseñar nuevas secciones esenciales —como el header, el footer, la página de inicio, el módulo didáctico y los dashboards de datos— conservando con precisión la UI preexistente y la identidad gráfica de Cornare, integrando nuevas funcionalidades sin romper la coherencia del sistema.
Resultado
Una interfaz clara y moderna que preserva la identidad visual preexistente de Cornare, facilitando el acceso público al Geoportal y al contenido pedagógico, mientras dota a los analistas técnicos de herramientas visuales robustas para el monitoreo de cuencas en tiempo real.
CARACTERÍSTICAS CLAVE
Página de Inicio & Navegación
Header, footer y accesos directos al Geoportal y cuencas
Módulo Pedagógico
Sección didáctica ¿Qué es MARCO? para sensibilización
Dashboards de Uso Interno
Paneles técnicos de gestión y telemetría de sensores
EL DESAFÍO
Preservar la UI existente e integrar nuevas funcionalidades con total coherencia visual.
El gran desafío fue diseñar nuevas secciones esenciales —como el header, el footer, la página de inicio, el módulo didáctico y los dashboards de datos— conservando con precisión la UI preexistente y la identidad gráfica de Cornare, integrando nuevas funcionalidades sin romper la coherencia del sistema.
EL ENFOQUE
Continuidad del sistema de diseño, jerarquía por colores y componentes atómicos.
Analizamos la arquitectura visual preexistente para diseñar un header y footer que unificaran la navegación de la plataforma, una página de inicio limpia con accesos destacados, un módulo pedagógico ilustrado y comprensible, y paneles de administración de datos con tablas, filtros avanzados y gráficos interactivos de series de tiempo.
SHOWCASE DEL SITIO WEB
SISTEMA DE DISEÑO
Outfit & Inter
Combinación de Outfit para títulos dinámicos y tecnológicos con Inter para máxima precisión en datos numéricos y cartografía.
Paleta de color
Elementos UI
DISEÑADO PARA CONVERTIR
Diseño UI/UX enfocado en la pedagogía y la gestión de datos.
Desde el acceso ciudadano hasta las pantallas de uso interno, cada interfaz fue pensada para brindar claridad, accesibilidad y agilidad en el análisis ambiental.
RESULTADO FINAL
Página de Inicio & Navegación Global
Header, footer y navegación clara para la consulta territorial de las cuencas de Cornare.
Header & Footer Institucional
Estructuración de la barra de navegación global y pie de página, preservando la UI existente y facilitando accesos rápidos al Geoportal y enlaces de interés.
Diseño de Página de Inicio (Home)
Jerarquía visual moderna con acceso inmediato al Geoportal, buscador territorial y estado actual de las cuencas.
Módulo Pedagógico Interactivo
Diseño de la sección '¿Qué es MARCO?' con infografías, conceptos de gestión del riesgo y material didáctico para la comunidad.
Dashboards de Uso Interno
Estructuración de interfaces para el monitoreo telemétrico de sensores, niveles de ríos y gestión de alertas técnicas.
Continuidad del Sistema de Diseño en Figma
Mapeo y extensión de componentes, escalas tipográficas y tokens cromáticos alineados a la línea gráfica institucional de Cornare.
Módulo Pedagógico Didáctico
Estructuración de contenidos y recursos visuales para acercar la gestión ambiental a la comunidad.
Dashboards de Manejo de Datos
Herramientas de uso interno para la visualización y administración de sensores hidrometeorológicos.
