UI/UX Design

Chapter 17 — UI/UX Design

Industrial software is not consumer software. The user is not browsing. The user is a reliability engineer at 2 AM, responding to an alarm on a critical pump, deciding whether to wake up the maintenance crew or let the machine run until morning. Every pixel on screen must earn its place. There is no room for decorative whitespace, no tolerance for ambiguity, no forgiveness for a dashboard that takes five seconds to answer the question: is anything wrong?

This chapter specifies the user experience architecture for the RAPID AI Engineering Intelligence Platform — the interface layer that sits atop the fifteen diagnostic and analytical modules described in earlier chapters. It defines who sees what, how information is organized, what the core UI components look like, and the principles that govern every visual and interaction decision.

17.1 Design Philosophy

Industrial UX Is a Different Discipline

Consumer software optimizes for engagement. Industrial software optimizes for accuracy under stress. The difference is not cosmetic — it is structural. Consumer apps guide users toward a single happy path. Industrial dashboards must present dense, multi-dimensional data to domain experts who already know what they are looking for and need to find it instantly.

Three principles govern RAPID AI’s design:

Clarity over aesthetics. If a visual treatment makes data harder to parse — even marginally — it is removed. Gradients, shadows, and animations exist only when they encode meaning (a pulsing border for an active alarm, a color gradient for severity). Decoration that competes with data is eliminated.

Data density over whitespace. A reliability engineer monitoring 200 assets needs to see the state of all 200 without scrolling. The dashboard must support high-density layouts where a trained user can absorb system health at a glance. This does not mean cramming — it means information-efficient design where every element carries signal.

Zero ambiguity. Every number has units. Every score has a range. Every color has a label. Every timestamp shows “as of” context. A health score of 62 is meaningless without knowing the scale (0-100), the direction (declining), and the threshold (below 70 = Warning). RAPID AI never displays a number without its interpretive frame.

The Two-Second Rule

The primary dashboard must answer “is anything wrong?” in under two seconds. This is achieved through a strict information hierarchy:

System health overview — fleet-level: how many assets are in each state?
Asset drill-down — which specific assets need attention, ranked by risk?
Sensor-level detail — what is the sensor evidence behind the diagnosis?
Diagnostic explanation — why did the system reach this conclusion?
Recommended action — what should the engineer do, and when?

Each level is one click deeper. The engineer at 2 AM starts at level 1, identifies the problem asset in seconds, drills to level 3 for confirmation, and reaches level 5 for a maintenance recommendation — all within 30 seconds.

Glanceable Design

“Glanceable” means the dashboard communicates through shape and color before the user reads a single word. A wall of green cards means everything is normal. A single red card among green ones draws the eye immediately. The engineer does not need to read “Pump P-101: Health Score 62, Status Warning” — the amber card in a field of green tells the story before text is processed.

This aligns with the existing production dashboard’s “Mission Control” aesthetic (documented in the dashboard redesign design spec): SpaceX/Bloomberg-inspired dark surfaces, semantic color coding, and a visual hierarchy that prioritizes state communication over textual explanation.

17.2 Role-Based Dashboards

RAPID AI serves four distinct user roles. Each role has different information needs, different technical literacy, and different decision authority. The platform implements role-based view filtering (persisted in localStorage, switchable via sidebar dropdown) to ensure each user sees exactly what they need — no more, no less.

Operator Dashboard — The Simplified View

The operator is on the plant floor. They do not know what BPFO means and should not need to. Their dashboard uses plain language and traffic-light color coding.

Layout:

Top banner: plant-wide status (green/amber/red) with count of assets in each state
Main grid: one card per monitored asset, showing a traffic-light icon (green/amber/red), the asset’s common name, and a one-sentence status in plain language
Active alarm panel: scrollable list of current alarms with plain-language explanations
Action buttons: one-click Acknowledge and one-click Escalate per alarm

Language rules:

Never display: “BPFO amplitude exceeds threshold” or “SSI = 0.62”
Always display: “Pump P-101 needs attention — bearing may be wearing out” or “Gearbox GB-301 requires immediate inspection — lubrication problem detected”
Severity is communicated through color and simple labels: Normal, Needs Attention, Urgent, Critical

