Production Lines Monitoring App

Category:
Responsive Web App

Technologies used:

Sketch, Axure, Miro, Photoshop, Illustrator

My Contribution:

UX Research, UX Design, UI Design, Branding

Project Overview

The Factory Monitoring Responsive Web App was developed for RS Components to provide real-time monitoring of factory production lines through IoT sensor data. The system tracks vibration, sound, temperature, humidity, and other sensor inputs to detect malfunctions and predict maintenance needs. The platform enables users to visualize and analyze sensor data, receive alerts on potential failures, and optimize maintenance cycles. Designed as a responsive web app, it offers a seamless experience across desktop, tablet, and mobile devices.

Factories rely on reactive maintenance, leading to unexpected downtime and costly repairs. Without real-time insights into production line performance, businesses struggle to anticipate failures and optimize maintenance schedules.

The existing systems were fragmented, lacked intuitive visualization tools, and were not adaptable to different screen sizes.

Problem Statement

Goal

The primary goal was to design a responsive and scalable web app that allows factory operators and engineers to:

• Monitor production lines in real-time using IoT sensor data.

• Receive automated alerts when machines show early signs of failure.

• Optimize maintenance schedules based on predictive insights.

• Customize dashboards and configure visualizations based on their specific needs.

• Ensure seamless usability across desktop, tablet, and mobile.

Key Responsibilities

As a Senior Product Designer (Contract), I was responsible for:

• Conducting contextual inquiry by visiting factory sites and observing operators using existing systems.

• Spending time on-site in factories, interacting with operators, maintenance teams, and managers to fully understand real-world workflows.

• Leading user interviews with factory operators and engineers to gather insights on their daily challenges.

• Facilitating and participating in workshops with stakeholders and subject matter experts to align business goals with user needs.

• Designing user flows and wireframes to streamline interactions and enhance usability.

• Creating a responsive UI for web, tablet, and mobile that provides clear, actionable insights.

• Developing a colour-coded item health state scale and an alerts matrix to visually indicate equipment conditions and prioritize maintenance actions.

• Delivering all design assets independently, ensuring high-quality execution from research to final UI design.

Research & Discovery

User Interviews – Understanding Pain Points

We conducted interviews with factory operators, maintenance engineers, and shift supervisors. Key insights included:

• Operators struggled with delayed fault detection – They needed a clearer alert system that could highlight faults before major failures occurred.

• Engineers requested predictive maintenance tools – They wanted trend analysis and failure prediction based on sensor data.

• Supervisors needed centralized dashboards – Managing multiple production lines was challenging due to disparate monitoring systems.

Contextual Inquiry – Factory Site Visits & Observations

During our on-site visits to factories, we observed how maintenance teams interacted with their existing monitoring systems. We identified several key pain points:

• Reactive maintenance issues: Workers often discovered machine faults only when production was already affected, leading to costly downtime.

• Lack of real-time alerts: Many operators relied on manual inspections and logbooks, causing delays in addressing issues.

• Complex data overload: Existing systems presented data in overwhelming tables and raw logs, making it difficult to interpret.

Stakeholder & Subject Matter Expert Workshops

To align business goals and technical feasibility, we facilitated workshops with IoT specialists, data engineers, and factory stakeholders. Key takeaways:

• Technical limitations: IoT sensors had varying levels of accuracy, requiring data calibration for effective use.

• Functional requirements: The system needed to support custom thresholds for alerts and historical data analysis.

• Scalability considerations: As factories expanded, the platform had to support multi-site monitoring and integration with different sensor types.

UX Design

The Factory Monitoring Web App was designed with an emphasis on real-time monitoring, predictive analytics, and streamlined usability. Based on insights gathered from factory operators and engineers, the following solutions were implemented:

1. Real-Time Asset Monitoring Dashboard

• Comprehensive asset overview: Displays machine health, operational status, and fault history.

• Customisable widgets: Users can personalise dashboards with relevant KPIs.

• Graphical data representation: Historical trends, intervention probability, and monitored components are visualised for easy interpretation.

2. Alerts & Fault Management

• Severity-based alert system: Categorises alerts by urgency (Critical, Major, Warning) for faster prioritisation.

• Intervention probability graph: Helps predict failures based on past trends and machine conditions.

• Integrated work order creation: Enables maintenance teams to log and track issue resolution directly from the alert panel.

3. Data Studio – Configurable Insights

• User-defined parameters: Allows users to select metrics, time ranges, and filters for custom graph generation.

• Multi-variable trend analysis: Supports comparison of different sensor data points for better diagnostics.

• Export and sharing options: Enables engineers to export reports for further analysis and collaboration.

4. Asset Rules & Condition Configuration

• Customisable thresholds: Users can define condition rules for automated alerts based on vibration, temperature, and pressure thresholds.

• Conditional logic grouping: Enables complex rule configurations to refine alert triggers.

• Scalable rule management: Allows for dynamic adjustments as new sensors and equipment are integrated.

Customer journey maps

UI Design

Following the UX research and design phase, the UI design for the Factory Monitoring Responsive Web App was developed to transform user insights into an intuitive, efficient, and scalable interface. The focus was on ensuring clarity, usability, and adaptability, making it easy for factory operators, engineers, and maintenance teams to interact with complex industrial data in real-time.

1. Visual Hierarchy & Branding

• A dark theme was implemented to optimise readability in industrial settings, reducing eye strain in low-light environments.

• Consistent branding elements—including RS Components' colour palette, typography, and iconography—were applied to maintain a cohesive brand identity.

• Typography: A clean, sans-serif font was selected for maximum readability on both large desktop monitors and smaller tablet screens.

