Designing a device monitoring tool to improve remote diagnostics and troubleshooting
PRODUCT DESIGN . ENTERPRISE DASHBOARD DESIGN
CONTEXT
Praan is a deep-tech company that develops filterless air purifiers for commercial and industrial spaces. This project focused on designing of a monitoring and diagnostic dashboard for their first product, MKOne. The dashboard was built for the technicians to track and manage devices across iPad and desktop.
MY ROLE
I designed Version 1 of the monitoring and diagnostic dashboard for the MKOne device, focusing on UI/UX design, information architecture, and user workflows
TEAM
UX/UI designer,
front-end developer, back-end engineer
front-end developer, back-end engineer
COMPANY
Praan Inc.
UNDERSTANDING THE PROBLEM SPACE
When Praan was in its early stages, technicians faced several challenges, including diagnosing device malfunctions.
Scenario
A technician needs to check why an air purifier at a client’s site has stopped functioning.
Issue
Without remote monitoring, they had to physically visit the location to diagnose the issue. This increased operational costs, slowed down troubleshooting, and limited scalability.
The goal was to simplify this process, allowing technicians to identify and troubleshoot issues quickly without on-site visits.
I had a huge constraint– I had very less domain knowledge in environmental technology & IoT.
Technicians follow specific steps to diagnose and fix device issues, like checking sensor data, identifying failures, and performing remote resets. Without prior experience in air purification systems, it was difficult to map out their exact process.
DESIGN PROCESS
The project was split into two phases: Phase 1 focused on designing the dashboard for iPad with core features for real-time monitoring, and Phase 2 expanded the design to desktop, incorporating enhancements based on usability feedback. Each phase played a crucial role in refining the tool to better support technicians in their workflow.
Phase 1– Device Monitoring Dashboard for iPad
Phase 1 focused on creating the first version of the monitoring and diagnostic dashboard for iPad. The goal was to give technicians a way to track and manage MKOne devices remotely. This version introduced core features like real-time monitoring, device diagnostics, and user management, helping the team understand what was needed and what worked best. It also laid the groundwork for future improvements by gathering feedback from actual users.
1. The user logs in and gets a quick snapshot of key metrics like the number of active devices and no of total devices, and also get a QR code to pair new devices easily.
2. User can view all devices and their details such as the live status, name of the technician who deployed it.
3. User can view all the locations where the hardware devices are deployed / paired, and also can add a new location.
4. User can see the list of admins / technicians, and an option to add or edit their information.
How I approached the design–
The process followed a linear design approach, with the ultimate goal of understanding the device, the technicians’ challenges, and their needs. Each step built on the previous one, ensuring that the final solution was intuitive and effective for real-world use.
What I learnt–
Scenario-Based User Flows Are Crucial
Mapping out user flows helped me understand how technicians interact with the dashboard.
Addressing Edge Cases is Essential
Any issue in the system directly impacts device health, so designing for error states minimized disruptions.
Simplicity in UX is
Key
Key
Keeping the interface straightforward was critical for technicians to handle emergencies efficiently.
Phase 2– Device Monitoring & Diagnostic Dashboard for Desktop
Phase 2 focused on making the dashboard responsive for desktop and refining the design based on feedback from Phase 1. Technicians needed better visibility of client data, enhanced device details, and a more structured way to manage devices. This phase introduced an improved overview screen, a detailed device insights section, and additional features for managing clients and devices.
FEATURE
The user gets an overview of all client locations with an option to add new clients, making it easier to manage multiple locations.
WHAT IS IMPROVED
The final design prioritized client details for easier management. Originally, the home screen showed device metrics, but technicians needed faster access to client locations.
FEATURE
The user can view all paired devices in a list and has the option to add new devices when needed.
WHAT IS IMPROVED
A streamlined "Add Device" option was introduced, making it easier to expand and manage device lists.
FEATURE
The user can access detailed device information, including an air quality index graph, and can edit device details such as the device name.
WHAT IS IMPROVED
Additional air quality graphs and editable device details were included, providing technicians with richer insights and greater control over devices.
How I approached this design–
In this phase, I refined the information architecture, prioritized client data and device insights, and adapted the UI for responsiveness. A second round of usability testing ensured a seamless transition before finalizing the high-fidelity prototype.
What I learnt–
Scalability is
Essential
Essential
Designing with future expansion in mind made it easier to adapt the dashboard for desktop without disrupting the user experience.
Designing for Info-Heavy Interfaces
Structuring large amounts of data effectively was crucial to ensure clarity, quick access, and ease of use for engineers.
Usability Testing is Crucial
Direct feedback from technicians helped refine navigation, prioritize critical information, and enhance overall usability.
IMPACT
The tool helped technicians remotely diagnose issues and track device performance in real-time, reducing troubleshooting delays, that previously required manual checks and on-site visits, increasing the overall operational efficiency.
NEXT PHASES
Expanding to a Scalable Diagnostic Tool
Version 2 evolved beyond MKOne, allowing the dashboard to function as a diagnostic tool for other devices introduced by Praan. This made it more versatile, enabling engineers to monitor and troubleshoot multiple devices from a single platform, improving efficiency across different products.
Introducing Role-Based Access Control
To improve accessibility and control, Version 2 introduced role-based access control (RBAC), allowing different user roles such as Administrator, Technician, and other stakeholders. This ensured that each user had the appropriate permissions, streamlining device management and enhancing system security.