What is hidden from operators:

SSI scores, AESF stability states, confidence scores, RPN values
Module Explorer, Reliability view, API documentation
Rule trace and diagnostic reasoning detail
Trend charts and projected degradation curves

Reliability Engineer Dashboard — The Power User View

This is the primary dashboard. The reliability engineer is the core user of RAPID AI — technically fluent, responsible for diagnosis and maintenance strategy, and deeply familiar with the equipment. This role sees everything.

Layout: The layout follows the shell architecture defined in the production dashboard redesign:

+-------------------------------------------------------------------+
|  Command Bar: Asset ID | Preset | Severity slider | Analyze CTA   |
+--------+----------------------------------------------------------+
|        |  Health Hero (SSI arc gauge, stability state, asset ID)  |
| Side   |  Metric Strip (Severity | SSI | Confidence | RUL | Risk) |
| bar    +----------------------------------------------------------+
|        |  SSI Heatmap — all monitored assets, color-coded by      |
| Nav    |  health score, sortable by area/type/severity             |
| items  +----------------------------------------------------------+
|        |  AESF Stability Panel — states S0-S4 with trend arrows   |
| Live   |  per asset, showing stability index and entropy scores    |
| status +----------------------------------------------------------+
|        |  Diagnostic Detail — sensor evidence, rule matches,       |
| Role   |  confidence scores, rule trace ("why this diagnosis?")    |
| switch +----------------------------------------------------------+
|        |  RCM Workbook — editable failure modes, live RPN, tasks   |
+--------+----------------------------------------------------------+

Key capabilities:

SSI Heatmap: A grid of all monitored assets where each cell’s color intensity maps to the SSI score (0.0 = deep green, 1.0 = intense red). Clicking any cell opens the Asset Health Card. The heatmap answers “where are the problems?” in under two seconds for a fleet of hundreds.
AESF Stability States: Each asset shows its current stability state (S0: Stable, S1: Marginal, S2: Unstable, S3: Highly Unstable, S4: Critical) with a trend arrow indicating whether stability is improving, holding, or degrading.
Diagnostic Detail Panel: When an asset is selected, the panel shows which sensors contributed evidence, which rules matched, the confidence score breakdown, and the formal IMS rule trace. This answers the question every engineer asks: “why did the system say this?”
RCM Workbook Integration: The reliability engineer can edit failure modes, update risk scores, adjust maintenance task assignments, and review the RPN ranking — all without leaving the dashboard. Changes propagate to Module E (Maintenance Planning).
Trend Charts with Projections: Time-series charts show historical sensor values with baseline bands, alert/alarm thresholds, and projected degradation trajectories from Module B.2 trend analysis. The P-F interval is marked visually.

Maintenance Manager Dashboard — The Work Planning View

The maintenance manager translates diagnostic intelligence into work orders, schedules, and budgets. Their dashboard is action-oriented.

Layout:

Maintenance Backlog: A sortable table of pending maintenance tasks ranked by Risk Priority Number (RPN). Each row shows: asset ID, failure mode, consequence category, recommended strategy, RPN score, estimated hours, required skills, and spare parts needed. This maps directly to the maintenance_action_tile widget contract.
Resource Allocation Panel: Matrix of required skills (Mechanical, Electrical, Reliability, Safety) against available personnel, highlighting gaps.
Schedule Calendar: A weekly/monthly calendar showing planned maintenance windows, upcoming proof tests, and time-critical tasks. Tasks with RUL estimates shorter than the next planned outage are flagged.
Cost Tracker: Planned versus actual maintenance spend per asset, per area, and plant-wide. Rolling 12-month trend.
KPI Cards: MTBF (Mean Time Between Failures), MTTR (Mean Time To Repair), maintenance cost per asset, planned vs unplanned maintenance ratio, schedule compliance percentage.

Plant Manager Dashboard — The Executive View

The plant manager needs to know whether the plant is healthy, whether money is being spent wisely, and whether anything requires executive intervention. No technical detail.

Layout:

