Sierra Monitor Corporation (SMC) required a modern, responsive web app, FieldVEU, to enable real-time monitoring and management of connected devices in their Industrial Internet of Things (IIoT) ecosystem. My goal was to design an intuitive UX/UI across 20 screens, ensuring seamless functionality for both desktop and mobile users, while empowering facility managers and field technicians with clear visibility into device performance and alerts.

I began by researching the needs of SMC’s primary users—facility managers and field technicians—who manage industrial devices like boilers and power meters. Through user interviews and feedback analysis, I identified key pain points: complex navigation, lack of mobile accessibility, and the need for quick, actionable insights. My approach focused on creating a streamlined, user-centered design with a clear visual hierarchy, prioritizing real-time data access and alert management.

The visual style was chosen to reflect the industrial, tech-driven nature of IIoT while ensuring usability. I opted for a minimalist design with a clean color palette: whites and light grays for the background, blue accents for interactivity, and color-coded alerts (green for normal, yellow for attention, red for alerts) to provide instant visual cues. The typography, using Google Fonts’ Roboto, was selected for its readability and modern aesthetic, ensuring clarity across devices. Icons were kept simple and universally recognizable to reduce cognitive load for users in high-pressure environments.

The process unfolded in several stages:

Wireframing: Using Figma, I created low-fidelity wireframes to map out the 20 screens, focusing on navigation flow and layout consistency.

Prototyping: I developed interactive prototypes in Adobe XD to test user flows, ensuring intuitive transitions between screens like the dashboard and settings.

High-Fidelity Design: I refined the designs with the chosen style, incorporating feedback from SMC stakeholders to ensure alignment with their brand.

Usability Testing: I conducted tests with mock users to validate the design, iterating on elements like button placement and alert visibility.

Responsive Design: I adapted layouts for mobile, using a stacked approach to ensure functionality on smaller screens without sacrificing usability.

Collaboration with the SMC team was managed via Trello, ensuring timely feedback and alignment throughout the project.

Ensuring the app’s 20 screens were equally functional on desktop and mobile was a significant challenge, especially for data-heavy screens like the dashboard. I solved this by using a grid system for desktop layouts and a stacked, vertical layout for mobile, maintaining consistent navigation. For example, the dashboard’s device list was collapsible on mobile to save space while keeping all data accessible.

Industrial users needed detailed device metrics (e.g., pressure, temperature, cycle count) without feeling overwhelmed. I addressed this by implementing a tabbed interface for detailed insights, allowing users to switch between views like historical trends and real-time data. Visual elements like gauges and line charts were used to present data intuitively, reducing the need for excessive text.

SMC required an admin console for enterprises to customize the app’s appearance, but providing flexibility without complicating the interface was tricky. I designed a drag-and-drop admin console with predefined templates, allowing users to adjust themes, layouts, and fonts while maintaining a professional structure. This ensured ease of use while meeting enterprise branding needs.

The app includes a Contact Us screen for direct communication via phone or email, designed with large, actionable buttons to enhance accessibility. Supporting screens for notification logs, password changes, and account management provide essential tools, all maintaining a consistent and accessible interface across devices.

The FieldVEU web app design for Sierra Monitor Corporation delivered a user-friendly, responsive platform that enhances device monitoring and management in industrial settings. The minimalist style and intuitive design improved usability, while the admin console provided flexibility for enterprise clients. A key takeaway was the importance of iterative testing in ensuring responsive design meets user needs across devices. If I were to iterate, I’d explore integrating predictive analytics to anticipate device issues, further enhancing operational efficiency.

Reach out to us at rockmuse.co or send us a message at hello@rockmuse.co

Let’s create something meaningful together!