ECOLABS

ECOLABS es una plataforma web diseñada e implementada durante mi práctica profesional en la Universidad EAFIT. El proyecto reemplaza el proceso manual de préstamo de equipos tecnológicos y audiovisuales — que operaba mediante Google Forms y hojas Excel — con un sistema centralizado de tres perfiles diferenciados: Estudiante, Docente y Administrador. El proceso siguió el Diseño Centrado en el Usuario en cuatro fases: investigación, arquitectura, diseño de alta fidelidad e implementación en React.

Categoría
UX / UI · Frontend
Rol
UX Research · Product Design · UI · Frontend (React)
Año
2026
Software y herramientas

Software y herramientas

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)
Proceso

Proceso

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
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
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
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.

Camilo Seguro© 2026