Fleet Health Scorecard: A single visual showing the percentage of assets in each stability state (S0-S4), rendered as a stacked horizontal bar. The manager sees “78% of assets are stable, 15% are degrading, 5% need attention, 2% are critical” without interpreting numbers.
Financial Impact Summary: Three hero metrics — avoided downtime cost (value of prevented failures), total maintenance spend (current period), and cost avoidance ratio (dollars saved per dollar spent on monitoring).
Compliance Status: A checklist of regulatory and safety requirements with green/red status. Ties to the safety_compliance_widget contract — proof tests due, overdue, or completed.
Top 5 Risk Assets: The five assets with the highest risk scores, each showing a one-sentence summary (e.g., “Gearbox GB-301: lubrication starvation risk detected, possible immediate shutdown required”).
Trend Reports: Monthly and quarterly trend lines for fleet health, maintenance spend, and reliability KPIs. Exportable to PDF for board presentations.

17.3 Key UI Components

Each core widget is specified as a contract between the backend API and the frontend renderer. The dashboard JSON files in platform/api/dashboard/ define the data shape; this section defines how that data is presented.

Asset Health Card

The atomic unit of the dashboard. One card per monitored asset. Compact enough to display 20-30 cards on a single screen without scrolling.

Data contract (from dashboard_asset_health_card.json):

{
  "widget_type": "asset_health_card",
  "asset_id": "P-101",
  "title": "Pump P-101",
  "status": "Warning",
  "health_score": 62,
  "failure_mode": "Bearing outer race spalling",
  "confidence_score": 0.88,
  "estimated_rul_days": 42,
  "recommended_action": "Plan bearing replacement at next outage",
  "trend_summary": {
    "vibration": "Rising",
    "temperature": "Rising",
    "process": "Stable"
  }
}

Visual specification:

Card background color: derived from status field (green for Normal, amber for Warning, orange for Alert, red for Alarm)
Top row: asset title (bold, left-aligned), health score as a compact radial gauge (0-100)
Middle row: failure mode name (truncated with tooltip if longer than 40 characters), confidence score as percentage badge
Bottom row: recommended action text (one line), RUL in days with trend arrow
Footer: trend indicators for vibration / temperature / process (up arrow = rising, flat = stable, down = falling)
Hover state: card elevates slightly, shows full failure mode text and “Last updated: [timestamp]”
Click action: opens Diagnostic Detail Panel for this asset

Diagnostic Timeline

A chronological feed of diagnostic events for a selected asset. Each event represents a point where the system detected something noteworthy — a rule match, a state change, a threshold crossing.

Visual specification:

Vertical timeline, most recent at top
Each event node shows: timestamp, originating module (A through E, color-coded), failure mode detected, confidence at that point, and a delta indicator showing what changed from the previous assessment
Severity-coded left border (green/amber/orange/red) per event
Expandable: click any event to see the full diagnostic report for that moment
Filter controls: filter by module, by severity, by date range
The timeline makes degradation progression visible — an engineer can see a bearing going from “Normal” to “Watch” to “Warning” over three months of readings

Sensor Evidence Panel

The explainability layer. When a reliability engineer asks “why did the system diagnose bearing outer race spalling?”, this panel answers with data.

Visual specification:

Header: failure mode name, confidence score, originating module
Evidence table with columns:
- Sensor type (Vibration, Temperature, Process)
- Feature name (e.g., BPFO amplitude, envelope energy, bearing temperature)
- Measured value with units (e.g., 0.82 mm/s, 6.4 gE, 86.0 degC)
- Threshold that triggered the rule (e.g., ”> 0.5 mm/s”)
- Status (Matched / Not Matched, with green check or grey dash)
Physics basis section: a collapsible panel explaining the engineering rationale for the rule (e.g., “BPFO (Ball Pass Frequency, Outer race) indicates repetitive impact at the outer race defect frequency. Elevated amplitude with concurrent temperature rise is characteristic of progressing spall damage.”)
Formal expression display: the rule’s logical expression (from the sensor_evidence_rules table) with matched terms highlighted
Data sourced from the sensor_evidence_rules and end_to_end_response_example.json contracts — the panel renders sensor_evidence arrays like ["BPFO rising", "Envelope energy high", "Bearing temperature above site threshold"] alongside their numeric values

