07
UX / UI · Frontend·Práctica Profesional·EAFIT · 2025

ECOLABS

Sistema web de gestión de préstamos de equipos. Reemplaza Forms y Excel con una experiencia centralizada para tres perfiles de usuario.

0+
Estudiantes activos
0+
Docentes atendidos
0+
Equipos gestionados
scroll
El problema

Un sistema
roto desde adentro

Antes — flujo manual
01
Google Forms
Sin disponibilidad en tiempo real
02
Sin estados
Problemas de seguimiento
03
Excel centralizado
Datos no sincronizados
04
Gestión manual
Trabajo repetitivo
Después — ECOLABS
01
Portal web centralizado
Disponibilidad en tiempo real
02
Notificaciones automáticas
Estado de solicitud
03
Dashboard por perfil
Cada usuario ve lo suyo
04
Gestión automatizada
Aprobación, mora, reportes
0%

Estudiantes sin visibilidad del estado de su solicitud

0%

Estudiantes incurrieron en mora por falta de recordatorios

0.0h

Diarias de la administradora cruzando datos en Excel

Metodología DCU

Diseño centrado
en el usuario

01
Fase 01

Investigación con usuarios

9 entrevistas semiestructuradas y observación contextual con los 3 perfiles. Revisión del sistema anterior (Google Forms + Excel). Construcción de 3 personas y 3 journey maps con emociones, dolores y oportunidades que orientaron el diseño.

02
Fase 02

Definición y arquitectura

Mapa del sitio diferenciado por perfil, 4 flujos de interacción detallados y 10 requerimientos UX con criterios de aceptación medibles. Esta documentación funcionó como contrato de diseño con el equipo de backend.

03
Fase 03

Diseño de alta fidelidad

Sistema de diseño en Figma (paleta EAFIT, tipografía, íconos Lucide, grilla 8px, 12 componentes base). 35+ pantallas. Pruebas de usabilidad con 9 participantes — SUS 78.1. 7 problemas resueltos: wizard de solicitud por fechas primero, rediseño del módulo grupal.

04
Fase 04

Implementación del frontend

React 18 + Vite + CSS Modules. 12 rutas protegidas por rol con PrivateRoute + JWT. Integración con 10 endpoints REST via Axios. React Hook Form + Yup para formularios. Coordinación semanal con el equipo de backend para pruebas de integración end-to-end.

Fase 01 · Investigación

Tres perfiles,
un sistema

9 entrevistas semiestructuradas y observación contextual. Cada persona representa un universo de necesidades incompatibles con el sistema anterior.

VR
Valentina Ríos
Estudiante

Solicita equipos 1–2 veces por semana para proyectos académicos. Accede principalmente desde el celular. Necesita confirmar disponibilidad y saber el estado de su solicitud sin ir físicamente al ECOLABS.

Necesidades
·Consultar disponibilidad de equipos en tiempo real sin ir presencialmente
·Ver el estado de su solicitud después de enviarla
·Recordatorios automáticos de devolución para evitar moras
Fricciones
"Envío el formulario y no sé si me lo aprobaron o no"
"El formulario actual no indica si el equipo está disponible"
JM
Jorge Montoya
Docente

Reserva equipos para clases prácticas completas. Necesita solicitar múltiples unidades del mismo equipo en una sola transacción, con planificación anticipada.

Necesidades
·Solicitar múltiples equipos simultáneamente para un grupo académico
·Visibilidad del historial de préstamos de sus estudiantes
·Planificación anticipada con confirmación en menos de 24 horas hábiles
Fricciones
"No puedo hacer reservas grupales — tengo que repetir el formulario N veces"
"El proceso burocrático desestimula usar el laboratorio en clase"
DC
Daniela Cárdenas
Administradora ECOLABS

Gestiona todas las solicitudes, el inventario y las devoluciones del ECOLABS. Antes del sistema dedicaba más del 40% de su tiempo a tareas manuales repetitivas en Excel.

Necesidades
·Panel centralizado con estado en tiempo real de todos los equipos
·Aprobación/rechazo de solicitudes con notificación automática al usuario
·Alertas de mora y reportes de uso exportables por período
Fricciones
"Paso horas cruzando datos en Excel. No se actualiza en tiempo real"
"No tengo forma de notificar masivamente a los usuarios morosos"
Hallazgos de entrevistas
"
Quiero saber si el equipo está disponible antes de ir hasta el ECOLABS y que quede claro cuándo debo devolverlo.
Valentina Ríos · Estudiante · Persona 1
Insight

