ECOLABS

ECOLABS is a web platform designed and implemented during my professional internship at Universidad EAFIT. The project replaced the manual equipment loan process — operating through Google Forms and Excel — with a centralized system with three differentiated user profiles: Student, Teacher, and Administrator. The process followed User-Centered Design across four phases: research, architecture, high-fidelity design, and React implementation.

Category
UX / UI · Frontend
Role
UX Research · Product Design · UI · Frontend (React)
Year
2026
Software & tools

Software & tools

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

Process

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