Risk Matrix

A 5x5 grid mapping probability (1-5, vertical axis) against severity (1-5, horizontal axis), as defined by the RCM decision framework in Module E.

Visual specification:

Grid cells colored by risk zone: green (RPN 1-4), yellow (5-10), orange (12-20), red (25)
Assets plotted as dots within grid cells, sized by confidence score
Dot color reflects current stability state (S0=green through S4=purple)
Hover over any dot: shows asset ID, failure mode, RPN, and recommended strategy
Click any dot: navigates to that asset’s Diagnostic Detail Panel
Top-right corner (high probability, high severity) visually distinct — bordered, labeled “Immediate Action Zone”
Data sourced from the rcm_decision_request_motor.json contract fields: severity_rank, probability_rank, detectability_rank

An interactive table that brings the RCM workbook (Module E) directly into the dashboard. The reliability engineer can review, edit, and update failure mode assessments without switching to a separate tool.

Visual specification:

Table columns: Failure Mode | Consequence Category | Detection Method | Current RPN | Trend (arrow) | Recommended Task | Next Due Date | Status
Sortable by any column; default sort by RPN descending (highest risk first)
Inline editing: consequence category (dropdown), detection method (dropdown), next due date (date picker)
RPN cell: numeric value with background color intensity proportional to score (low=green, high=red)
Trend arrow: up (worsening), flat (stable), down (improving), based on RPN change over last 3 assessments
Row click: expands to show the full maintenance plan from the maintenance_action_tile contract — task type, frequency, trigger condition, responsible team, spare requirements
Batch actions: select multiple rows, assign to maintenance window, export as work order package

Trend Chart

Time-series visualization for any sensor parameter, with the intelligence overlays that distinguish RAPID AI from a simple historian display.

Visual specification:

X-axis: time (configurable: 7 days, 30 days, 90 days, 1 year)
Y-axis: sensor value with units (auto-scaled)
Data layers (toggleable):
1. Historical values — solid line, primary data color
2. Baseline band — shaded region showing the normal operating range
3. Alert threshold — dashed amber horizontal line
4. Alarm threshold — dashed red horizontal line
5. Projected trajectory — dotted line extending into the future, from Module B.2 trend analysis (classified as Stable, Drift, Step, Accelerating, or Chaotic)
6. P-F interval marking — vertical shaded region showing the estimated window between potential failure detection (P) and functional failure (F)
Annotations: clickable markers on the timeline where maintenance events, inspections, or diagnostic state changes occurred
Cursor: crosshair with value readout, snapping to nearest data point
Export: PNG screenshot or CSV data dump

17.4 Data Visualization Principles

Semantic Color System

RAPID AI uses a five-level severity color palette, consistent across every widget, chart, badge, and background:

Level	Color	Hex	Meaning	Example
Normal	Green	`#22c55e`	Operating within baseline	SSI < 0.30
Advisory	Amber	`#eab308`	Deviation detected, monitoring	SSI 0.30-0.50
Warning	Orange	`#f97316`	Action should be planned	SSI 0.50-0.70
Alarm	Red	`#ef4444`	Immediate attention required	SSI 0.70-0.90
Critical	Purple	`#a855f7`	Safety risk or imminent failure	SSI > 0.90

