Designing SCADA HMIs is not simply arranging equipment icons on a screen—it’s about giving operators clarity, situational awareness, and confidence when something goes wrong.
In this article, I walk through how I designed a Level 1 and Level 2 display for a fictional 2-Phase Sand Separator process (inspired by the SegreTech demonstration video), focusing on:
✔ Modern HMI design principles
✔ Consistent functional graphics
✔ Alarm visibility and prioritization
✔ Trend integration
✔ A clean, operator-friendly layout built for Ignition Perspective or AVEVA
This design is part of my portfolio to demonstrate how I approach industrial UI/UX in real-world projects.
Understanding the Process (Context Before UI)
The sand separator removes sand from a multiphase flow (gas + liquids + solids). The key areas operators monitor are:
- Stage 1 Inlet Sphere
- Stage 2 Containment Sphere
- Gas outlet line
- Liquids outlet line
- Sand dump valves
- Choke valve
- Flow transmitters (FT-101, FT-102)
- Weight sensor (WT-201)
Before designing the screens, I mapped out:
process variables → visual representation → operator needs.
This is the heart of good HMI design.
Level 1 Display Design: “Alarm-Centric System Overview”
On this project, the Level 1 screen is not a piping diagram.
Instead, it acts as a high-level health and alarm overview for the entire two-stage separator.
Layout & Visual Hierarchy
The screen is organized into three main bands:
- Left:
- Two large vessels representing Stage 1 Inlet Sphere and Stage 2 Containment Sphere.
- Each sphere has a clear text label (stage name) and an adjacent status badge (NORMAL / CRITICAL, etc.) so operators can instantly see which stage needs attention.
- Middle:
- A pressure summary panel with PT-101, PT-102 and ΔP-201.
- Each card shows: current pressure, alarm state (Normal / Warning / HH – CRITICAL), and a “History” button concept for drilling into trends and past alarms.
- Right & Bottom:
- Devices panel with bar indicators for FT-101, FT-102, WT-201 and key valves (PCV-101, LCV-102, XV-201).
- Below and to the right are grouped alarm tables: flow transmitter faults, choke valve faults, dump valve faults, liquid control faults, weight sensor faults, and safety/system alarms.
This layout makes the operator’s scan path very clear:
Stage status → pressures → devices → detailed alarm causes and actions.
Alarm-First Philosophy
Level 1 is designed around the idea that “if something is wrong, show it immediately.”
- Alarm severities are shown with colored badges (Critical, High, Medium, Low).
- The vessels themselves remain neutral grayscale, so the eye is drawn to the alarm markers rather than decorative graphics.
- Safety and system alarms (ESD, comms loss, panel fault, air low) are grouped together to emphasize that these are different from purely process alarms.
Devices Panel as a Quick Health Check
The Devices section functions like a compact dashboard:
- Flow transmitters show percentage fill bars, ideal for understanding how “loaded” each path is.
- Valves show position bars or state text (POSITION / CLOSED).
- WT-201 shows a weight bar to indicate how full the sand collection is.
This gives the operator a “single glance” health check without leaving the Level 1 display.
Guided Troubleshooting with Fault Tables
On the right, fault tables are structured to support operator troubleshooting:
- Alarm – what tripped
- Source – which instrument
- Severity – priority and color badge
- Description / Cause / Operator Action – what’s happening, why, and what to do next
This reinforces that Level 1 is not just an alarm list; it is a guided view that already encodes operating procedures.
Level 2 Display Design: “Process Flow + Contextual Diagnostics”
The Level 2 screen provides a functional, process-oriented view of the two-phase separator. Unlike Level 1 (which is alarm-centric), Level 2 is designed to show:
- How the product flows through the system
- Where key transmitters and control valves are located
- Live values for pressure, flow, and weight
- A compact alarm table focused only on process alarms
- Local trends for operator context
This screen is meant for operators who need to move beyond “What is alarming?” and into “Where in the process is this happening?”
Process Flow Layout (Gas, Liquids, Sand)
The center of the screen is a simplified functional graphic showing the major process streams:
✔ Gas Line (black arrows)
Enters Stage 1 → travels through the vessel → exits via PCV-101.
✔ Liquids Line (gray arrows)
Feeds into Stage 1 → flows into LCV-101 → proceeds to Stage 2 → exits via LCV-102 toward FT-102.
✔ Sand Line (light gray arrows)
Drops from both spheres to XV-101 / XV-201 → to sand disposal.
All pipes follow a consistent grayscale scheme to match High-Performance HMI principles:
- Neutral for normal
- Color reserved only for alarms
This makes the process easy to scan without distracting decorative colors.
Instrumentation Placement & Live Readings
Key transmitters are positioned exactly where they exist in the flow:
- PT-101 at the inlet
- FT-101 on the gas-to-liquid crossover
- PT-102 at the second-stage vessel
- FT-102 on the downstream liquid line
- WT-201 below Stage 2 for sand accumulation monitoring
Each instrument bubble follows a consistent style:
- Circular outline
- Bold tag name
- Live alarm marker next to it
- Unit consistency (kPa, m³/d, kg, etc.)
This makes it instantly clear which instrument is in alarm and where it physically exists in the process.
Separator Vessels as Central Anchors
The two large vessel graphics serve as orienting anchors:
Stage 1 – Inlet Sphere
Shows where multiphase flow enters and begins the separation.
Stage 2 – Containment Sphere
Receives the partially separated product and continues the process.
Placing these vessels directly in the operator’s visual center creates:
- A “topology-first” interpretation
- Easy mapping from alarms to their physical location
- A logical mental model of flow progression
This is key for troubleshooting in real time.
Local Trend Panel (Flow Rate)
In the lower left corner is a localized trend for the gas/liquid flow rate (FT-101).
It displays:
- Last 1 hour of data
- Minute timestamps
- Simple line style with neutral color
This micro-trend helps the operator quickly answer:
- “Is the alarm new or building?”
- “Has something changed in the last 15 min?”
- “Is this a spike or a pattern?”
This reduces screen switching during urgent situations.
Targeted Alarm Table (Process-Only)
At the bottom of the screen is a small, curated alarm table showing only the alarms relevant to this Level 2 view:
| Alarm | Source | Severity | Description | Likely Cause | Operator Action |
Alarms include:
- Inlet Sphere Pressure High-High (PT-101)
- Inlet Sphere Pressure High (PT-101)
- Containment Sphere Pressure High (PT-102)
This keeps Level 2 clean and focused:
- Not all plant alarms
- Only alarms affecting the process flow and equipment shown on this screen
Operators can get alarm meaning, cause, and action without navigating away.
Color Usage and Status Indicators
Color is used only for:
- Alarm severity markers
- Arrow labels (“GAS”, “LIQUIDS”, “SAND”)
- The trend line
Everything else is intentionally neutral.
This avoids cognitive overload and amplifies the importance of alarms.
Ignition Perspective and AVEVA Enterprise SCADA Platforms
Common Planning Steps (Both Platforms)
- Define tag list for all instruments (PT-101, FT-101, WT-201, LCV-101, etc.)
- Group tags into UDTs / templates (Pressure Transmitter, Flow Transmitter, Control Valve, Weight Sensor).
- Decide navigation structure: Phase 1 / Phase 2 / Gas / Liquids menu + Level 1 / Level 2.
- Standardize alarm severities, colors, and text (Critical, High, Medium, Low).
In Ignition (Perspective)
- Create a Perspective project and main Page with a flex/column container for the layout.
- Build views:
Level1_Overview→ alarm-centric screen with spheres, Devices panel, alarm tables.Level2_ProcessFlow→ P&ID-style flow with arrows, transmitters, valves, mini-trend + alarm table.
- Import vessel/valve icons as SVGs bind:
- Fill color → alarm state property.
- Tooltips → tag description / PV.
- Create Embedded Views / reusable templates for:
- Instrument bubble (PT / FT / WT)
- Bar indicator (63% devices panel)
- Alarm table row.
- Configure tags in the Gateway (OPC / simulation device), enable Alarming on key tags with severity and message fields.
- Use tag bindings:
- Value, quality, and timestamp to labels and bars.
- Expression bindings to derive “NORMAL / CRITICAL” text and hex icons.
- Add Power Chart or Time Series Chart for the FT-101 mini trend using a historical tag binding.
- Configure Page Layout + docked views for the left navigation menu and header (“Hello, Michelle”).
In AVEVA Enterprise SCADA (OASys)
- Create a New Project (workspace for all graphics, tags, alarms, and navigation).
- Build your Level 1 and Level 2 screens as Graphics Pages (also called Mimics).
Graphics for Level 1
- Draw the two separator vessels (Stage 1 & Stage 2) using vector shapes or imported SVGs.
- Create the Devices panel using bar graphics linked to analog tags (FT, WT, valve positions).
- Insert alarm indicators using animation links based on tag alarm status.
- Add alarm summary tables with filtered views (Critical / High / Medium).
Graphics for Level 2
- Draw the P&ID-style process flow using lines, arrows, and symbols.
- Place PT-101, FT-101, WT-201, PCV-101, LCV-101, etc., with live value bindings.
- Add the mini trend by inserting a Trend Control and connecting it to FT-101 history.
- Add the small process-only alarm table at the bottom.
Tag Connections & Data
- Connect to PLCs or simulators via OPC DA/UA or IO Servers.
- Map process variables (pressure, flow, weight, valve position) to tag names.
- Configure alarms directly on tags (HI, HIHI, LO, LILO).
Animations & Binding
- Use Value Animations to change:
- Bar fill (percentage)
- Alarm icon color
- Valve open/close states
- Use Visibility animations to show/hide alarm markers.
Navigation
- Add buttons on the left (Phase 1, Phase 2, Gas, Liquids).
- Each button jumps to a different Mimic/Page using Navigation links.
View the Interactive Displays
If you’d like to see the Level 1 and Level 2 screens in full clarity, you can view them directly on my live demo page:
➡️ SCADA Display Portfolio – Michelle Alzola
This page is a simple viewer designed to showcase the UI/UX layout only.
The displays are static and do not represent a functioning SCADA system—they are visual mockups intended for portfolio demonstration purposes.
Closing
Designing Level 1 and Level 2 displays for a two-phase sand separator allowed me to demonstrate the principles I value most in SCADA UI/UX: clarity, consistency, and operator-focused decision support. Whether the interface is built in Ignition or AVEVA Enterprise SCADA, the goal remains the same—to present the process in a way that is easy to understand under normal conditions and even easier to interpret during abnormal or high-pressure situations.
By combining functional graphics, structured alarm logic, meaningful color usage, and intuitive navigation, these screens illustrate how modern HMIs can enhance situational awareness without overwhelming the operator. This project reflects how I approach industrial design: start with the process, understand the operator’s needs, and translate those insights into clean, reliable, and scalable SCADA displays.
