The Journey at a Glance
Wireframe
Previous Design
The previous design was overcrowded and hard to interpret, making it difficult for operators to make quick decisions. The absence of branding also created inconsistency across EPCM systems, contributing to confusion and longer onboarding time.
Lo-Fi Wireframe
I met with engineers to identify the most critical information operators needed at a glance. To reduce cognitive load, secondary details were moved into menus and modals. We adopted a Windows-like layout to leverage familiar interaction patterns, helping operators transition more quickly.
DASHBOARD
1. Original Dashboard
The original HMI dashboard was overcrowded and difficult to interpret, making it hard for operators to quickly identify issues or understand system status.
2. Lo-Fi Wireframe
I focused on simplifying the layout to reduce cognitive load.
Clear color cues—like red indicators—help operators trace alerts back to the source quickly.
An alert icon was added so problematic areas are visible at a glance.
3. Wireframe Iteration
I met with engineers to understand which areas were critical and which could be hidden.
Requested 3D line-art assets of the robotics to map statuses more accurately.
Shared the wireframes with engineering to validate feasibility and functionality.
4. High-Fidelity Design
The final design provides a clean, simplified status view for faster decision-making.
A built-in tutorial option supports quicker training and onboarding.
I used a Windows-style layout to leverage familiar interaction patterns.
Brand colors and logos were added for consistency across EPCM systems.
High-Fidelity Design
Client Review
Client Meeting
We reviewed updated screens alongside the original design to ensure visual improvements aligned with operational requirements. Weekly prototype walkthroughs helped maintain alignment, clarify unclear workflows, and catch issues early before engineering handoff.
Prototype
A working prototype allowed us to validate the flow with engineers and operators before committing to development. Iterating in sprint cycles ensured that each update reflected real feedback, system constraints, and on-site usability needs.
Key Takeaway