El modelo mental del estudiante pone primero las fechas, luego el equipo. El formulario original imponía el orden inverso — origen del error más frecuente en las pruebas de usabilidad, resuelto con el wizard de 3 pasos.

"
Necesito reservar equipos para toda mi clase con anticipación. El proceso actual me quita tiempo que debería usar en preparar la clase.
Jorge Montoya · Docente · Persona 2
Insight

Sin solicitudes grupales, el docente debía repetir el formulario por cada estudiante. Este hallazgó motivó el módulo de solicitud grupal como feature crítico de la plataforma.

"
Paso horas cruzando datos en Excel. Necesito que el sistema me ayude a saber qué equipos están prestados, a quién y cuándo regresan.
Daniela Cárdenas · Administradora · Persona 3
Insight

2.5 horas diarias en tareas manuales repetitivas. La automatización de estos flujos fue el impacto cuantificable más significativo: el perfil Administrador obtuvo SUS de 85.0 en las pruebas finales.

Fase 02 · Definición y arquitectura

10 requerimientos
UX

RUX01Disponibilidad en tiempo realEl usuario puede ver el estado de cada equipo (disponible / prestado / en mantenimiento) antes de iniciar la solicitud.
RUX02Confirmación automáticaEl sistema envía confirmación al usuario en ≤ 30 s tras la aprobación, sin intervención manual del administrador.
RUX03Recordatorios de devoluciónEl usuario recibe notificación automática 24 h y 2 h antes de la fecha límite de devolución.
RUX04Solicitud grupal para docentesUn docente puede incluir múltiples estudiantes y equipos en una sola solicitud sin repetir el formulario.
RUX05Dashboard diferenciado por perfilCada perfil (Estudiante, Docente, Administrador) accede únicamente a las acciones y datos relevantes a su rol.
RUX06Historial de préstamosEstudiante y docente consultan su historial completo con filtros por fecha y estado en máximo 2 clics.
RUX07Gestión de mora automatizadaEl sistema detecta y notifica automáticamente préstamos vencidos; el administrador no necesita cruzar datos manualmente.
RUX08Aprobación en máximo 2 pasosEl administrador puede aprobar o rechazar cualquier solicitud pendiente en 2 interacciones o menos.
RUX09Reportes exportables por períodoEl administrador exporta reporte de uso en CSV/Excel para cualquier rango de fechas definido por él.
RUX10Registro de daños y trazabilidadEl administrador registra incidencias o daños en equipos vinculados a un préstamo específico con descripción y fecha.
Fase 02 · Arquitectura de interacción

4 flujos
principales

01
Solicitud individual
Estudiante
5 pasos
01Ingresar al portal
02Seleccionar fechas de préstamo
03Ver disponibilidad en tiempo real
04Elegir equipo y confirmar
05Recibir confirmación automática
02
Solicitud grupal
Docente
5 pasos
01Ingresar al portal
02Crear nueva solicitud grupal
03Seleccionar clase y equipos
04Asignar unidades por estudiante
05Enviar y aguardar aprobación
03
Gestión de solicitudes
Administrador
5 pasos
01Ver solicitudes pendientes
02Revisar detalles y disponibilidad
03Aprobar o rechazar con un clic
04Notificación automática al usuario
05Estado actualizado en tiempo real
04
Registro de devolución
Administrador
5 pasos
01Ver préstamos activos en el panel
02Seleccionar préstamo a cerrar
03Verificar estado del equipo
04Registrar daños si aplica
05Cerrar préstamo y liberar equipo
Fase 03 · Pruebas de usabilidad

7 problemas
identificados

6 resueltos
1 en progreso
01

Orden del formulario desorientaba al usuario

Resuelto

El formulario original pedía el equipo antes que las fechas. Los usuarios seleccionaban un equipo y luego no encontraban disponibilidad en las fechas que necesitaban.

Wizard de 3 pasos: fechas de préstamo → equipo disponible → confirmación.
02

Sin visibilidad del estado de la solicitud

Resuelto

Después de enviar el formulario, el 100 % de los estudiantes desconocía si su solicitud había sido aprobada, rechazada o seguía pendiente.

Panel de solicitudes con estados en tiempo real: pendiente, aprobada, rechazada.
03

Módulo de solicitud grupal inexistente

Resuelto

