Convertir registros de piso de fábrica en datos estructurados para reportes operativos en tiempo real
Rol
UX Engineer
Equipo
Estudio de 3 personas + equipo Divisan
Periodo
2026 · En producción · En desarrollo
Herramientas
Paper, Vue 3, Pinia, GitHub, Ollama
Alcance
Discovery con stakeholder, UX/UI, Sistema de componentes, Implementación frontend
Resultado
Tres flujos productivos están activos con 20 usuarios registrados en piso de fábrica.
Decisión clave
Pasar de formularios largos a pasos guiados con validación antes de avanzar.
Trade-off
Reducir complejidad visible sin quitar el detalle operativo que necesitan los dashboards.
Siguiente medición
La reducción de errores y el tiempo de captura siguen en medición post-lanzamiento.
Contexto
Los registros de producción todavía dependían del papel
Divisan fabrica aretes de ganado y componentes para identificación de animales. Su operación había crecido más allá de lo que los cuadernos y hojas de cálculo podían registrar de forma confiable: entradas inconsistentes, nombres escritos de distintas formas y campos obligatorios sin llenar obligaban a su encargada de datos a interpretar o corregir la información antes de usarla.
El producto ya existía como un SaaS con roles y permisos desarrollado por mi equipo. Mi trabajo no fue rediseñar toda la plataforma, sino mejorar una parte crítica: los formularios que los operadores completan desde tabletas y teléfonos dentro de la fábrica.
Reto
Reducir la carga cognitiva sin perder detalle operativo
La encargada de datos necesitaba información estructurada y confiable para alimentar los dashboards que presenta cada mes a los dueños. Los operadores necesitaban una experiencia directa, con menos información visible al mismo tiempo y menos oportunidades de cometer errores.
La solución también debía integrarse en un código Vue existente, respetando los patrones de navegación, los permisos por rol y una ventana de entrega corta.
Simplificar el formulario no significaba eliminar información, sino pedirla en el momento adecuado—un paso a la vez.
Evidencia
Lo que sabíamos y lo que falta validar
La dirección inicial provino de conversaciones con la encargada de datos y del feedback continuo del equipo de Divisan. Estos insumos permitieron identificar inconsistencias frecuentes en nombres de productos, cantidades y registros de operadores.
Veinte trabajadores están registrados en el sistema. Los dashboards están activos y se actualizan en tiempo real conforme los operadores envían sus formularios. La medición estructurada de reducción de errores y tiempo de captura sigue en curso.
El proceso en el que Divisan confiaba antes de los formularios digitales guiados.
Decisiones clave
Progreso visible y recuperación ante interrupciones
Flujo multi-paso en lugar de scroll vertical
El equipo eligió un enfoque por pasos sobre mi propuesta vertical inicial para reducir la cantidad de información visible a la vez en pantallas móviles.
Validación antes de avanzar
Cada etapa valida los datos obligatorios antes de permitir avanzar, con mensajes de error claros y navegación hacia atrás sin perder información.
Persistencia local del borrador
Un composable compartido guarda el paso actual y el estado del formulario en localStorage para que una recarga accidental no reinicie la tarea.
Un sistema para tres formularios
Encabezados, indicadores de progreso, validación y patrones responsive compartidos mantienen consistencia entre los flujos de materia prima, scrap y almacén laser.
Tres flujos de producción—materia prima, vena y scrap, scrap almacén y laser—construidos con un sistema de interacción compartido.
Paso 1 de 6: el formulario comienza con el contexto de producción—fecha, operador y máquina.
Paso 5 de 6: un resumen completo permite verificar todos los datos antes de enviar.
Implementación
Diseñar y construir dentro de un producto en marcha
Me incorporé a una base de código Vue 3 existente, aprendí sus convenciones e implementé tres formularios multi-paso sin afectar módulos de otros miembros del equipo. Cada formulario sigue la misma arquitectura de componentes: renderizado dinámico de pasos con <component :is>, composables compartidos para el estado del formulario y persistencia en localStorage, y animaciones con Transition.
Los formularios tienen entre 4 y 6 pasos dependiendo del flujo. Cada paso tiene un título claro, una descripción de su propósito y validación antes de avanzar. Una barra de progreso en la parte superior muestra la posición general sin distraer del campo actual.
El layout responsive asegura que en móvil cada paso ocupe la pantalla cómodamente, con objetivos táctiles grandes y tamaños de fuente legibles. El paso de resumen antes del envío muestra toda la información capturada en una vista desplazable.
Inicio, paso y resumen mantienen legibilidad en un viewport móvil estrecho.
Resultado actual
Formularios activos, dashboards actualizándose, impacto en medición
Los tres flujos están integrados en el sistema de Divisan y cada envío actualiza los dashboards de producción en tiempo real. Veinte operadores usan activamente los formularios en el piso de fábrica.
El resultado verificable hoy es una experiencia operativa funcional que llegó a producción y ahora puede mejorar mediante uso real. La medición de reducción de errores y tiempo de captura continúa en proceso.
Los dashboards se actualizan en tiempo real conforme los operadores completan cada formulario.
Reflexión
Qué llevaría al siguiente producto operativo
→Incorporarse a un código existente requiere entender sus reglas antes de proponer otras.
→Diseñar e implementar el mismo flujo cierra brechas de interacción que suelen perderse en la entrega.
→Definir la medición antes del lanzamiento, no intentar reconstruirla después.
