Modernizing Manufacturing: Designing a SaaS-Based MES for High-Performance Production

A three-pillar redesign focusing on Process Planning, Work Order Execution, and Quality Inspection — empowering operators, supervisors, and quality teams with clarity, speed, and accuracy.

Project Brief

Manufacturing floors are chaotic environments where every delay, miscommunication, or incorrect entry affects throughput. The existing MES tools were outdated, slow, and heavily manual.

My goal was to reimagine the workflow across three critical modules:

Process Planning → Work Order Execution → Quality Inspection

…transforming them into a clean, guided, operator-friendly experience.

Primary Users:

Operators, Supervisors, Production Managers, Quality Inspectors, Plant Heads

Scope

UX architecture, end-to-end workflows, UI system, accessibility guidelines, and design-engineering alignment.

Discovery & Research

To understand real factory challenges, I interviewed frontline users and mapped actual production workflows.

Key Findings from Field Research

  • Operators struggle with typing and unclear instructions.
  • Supervisors lack real-time visibility to prevent issues early.
  • Quality checks happen late → rework + scrap.
  • Work instructions vary across shifts → inconsistent output.
  • Technical constraints: ERP sync delays, barcode hardware quirks, unstable Wi-Fi.

This research grounded the entire design direction in real manufacturing behavior.

Problem Framing

From research, we distilled the core UX issues:

  • Operators require faster, guided execution workflows Typing slows them down; decisions need to be obvious.
  • Supervisors need more proactive visibility Not reactive firefighting.
  • Quality checks must shift from after-the-fact to inline & mandatory To stop defects early.
  • Complex assemblies demand better visual support 2D drawings weren’t enough. These statements shaped the design principles.

End-to-End Flow

Order → Process Plan → Scheduling → Line Assignment → Execution → Quality Checks → Completion → Reports

Role-Based Flows

  • Operator: Scan → Execute → Capture data → QC → Complete
  • Supervisor: Monitor → Resolve issues → Approve steps
  • QA: Inspect → Log defects → Approve/Reject lots

Conditional Logic

  • Barcode mismatch → stop flow
  • QC fail → auto-trigger inspection
  • Machine alarm → switch to safe mode
  • Wrong tool detected → block next step

This system mapping created a foundation for scalable UX.

Information Architecture

Top-Level Navigation:

Planning / Execution / Quality / Monitoring / Reports

Screen Structure:

  • Left: Machine or Work Order list
  • Center: Instructions + Data Capture
  • Right: Real-time logs, alarms, and comments

Tablet-First Layout:

Larger tap zones, simplified menus, persistent scan button.

This IA ensured predictability across modules.

UI Design & Visual Language

Goals: clarity, speed, traceability.

Visual System Includes:

  • High-contrast palette for industrial lighting
  • Clear, readable typography
  • Dense tables with filters + sticky headers
  • Role-based dashboards
  • Real-time signals for machine state

UI patterns were optimized for both desktop control rooms and tablet-based shop-floor usage.

Key Screens & Interactions

Process Planning Screen

Structured routing steps, QC gates, version control, and parameter definition.

Work Order Execution — Barcode Scanning

Fast, error-proof workflow:

  • Full-screen scan mode
  • Auto-validation
  • Haptic feedback
  • Barcode mismatch handling

Work Order Execution — 3D Model (Hoops Viewer)

Guided 3D visual instructions:

  • Rotate, pan, isolate components
  • Highlight the exact part per step
  • Exploded view for complex assemblies
  • Visual torque zones, orientation cues

Defect Logging

  • Category → Subcategory → Severity
  • Annotated pictures
  • Auto-linking to lot + revision

Supervisor Dashboard

  • Real-time machine status
  • QC alerts
  • WIP tracking
  • Efficiency indicators

This section shows “hero” screens that demonstrate complexity turned into clarity.

Technical Alignment

To ensure successful implementation, the design aligned with engineering realities:

  • Barcode scanning API & hardware compatibility
  • Mapping 3D model parts to instruction steps
  • Machine telemetry → UI state behaviors
  • Offline-first caching
  • Multi-plant, multi-line scalability
  • ERP synchronization flows

This collaboration ensured a production-ready MES, not a conceptual UI.

Accessibility & Usability

Designed for real factory use:

  • Large, glove-friendly tap zones
  • Reduced cognitive load
  • High-contrast modes
  • Minimal typing workflows
  • Offline capabilities
  • Safety-first error prevention

These decisions directly influence daily adoption on the shop floor.

IMPACT & LEARNINGS

The redesigned MES system produced immediate improvements:

  • Faster operator onboarding
  • Significantly fewer manual entry errors
  • 3D models reduced assembly mistakes
  • QC issues caught earlier
  • Improved compliance with standardized process plans
  • Supervisors gained real-time visibility

This translated into smoother production and fewer quality escapes.

Learnings & Reflection

Working on MES shifted my approach to enterprise UX:

  • Designing for physical environments requires unique strategies
  • Systems thinking is more important than visuals
  • Real-time workflows transform how users behave
  • Clear hierarchy and predictable structure outperform aesthetics
  • Visual guidance (3D) enriches understanding far more than text

This project strengthened my ability to architect large, complex, multi-role enterprise systems.