Case Study: Sistema Web para la Gestión de Actividades Culturales y Deportivas de la UTVCO – Frontend
Autor: Aguirre Jiménez Francisco Victorico
Rol: Diseñador UX/UI & Desarrollador Frontend
Institución: Universidad Tecnológica de los Valles Centrales de Oaxaca (UTVCO)
Fecha de presentación: Proyecto de titulación (2026)
1. Contexto y Cliente
La Universidad Tecnológica de los Valles Centrales de Oaxaca (UTVCO) imparte diversas actividades culturales y deportivas a través del área de Cultura y Deportes. Estas actividades son un pilar fundamental para la formación integral de los estudiantes. Sin embargo, la gestión de inscripciones y seguimiento se realizaba de forma manual mediante Google Forms y hojas de cálculo (Excel/Sheets), lo que generaba ineficiencias operativas graves.
2. Planteamiento del Problema
El proceso actual presentaba tres problemas principales:
- Ineficiencia operativa: Organización y clasificación de datos lenta y manual, con alto consumo de tiempo.
- Falta de control: No existía un mecanismo automatizado para cerrar cupos o límites de inscripción.
- Dificultad administrativa: Mala visualización de datos de inscritos, lo que complicaba la generación oportuna de reportes y el seguimiento de estudiantes.
Estos problemas afectaban directamente a tres perfiles de usuarios:
- Estudiantes (inscripción y consulta de actividades).
- Administradores (gestión, reportes y control).
- Encargados de tutoría (seguimiento académico).
3. Objetivos del Proyecto
Objetivo General
Diseñar las interfaces de usuario y desarrollar el frontend de un sistema web para la optimización y gestión automatizada de las inscripciones a las actividades culturales y deportivas de la UTVCO.
Objetivos Específicos
- Analizar el proceso de inscripción y clasificación de datos del área de cultura y deportes.
- Diseñar la propuesta de solución aplicando Design Thinking y Diseño Centrado en el Usuario (DCU/UCD).
- Desarrollar un prototipo funcional que demuestre funcionalidades e interacción.
- Codificar los componentes diseñados.
- Determinar los requerimientos funcionales y no funcionales.
- Diseñar las interfaces gráficas de todos los módulos del sistema.
4. Metodologías Aplicadas
Se combinaron tres enfoques complementarios:
- Design Thinking: Para comprender profundamente al usuario y generar soluciones creativas.
- SCRUM: Para un desarrollo iterativo y flexible.
- Diseño Centrado en el Usuario (DCU): Para garantizar usabilidad, accesibilidad y satisfacción real de las necesidades.
5. Proceso de Design Thinking (Fases Detalladas)
Fase 1 – Empatizar
Se realizaron investigaciones de usuarios, entrevistas (Customer Journey Interviews) con el Administrador (Lic. Julio César López Aguilar) y mapas de empatía. Se identificaron dolores de estudiantes (proceso confuso, falta de información) y administradores (gestión manual tediosa).
Fase 2 – Definir
Se crearon User Personas (Estudiante, Administrador, Encargado de Tutoría) y se delimitó el problema central: “La gestión manual de inscripciones genera ineficiencia, falta de control y mala experiencia para todos los usuarios”.
Fase 3 – Idear
Se diseñó la Arquitectura de Información, diagramas de flujo (estudiante y administrador) y mapas de navegación. Se generaron múltiples conceptos de solución priorizando simplicidad y automatización.
Fase 4 – Prototipar
Se desarrollaron tres niveles:
- Wireframes de baja fidelidad (papel).
- Mockups de media fidelidad.
- Prototipo de alta fidelidad (interactivo) en Figma, tanto para móvil (estudiante) como escritorio (administrador).
Fase 5 – Testear
Se probaron los prototipos con usuarios reales para obtener feedback y realizar iteraciones antes de la implementación final.
6. Tecnologías y Herramientas
- Figma: Diseño colaborativo, prototipado y UI Kit completo (guía de estilos, tipografía Poppins, paleta institucional UTVCO, sombras, componentes).
- Ionic Framework: Desarrollo del frontend para aplicaciones móviles de alto rendimiento y calidad (enfocado en UX/UI).
- Guía de Estilos (UI Kit): Tipografía, paleta de colores institucionales, escalas de grises, sombras y componentes estandarizados para mantener consistencia.
7. Solución Implementada (Prototipo Funcional)
Se entregó un prototipo funcional de alta fidelidad completamente navegable que incluye:
Para Usuario Estudiante (móvil):
- Splash screen con branding “Cultura & Deportes”.
- Inicio de sesión / recuperación de contraseña.
- Dashboard de actividades (Deportivas, Culturales y Grupales).
- Tarjetas de actividades con botón “Descubrir”.
- Formulario de inscripción paso a paso (3 pasos).
- Pantalla de “Registro Exitoso”.
Para Usuario Administrador (escritorio):
- Dashboard con métricas rápidas (tutorías deportivas, culturales y grupales).
- Menú lateral: Documentos, Usuarios (SuperAdmin, Administradores, Tutores), Actividades (Deportivas, Culturales, Grupales).
- Lista de tutorías con filtros, búsqueda y estado (Deportiva/Cultural/Grupal).
- Gestión de usuarios y reportes.
El sistema utiliza la matrícula UTVCO como identificador principal de login, garantizando seguridad y vinculación institucional.
8. Resultados y Valor Entregado
El proyecto logró:
- Optimización del proceso: Transformación completa de un sistema manual a uno automatizado y sistemático.
- Diseño centrado en el usuario: Interfaz intuitiva, usable y accesible para los tres perfiles de usuario, maximizando adopción.
- Sistema listo para producción: Prototipo de alta fidelidad + Guía de Estilos (UI Kit) robusta, permitiendo una transición fluida al equipo de backend.
- Funcionalidades clave validadas:
- Control administrativo (reportes, filtros, cierre automático de cupos).
- Acceso seguro mediante matrícula institucional.
- Arquitectura escalable con roadmap futuro (comentarios, encuestas, funciones sociales).
9. Conclusiones y Lecciones Aprendidas
Este proyecto demuestra que un enfoque riguroso de Design Thinking + DCU permite resolver problemas reales de eficiencia operativa en instituciones educativas. Se entregó no solo una interfaz bonita, sino una solución funcional, usable y preparada para escalar.
Roadmap futuro: Integración de funcionalidades sociales, notificaciones push y analíticas avanzadas.
El frontend desarrollado representa un paso significativo hacia la digitalización del área de Cultura y Deportes de la UTVCO, mejorando la experiencia de cientos de estudiantes y facilitando la labor administrativa.
¡Proyecto finalizado con éxito!
Listo para implementación completa del sistema web.