Three production workflows are live with 20 registered factory-floor users.
Key decision
Shift from long forms to guided steps with validation before advancing.
Trade-off
Reduced visible complexity without removing the operational detail dashboards need.
Next measure
Error-rate reduction and capture time are still being measured after launch.
Context
Production records still depended on paper and memory
Divisan is a livestock identification manufacturer producing ear tags and related components. Their operation had grown beyond what notebooks and spreadsheets could reliably track—inconsistent entries, illegible handwriting, and missing fields forced their data lead to interpret or correct information before it could be used.
The product already existed as a role-based SaaS built by my team. My work was not to redesign the entire platform, but to improve a critical part of it: the forms completed from tablets and phones on the factory floor.
Challenge
Reduce the cognitive load without losing operational detail
The data lead needed structured, reliable data to feed dashboards that she presents monthly to company owners. The operators entering data needed a direct experience with less information visible at once and fewer opportunities to submit invalid values.
The solution also had to fit inside an existing Vue codebase with established navigation patterns, permission roles, and a short delivery window.
Simplifying the form did not mean removing information. It meant asking for it at the right moment—one step at a time.
Evidence
What we knew and what remained to validate
The initial direction came from conversations with the data lead and ongoing client feedback. These inputs identified recurring inconsistencies in product names, quantities, and operator entries.
Twenty workers are now registered in the system. The dashboards are live and update in real time as operators submit their forms. Structured measurement of error reduction and completion time is still in progress.
The process Divisan relied on before the guided digital forms.
Key decisions
Progress visibility and interruption recovery
Multi-step flow over vertical scroll
The team chose a step-by-step approach over my initial vertical proposal, reducing how much information appears at once on mobile screens.
Validation before advancing
Each stage validates required data before allowing progression, with clear error messages and backward navigation without losing entered information.
Local draft persistence
A shared composable stores the current step and form state in localStorage so an accidental refresh or tab close does not restart the task.
One system across three forms
Shared headers, progress indicators, validation patterns, and responsive rules keep raw-material, scrap, and laser-waste workflows visually consistent.
Three production workflows—materia prima, vena y scrap, scrap almacén y laser—built from a shared interaction system.
Step 1 of 6: the form starts with production context—date, operator, and machine.
Step 5 of 6: a full summary lets operators verify all entries before sending.
Implementation
Designing and building inside a product already in motion
I joined an existing Vue 3 codebase, learned its conventions, and implemented three multi-step forms without disrupting modules owned by other team members. Each form follows the same component architecture: dynamic step rendering with <component :is>, shared composables for form state and localStorage persistence, and Transition-based step animations.
The forms range from 4 to 6 steps depending on the workflow. Each step has a clear title, purpose description, and input validation before advancing. A progress bar at the top shows overall position without distracting from the current field.
I also adapted the responsive layout so that on mobile each step fills the screen comfortably, with large touch targets and readable font sizes. The review step before submission shows all captured data in a single scrollable summary.
Start, step, and review remain legible and usable in a narrow mobile viewport.
Current result
Forms live, dashboards updating, impact being measured
The three workflows are integrated into the Divisan system, and each form submission updates the production dashboards in real time. Twenty operators are actively using the forms on the factory floor.
The verified result today is a functional operational experience that ships and can now improve through real usage. Error-rate reduction and completion-time measurement remain in progress.
Dashboards update in real time as operators complete each form.
Reflection
What I would carry into the next operational product
→Joining an existing codebase requires understanding its rules before proposing new ones.
→Owning both design and implementation closes interaction gaps that often appear in handoff.
→Define measurement before launch instead of attempting to reconstruct it afterward.