These colors are drawn from the production design system tokens (surface hierarchy #020617 through #293548 for backgrounds; severity colors for data elements).

Never Color Alone

Color vision deficiency affects approximately 8% of males. RAPID AI never relies on color as the sole differentiator. Every colored element is paired with at least one additional indicator:

Status badges include text labels (“Normal”, “Warning”, “Alarm”)
Chart lines use distinct stroke patterns (solid, dashed, dotted) in addition to color
Heatmap cells include numeric values alongside color intensity
Icons accompany color changes (checkmark for normal, warning triangle for advisory, exclamation for alarm)
Patterns (hatching, stippling) are available for printed outputs

Chart Principles

Following Edward Tufte’s data-ink ratio principle:

Remove chartjunk: No 3D effects, no gradient fills on bars, no decorative grid lines. Grid lines are light (#1e293b on dark backgrounds) and only appear at major axis intervals.
Maximize data-ink: Every pixel of ink on the chart should represent data. The axis labels, threshold lines, and projected trajectory all carry information.
Small multiples over complex overlays: When comparing multiple sensors, use a column of aligned small charts rather than overlaying six lines on one chart. Shared x-axis, independent y-axes.
Numbers are honest: Always show units (mm/s, degC, bar, gE). Always show confidence where applicable. Always show the “as of” timestamp in the chart footer.

Loading and Error States

Loading: Skeleton screens that mirror the layout of the incoming data. Card shapes with shimmer animation. Never a blank white page, never a spinner without context.
Error: Specific, actionable error messages. Not “Something went wrong” but “Sensor data for P-101 is unavailable since 14:23 — the vibration collector may be offline. Contact instrumentation team.” Errors display in the widget that failed, not as a page-level takeover. Surrounding widgets continue to function.
Stale data: If data is older than the expected refresh interval, the widget displays a subtle “stale” indicator (muted color, italic timestamp, clock icon) rather than hiding the last known values. Old data is better than no data in an industrial context.

17.5 Responsive Design

Primary: Control Room Desktop (1920x1080)

The control room monitor is the primary deployment target. Design assumptions:

Dark theme by default — reduces eye strain during 12-hour shifts and minimizes light pollution in dimmed control rooms
High-density layout: SSI heatmap, active alarm list, and fleet summary all visible simultaneously without scrolling
Large, readable fonts for critical indicators (health score, alarm count) — viewable from 2 meters away
Minimum touch target: not applicable (mouse interaction in control rooms)

Control Room Mode

An optional high-density mode optimized for wall-mounted displays or multi-monitor setups:

Font sizes increased 20% for distance readability
Non-essential UI chrome (sidebar labels, tooltips) hidden
Alarm states use full-screen color washes (subtle background tint) for peripheral awareness
Auto-refresh at 30-second intervals with smooth data transitions (no jarring reloads)
Kiosk mode: no login prompt, auto-authenticated for the control room role

Secondary: Tablet for Field Engineers

Field engineers carry tablets during equipment rounds. The tablet view adapts the dashboard for touch interaction and intermittent connectivity:

Single-column layout with swipe navigation between assets
Touch-friendly targets: minimum 44x44px tap areas
Offline capability: last-known asset states cached locally, diagnostic reports downloadable as offline bundles
Camera integration: capture photos of equipment conditions and attach to diagnostic events as annotations
Simplified navigation: bottom tab bar replacing the sidebar

Tertiary: Mobile for After-Hours Alerts

Mobile is not for monitoring — it is for notification and quick triage:

Push notifications for alarm-state changes with plain-language summaries
Swipe to acknowledge or escalate from the notification
Tap notification to see the Asset Health Card (single card view, no heatmap)
Quick-response actions: “I’ll handle it”, “Escalate to [name]”, “Monitor until morning”
Minimal data usage: text and numeric data only, charts loaded on demand

17.6 Accessibility

WCAG 2.1 AA Compliance

RAPID AI targets WCAG 2.1 Level AA as a minimum. This is both an ethical obligation and a practical one — industrial plants employ engineers of all abilities, and safety-critical software must be usable by everyone authorized to use it.

Color contrast: All text meets a minimum contrast ratio of 4.5:1 against its background. Large text (headings, hero metrics) meets 3:1. The dark-theme design system (light text on #020617-family surfaces) inherently provides high contrast, but every color combination is validated.

Keyboard navigation: Every interactive element — buttons, cards, table rows, chart controls, dropdown menus — is reachable and operable via keyboard. Tab order follows visual layout. Focus indicators are clearly visible (2px ring in the brand accent color). The Command Bar is accessible via Ctrl+K shortcut.

Screen reader support: Diagnostic results include ARIA labels that provide meaningful descriptions: not “red circle” but “Pump P-101, health score 62 out of 100, status Warning, bearing outer race spalling detected with 88% confidence.” Charts provide text alternatives summarizing the trend and current value.

High contrast mode: A toggleable high-contrast theme for control room environments with bright ambient lighting or for users who need stronger visual differentiation. Backgrounds become pure black, text becomes pure white, severity colors are intensified.

Configurable font sizes: Users can adjust the base font size from 14px (compact) to 20px (large) without breaking layouts. All sizing uses relative units (rem) so the entire interface scales proportionally.

Motion sensitivity: All animations respect the prefers-reduced-motion operating system setting. When reduced motion is active, entrance animations are replaced with instant appearance, pulse effects are disabled, and count-up number animations show final values immediately.

17.7 Interaction Patterns

Progressive Disclosure

The core interaction pattern across the entire platform. Information is layered:

Level 0 — Glance: Fleet health summary, alarm count, traffic-light cards. No interaction required.
Level 1 — Click: Select an asset card to open its detail panel. See SSI score, stability state, top failure mode, and recommended action.
Level 2 — Explore: Expand diagnostic sections to see sensor evidence, rule matches, confidence breakdowns, and the IMS rule trace.
Level 3 — Investigate: Open trend charts, reliability plots (Weibull, bathtub curve), and the full diagnostic timeline. Access the P-F interval visualization.
Level 4 — Act: Edit RCM workbook entries, create work orders, schedule maintenance tasks, export reports.

Each level loads only when requested — no up-front data loading for deep levels, keeping the initial dashboard render fast.

Contextual Help

Every metric, score, and abbreviation in the interface has a hover tooltip that provides:

Definition: What the metric measures (e.g., “SSI (System Severity Index): A weighted composite score from 0.0 to 1.0 representing overall machine health severity”)
Physics basis: Why this metric matters (e.g., “Derived from 22 Block Scoring Rules across vibration, temperature, process, and lubrication domains”)
Thresholds: Where the boundaries are (e.g., ”< 0.30 = Normal, 0.30-0.50 = Watch, 0.50-0.70 = Warning, 0.70-0.90 = Alarm, > 0.90 = Critical”)
Current context: How this asset’s value compares to fleet average

This eliminates the need for a separate help system or training manual for metric interpretation.

Comparison Mode

Engineers frequently need to compare two assets or two time periods. Comparison mode activates via a “Compare” toggle:

Asset comparison: Select two assets to display their health cards, trend charts, and diagnostic timelines side by side. Differences are highlighted.
Temporal comparison: Select two date ranges for the same asset. Overlay trend charts to visualize how behavior has changed — useful for verifying whether a maintenance intervention had the intended effect.
Baseline comparison: Compare current values against the as-commissioned baseline or against the fleet average for similar equipment types.

Annotation

Diagnostic events and trend charts support user annotations:

Engineers can add text notes to any diagnostic event (“Checked bearing — no visible damage yet, will monitor”)
Notes are timestamped, attributed to the logged-in user, and visible to all roles
Annotations appear as markers on trend charts and entries in the diagnostic timeline
Annotations persist as part of the asset’s diagnostic history and are included in exported reports

Export

The platform supports multiple export formats for different audiences:

PDF Reports: Formatted diagnostic reports suitable for management review or regulatory submission. Include Asset Health Card, trend charts, diagnostic timeline, sensor evidence, and recommended actions. Generated server-side with consistent formatting.
CSV Data Export: Raw data tables for engineers who want to perform their own analysis in Excel or MATLAB. Includes sensor readings, rule match results, SSI history, and RPN scores.
Email Digest: Configurable daily or weekly email summaries. Plant managers receive fleet health summaries; reliability engineers receive a watchlist of assets approaching alarm state.
CMMS Work Order Payload: Maintenance tasks exported in a format compatible with SAP PM, Maximo, or other CMMS systems. Maps the maintenance_action_tile contract fields to standard CMMS work order fields.

17.8 Design System Summary

The RAPID AI design system, as implemented in the production codebase, provides the foundation for all UI components described in this chapter.

Typography

Sans-serif: Inter — body text, labels, headings. Chosen for readability at small sizes on screens.
Monospace: JetBrains Mono — numeric data values, sensor readings, trace IDs, rule expressions. Monospace ensures digit alignment in data-dense tables.
Scale: display-lg through label-sm, with dedicated data-value sizes optimized for numeric readability.

Component Primitives

Component	Variants	Purpose
`.card`	default, elevated, glass	Asset Health Cards, diagnostic panels
`.badge`	severity (5 levels), health, trend	Status indicators throughout
`.btn`	primary, ghost, danger, analyze	Action triggers
`.data-table`	default, compact, interactive	RCM workbook, backlog, evidence tables
`.skeleton`	card, row, chart	Loading placeholder states
`RadialGauge`	270-degree arc	SSI score, health score visualization
`HealthBadge`	universal	Status pill for any health/severity/trend
`SignalWaveform`	canvas-rendered	Vibration signature thumbnails

Animation Tokens

All animations serve a purpose. Entrance animations (fade-up, scale-in) guide attention during page load. Status animations (pulse-ring for active alarms, breathe for critical states) maintain situational awareness. Data animations (gauge-fill, count-up) make numeric changes perceptible. The staggered 5-phase entrance sequence (useMountPhase()) ensures the dashboard builds comprehensibly rather than flashing into existence.

Every animation token respects prefers-reduced-motion. When reduced motion is active, the dashboard functions identically — only the transitional effects are suppressed.

Summary

The UI/UX design of RAPID AI is not a skin over the intelligence engine — it is the intelligence engine’s voice. The fifteen modules produce diagnostic results, reliability predictions, and maintenance recommendations. Without a clear, role-appropriate, accessibility-compliant, information-dense interface, those results remain trapped in JSON payloads and database rows.

The design principles in this chapter — clarity over aesthetics, progressive disclosure, semantic color with redundant encoding, glanceable dashboards, and role-specific filtering — ensure that when a pump starts failing at 2 AM, the engineer on duty knows about it, understands why, and knows what to do. In under 30 seconds. Without training. That is the standard industrial software must meet, and it is the standard RAPID AI is built to exceed.

Standards Alignment

Standard	Relevance to This Chapter
ISO 13374 — Condition monitoring and diagnostics of machines	The dashboard design implements ISO 13374 Level 6 (Advisory Generation) presentation requirements, ensuring that diagnostic results are displayed with sufficient context for informed maintenance decisions.
ISO 55000/55001 — Asset management	The role-based dashboard hierarchy (operator, engineer, manager, executive) supports ISO 55000’s requirement for appropriate information delivery to different organizational levels of asset management decision-making.

Changelog

Version	Date	Author	Changes
2.1.0	2026-03-17	Rick D	Added standards alignment, living doc metadata, changelog
2.0.0	2026-03-17	Rick D	Enriched with production codebase content
1.0.0	2026-03-17	Rick D	Initial chapter creation

UI/UX Design

Chapter 17 — UI/UX Design

17.1 Design Philosophy

Industrial UX Is a Different Discipline

The Two-Second Rule

Glanceable Design

17.2 Role-Based Dashboards

Operator Dashboard — The Simplified View

Reliability Engineer Dashboard — The Power User View

Maintenance Manager Dashboard — The Work Planning View

Plant Manager Dashboard — The Executive View

17.3 Key UI Components

Asset Health Card

Diagnostic Timeline

Sensor Evidence Panel

Risk Matrix

RCM Workbook Widget

Trend Chart

17.4 Data Visualization Principles

Semantic Color System

Never Color Alone

Chart Principles

Loading and Error States

17.5 Responsive Design

Primary: Control Room Desktop (1920x1080)

Control Room Mode

Secondary: Tablet for Field Engineers

Tertiary: Mobile for After-Hours Alerts

17.6 Accessibility

WCAG 2.1 AA Compliance

17.7 Interaction Patterns

Progressive Disclosure

Contextual Help

Comparison Mode

Annotation

Export

17.8 Design System Summary

Typography

Component Primitives

Animation Tokens

Summary

Standards Alignment

Changelog