Context

Design of a software platform (“Thermal Vision Theme”) aimed at field technicians and quality engineers. The primary goal was to create an interface capable of displaying multiple video streams (optical and thermal cameras) simultaneously without cognitively overloading the user.

Industrial Design System (Dark Theme)

High-Contrast Palette: Strict use of colors for industrial signaling. Orange (#FF6B00) was defined as the primary accent, Cyan (#00E5FF) for connection/info states, and Green (#39FF14) for success indicators and live video.
Visual Components: Creation of a custom Vue.js component viewer (ar_view.vue) featuring consistent cards and inputs, tailored for quick reading in low-light environments.
State Micro-interactions: Subtle animations for transitions between camera connection states (e.g., “Connecting…”, “Live”), providing immediate visual feedback.

UI/UX Technical Challenges

Rendering Performance (UI): Processing MJPEG video directly in the browser while minimizing DOM reflow to ensure the interface remained fluid (60 FPS) even under network stress.
Navigation Architecture: Designing a layout capable of dynamically toggling between optical and thermal channels without losing information context.

Impact & Results

Operational Readability: The “Thermal Vision Theme” reduced operator eye strain during 8+ hour shifts.
Field Effectiveness: Significant increase in decision-making speed by instantly differentiating critical temperatures.