In modern SCADA and HMI design, clarity and situational awareness are not just aesthetic goals — they are safety requirements. For this project, I designed Level 1 and Level 2 SCADA displays for a compact water purification system that includes raw water intake, UF/RO treatment, permeate storage, and two distribution lines.
My objective was to apply clean, modern UI/UX principles to create an interface that is intuitive, operator-friendly, and visually consistent across the hierarchy. These displays focus on clarity, quick decision-making, and seamless navigation between process layers.
This case study walks through the design considerations, layout decisions, and final outputs for both Level 1 and Level 2.
Understanding the Process
The system consists of:
- T1 – Raw water tank
- UF Unit – Ultrafiltration
- RO Unit – Reverse osmosis
- T2 – RO permeate storage
- T3 / T4 – Distribution tanks (Line A and Line B)
- P1–P4 – Transfer and distribution pumps
- Five isolation valves connecting tank inlets/outlets and distribution lines
Each component needed a clear representation that matched a minimal grayscale visual language, with soft state indicators and subtle color accents for alarms, warnings, and active flow.
Level 1: High-Level Overview
The Level 1 display functions as the operator’s at-a-glance dashboard. It answers two crucial questions:
- Is the system healthy?
- What needs attention right now?
To achieve this, I focused on four major elements:
1. Tank Summary Tiles
Each tank is represented as a simple vessel icon showing:
- Current level (%)
- A vertical bar indicator
- Tank label (T1–T4)
These tiles are intentionally minimal so operators can visually compare levels without reading numerical data.
2. Pump and Valve Status
I used compact tiles for pumps and valves, showing:
- Pump state (RUN/STOP)
- A color-coded state badge (green / gray / red)
- Valve position (%) with a horizontal position bar
This ensures operators immediately see which pumps are driving the system and how flow is distributed via the valves.
3. Alarm Summary Bar
A concise alarm block displays:
- Total active alarms
- Number of critical alarms
- Number of warnings
Each badge uses soft tones (green, orange, red) to keep the UI calm but informative.
4. Trends and System KPIs
The bottom portion of Level 1 contains:
Mini Trend Panels
- T1 Level
- RO Feed Pressure
These sparklines allow operators to spot rising or falling trends without drilling deeper.
System Status & KPIs
A small diagnostic panel displays:
- PLC status
- SCADA I/O health
- Network status
- RO/UF unit status
To support operational planning, I also included:
- Total raw water in
- RO permeate produced
- Distribution output
- Truck loading volume
- System losses
Level 1 Design Goals
The final interface successfully meets four key UI/UX goals:
✔ Clear system health overview
✔ Zero visual clutter
✔ Consistent monochrome visual language
✔ Immediate navigation into detailed Level 2 sections
Level 2: Process-Focused Detail
Where Level 1 emphasizes system health, Level 2 focuses on process understanding. It answers:
“How is the system behaving, and where is water flowing?”
This screen includes a full process-level layout showing major equipment, tanks, pumps, and valves — arranged in a left-to-right process flow.
1. Detailed Tank Cards
Each tank includes:
- Total volume
- Current % level
- Level in meters
- Calculated current volume
- Alarm thresholds (HIHI, LOLO)
These details help operators understand individual tank conditions without switching screens.
2. Pump Information Panels
For each pump (P1–P4), I displayed:
- State (RUN/STOP)
- Motor power (kW)
- Flow rate
- Discharge pressure
This allows efficient troubleshooting and performance monitoring.
3. RO and UF Instrumentation
The UF and RO sections include critical parameters:
- Feed conductivity
- Permeate conductivity
- RO recovery
- RO feed/concentrate pressures
- UF TMP
- pH
- Water temperature
This provides a complete picture of treatment unit performance in one location.
4. Full Flow Diagram
Level 2 shows the pathways between:
- Source → UF → RO → T2 → Distribution tanks → Pumps → Main line / truck fill
Valves and pumps are placed logically along these pathways to make the flow simple and visually intuitive.
Level 2 Design Goals
This display meets the following objectives:
✔ Present full process context
✔ Provide detailed numerical data
✔ Maintain consistent aesthetic with Level 1
✔ Help operators understand relationships between equipment
✔ Prepare operators for Level 3 device control (faceplates)
Color, Layout, and Iconography
I used a consistent design language throughout:
- Soft grayscale base
- Muted greens/reds/oranges for states and alarms
- Thin-line SVG icons for tanks, pumps, and valves
- Generous whitespace to reduce cognitive load
- Modular blocks for easy mobile/tablet adaptation
This yields a clean, modern SCADA interface that feels calm, organized, and professional.
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.
Conclusion
Designing Level 1 and Level 2 displays for this water treatment process required balancing clarity with detail, avoiding clutter while still presenting complete operational insight.
- Level 1 gives operators a calm, high-level view of system health.
- Level 2 dives deeper into process logic and equipment relationships.
These two layers form the foundation for a future Level 3 device faceplate, which I plan to design next.
This project highlights the impact of deliberate UI/UX decisions in SCADA environments — proving that industrial interfaces can be functional, safe, and beautiful at the same time.