• Iconography: Custom icons were designed for key alerts, dashboards, and machine status indicators, ensuring quick visual recognition.

2. Dashboard & Data Visualisation

Building on UX insights, the UI layout prioritizes visibility and quick actionability:

• Main dashboard design segments data into Asset Overview, Alerts, Graphs, and Monitored Components, ensuring clarity.

• Interactive data visualisations:

  • Graph-based trend analysis presents real-time and historical sensor data for quick issue identification.

  • Multi-layered widget-based structure allows users to configure their dashboards based on their roles.

• OEE (Overall Equipment Effectiveness) Metrics are displayed prominently, enabling operators to monitor factory efficiency in terms of availability, quality, and performance.

• Events & Alerts Panel:

  • Displays alerts in a structured, severity-based hierarchy.

  • Allows quick responses via contextual action buttons (View Work, Close Event, Create Work Order).

3. Interactive Asset Management

• Asset information cards provide a concise yet detailed view of machines, including:

  • Machine name, RS ID, location, manufacturer, and first installation date.

  • Real-time health status and predictive failure probability.

• Component health tracking:

  • Machine parts are monitored individually, with colour-coded health indicators.

  • Components include motor pumps, belts, gearboxes, and pressure systems, each with real-time operational status.

• Actionable insights UI:

  • Work order integration: Engineers can generate reports or schedule maintenance directly from asset status pages.

  • Live system updates ensure all data is always current.

4. Alerts & Condition Rules UI

• Configurable condition rules:

  • Users can define, modify, and delete alert triggers based on vibration, pressure, temperature, and operational speed.

  • A logical rule-building interface simplifies the setup of conditional parameters.

• Timeline-based visualisations:

  • Alerts are mapped against historical data trends to highlight recurring faults.

  • Engineers can adjust alert thresholds dynamically based on machine performance history.

• Modular design for scalability:

  • As factories expand, new sensor integrations can be easily accommodated.

5. Data Studio & Reporting

• Filter-based visualisation tools allow users to generate custom reports:

  • X-axis values, data parameters, and group comparisons enable deep insights.

• Multi-graph comparison:

  • Overlaying different machine parameters helps analyze performance fluctuations.

• Export & sharing capabilities:

  • Engineers can download reports, export CSV files, and share visual analytics with their teams.

• Zoom and time-selection controls:

  • Allows for precise fault tracking across different production timeframes.

6. User Experience Enhancements

• Sticky navigation & quick action menus:

  • Ensures essential controls (alerts, machine logs, reporting) are always accessible.

• Collapsible side panels:

  • Maximises screen real estate for data visualisation on smaller screens.

• Inline help and hover tooltips:

  • Supports new users with explanatory labels for complex analytics.

Main Dashboard

Asset Dashboard

Asset Dashboard

Asset Dash board

Image Gallery and Asset Health

Asset Configuration

Data Studio

Responsive UI Design

• The platform was designed to be fully responsive, ensuring seamless usability on desktop, tablet, and mobile devices.

• Adaptive layout reflow:

  • Panels dynamically adjust based on screen size.

  • Key KPIs are prioritised in mobile views to ensure quick decision-making on-the-go.

• Mobile-first optimisations:

  • Alerts and asset statuses load instantly, prioritizing critical machine data.

• Touch-friendly interactions for tablet-based field engineers:

  • Larger tap targets for buttons.

  • Gesture-based interactions for zooming and graph adjustments.

Asset Health and Alert Warnings Matrix

• The Warnings and Asset Health Colour & Symbol Library was developed to provide a clear, intuitive visual language for monitoring machine health and operational status.

• The system utilises a colour-coded severity scale, ranging from yellow (warning) to dark red (critical), ensuring users can quickly assess the urgency of alerts at a glance.

• Each alert type is paired with distinctive icons representing parameters such as:

  • Vibration

  • Pressure

  • Temperature

  • Unplanned stops

• This icon-based approach makes it easy to identify the root cause of an issue.

• Planned maintenance events follow a separate colour scheme, differentiating them from unexpected failures to reduce alert fatigue.

• The structured system enhances readability, prioritisation, and decision-making.

• Maintenance teams can act swiftly to prevent equipment failures and optimise factory uptime.

Design Documentation & System Implementation

To maintain scalability and consistency, detailed design documentation was created, covering:

• Comprehensive component library (developed in Figma):

  • Includes buttons, dropdowns, alerts, tables, graphs, and interactive cards.

• UI style guide & design system documentation:

  • Standardizing typography, color hierarchy, component spacing, and responsiveness.

• Interaction patterns & best practices:

  • Guidelines for alerts, modal dialogs, and multi-step workflows.

• Accessibility compliance:

  • Ensuring high-contrast colors, keyboard navigation, and touch support.

• Developer handoff specifications:

  • Pixel-perfect layouts, annotations, and redlines for implementation accuracy.

Impact

Improved efficiency – Operators gain real-time insights, reducing unexpected machine failures.

Optimised maintenance cycles – The alerts system helps factories transition from reactive to predictive maintenance.

Seamless user experience – The responsive design ensures usability across devices.

Clearer data visualisation – Customisable dashboards and interactive graphs enhance decision-making.

Lessons Learned

On-site observation is invaluable – Understanding factory workflows first-hand led to better design decisions.

Customisation matters – Users wanted personalized dashboards tailored to their roles.

A clear visual hierarchy is essential – The health state color scale significantly improved usability and response times.

Cross-device accessibility drives adoption – Ensuring a great experience across desktop, tablet, and mobile was key to user engagement.