Los docentes debían enviar un formulario por separado para cada estudiante del grupo, haciendo el proceso inviable para clases con 20+ alumnos.

Módulo dedicado de solicitud grupal con asignación de equipos por estudiante.
04

Sin recordatorios de devolución

Resuelto

El 67 % de los estudiantes incurrió en mora. Sin notificaciones, la fecha de devolución quedaba únicamente en la memoria del usuario.

Alertas automáticas 24 h y 2 h antes del vencimiento del préstamo.
05

Panel de administración sin jerarquía visual

Resuelto

El administrador veía todas las solicitudes como una lista plana sin diferenciación de urgencia, estado ni proximidad de vencimiento.

Dashboard con secciones por estado, indicadores de mora y filtros rápidos.
06

Validación de formularios sin feedback claro

Resuelto

Los errores de validación aparecían solo al intentar enviar, sin indicar qué campo fallaba ni cómo corregirlo.

Validación inline con mensajes descriptivos usando React Hook Form + Yup.
07

Notificaciones fuera de la plataforma web

En progreso

Los recordatorios de devolución funcionan solo dentro del portal. Usuarios que no abren la app no reciben la alerta a tiempo.

Integración de notificaciones por correo electrónico — pendiente de implementación.
Fase 03 · Pruebas de usabilidad · SUS
0.0
SUS promedio · 9 participantes
Por encima del umbral estándar · 68
Desglose por perfil
Administrador85.0
Estudiante80.0
SUS promedio78.1
Docente69.2
Umbral estándar68.0
7 problemas · 6 resueltos · 1 en progreso

El wizard de solicitud por fechas primero y el módulo de solicitud grupal para docentes fueron los cambios de mayor impacto en el score final.

35+
Pantallas únicas en Figma
12
Rutas protegidas por rol
10
Endpoints REST integrados
100%
Completitud — Administrador
Fase 04 · Implementación

Stack técnico
React

Figma
Figma
Sistema de diseño · Prototipos interactivos · 35+ pantallas
React 18
React 18
Frontend · Hooks funcionales · Arquitectura feature-based
Vite
Vite
Bundler · Dev server · Build optimizado para producción
React Hook Form
React Hook Form
Formularios · Validación con Yup · Wizard de solicitud
Axios
Axios
Peticiones HTTP · Interceptores JWT · 10 endpoints REST
React Router v6
React Router v6
Routing · PrivateRoute · Protección por rol (3 perfiles)
Práctica profesional · EAFIT

10 entregables
16 semanas

100 % entregado
Investigación
D01Sem. 1–2
Plan de investigación

Definición de objetivos, protocolo de entrevistas y selección de participantes para los 3 perfiles.

D02Sem. 3–4
Informe de entrevistas

Síntesis de 9 entrevistas semiestructuradas con estudiantes, docentes y administración del ECOLABS.

D03Sem. 4–5
3 personas + 3 journey maps

Valentina Ríos, Jorge Montoya y Daniela Cárdenas con emociones, dolores y oportunidades de diseño.

Definición
D04Sem. 6
Mapa del sitio por perfil

Arquitectura de información diferenciada para Estudiante, Docente y Administrador.

D05Sem. 6–7
10 requerimientos UX

RUX01–RUX10 con criterios de aceptación medibles — contrato de diseño con el equipo de backend.

Diseño
D06Sem. 8
Wireframes de baja fidelidad

Flujos principales en baja resolución para validar arquitectura y navegación antes de la UI.

D07Sem. 9–10
Sistema de diseño en Figma

Paleta EAFIT (#146AEF / #00002B), tipografía, íconos Lucide, grilla 8 px y 12 componentes base.

D08Sem. 11–12
Prototipo alta fidelidad (35+ pantallas)

Prototipo interactivo completo para los 3 perfiles, listo para pruebas con usuarios reales.

Testing
D09Sem. 13–14
Informe de pruebas de usabilidad

SUS promedio 78.1 · 9 participantes · 7 problemas identificados · 6 resueltos antes de la implementación.

Implementación
D10Sem. 15–16
Frontend implementado

React 18 + Vite + CSS Modules · 12 rutas con JWT · 10 endpoints REST · arquitectura feature-based.

Prototipo interactivo

Ver en Figma

Abrir en Figma ↗
figma.com/design/J8m0K8T6KSCrmPBS1vwZXU
ReactFigmaUX ResearchDCUEAFITPráctica Profesional
Camilo Seguro© 2026