UX Design Portfolio
Technical Troubleshooting Tool
This is a package solution for our hardware product dealers to streamline their technical troubleshooting process.
What is the problem?
As an IoT solution company, we specialize in providing meticulously designed IoT devices and sensors, accompanied by a user-friendly mobile app that seamlessly transforms living spaces into smart homes. These IoT devices allow users to remotely monitor and control their appliances through internet-connected devices.
Being fully engaged in both hardware and software development, we have established partnerships with a wide network of authorized dealers and retailers. This enables us to make our smart devices more readily available to customers. However, when customers encounter technical issues, they often turn to the point of purchase for assistance. Unfortunately, without the necessary information and technical expertise, our partners are unable to resolve these difficulties, leading to the majority of issues being redirected back to us for solutions.
Undoubtedly, the debugging process can be time-consuming and require significant effort from all parties involved.
Who are the users?
Our partnership with dealers and retailers selling our IoT products often encounters challenges as they lack the expertise to address and identify root causes of technical problems. Consequently, they heavily rely on us for technical support, leading to an additional burden in our daily workflow. However, this extra workload can be effectively managed or even minimized by providing a comprehensive and packaged solution to our partner dealers and retailers.
What is the design challenge?
To enhance the efficiency of the troubleshooting process, it is essential to provide our business partners with a mechanism that offers comprehensive information regarding the status of our IoT products when they encounter unexpected difficulties. This tool will empower users to accurately identify the root causes of technical problems and provide systematic approaches for resolving those issues, streamlining the overall problem-solving process.
What is the solution?
How might we save our business partners guesswork at the troubleshooting steps? How might we help our business partners solve technical issues on their own?
I design an operational dashboard that provides users with a global overview, with access to essential data, functions, and controls.
This tool consists of two pages-- Smart Home Overview and Device examination.
Smart Home Overview
The overview page presents a home profile along with a tabulated list of IoT appliances, each represented by color-coded levels indicating their current status. This design allows users to quickly grasp the information at a glance. To optimize user experience, the dashboard utilizes a card-based layout, ensuring easy navigation even when a home has numerous devices. Users can expand the device list panel with a single click, while the home profile and push notifications remain collapsed for a natural and organized view. The device list is automatically sorted alphabetically but can be easily rearranged based on other specific criteria. Additionally, users can leverage the filter feature and search bar to quickly isolate relevant items by selecting preferred categories.
Moreover, our mechanism includes a push-notification feature that enables customer service specialists to send personalized clickable notifications, containing shortened URLs, to customers for tailored technical support or troubleshooting updates. This facilitates efficient communication and timely assistance.
Device Examination
The detailed examination of a selected smart appliance within our mechanism encompasses access to logs and customized settings, facilitating effective problem diagnosis. Additionally, it empowers users with remote control capabilities such as "reboot" or "reset" to instantly manage the device's performance.
To provide a clear visual indicator, the border color of this panel reflects the current status of the device. This container is synchronized with the toolbar above, dynamically displaying the relevant content based on the selected action button. With a fixed width, we maximize flexibility in terms of height to ensure easy scanning of information.
Given the abundance of details and lengthy information contained in device logs, I have implemented an Expand button within this widget. This allows users to open a new window for viewing the logs in full-screen mode, as valuable clues are sometimes concealed within the smart device's event logs. Additionally, for time-related issues, our Calendar feature proves highly useful. Users can select a specific date range to swiftly navigate to the relevant period of logs.
Set Up Devices for Customers
IoT devices often come with extensive customization options, which can be overwhelming for new users. Typically, troubleshooting tools only grant users access to check the current settings of devices for problem diagnosis. However, to provide a comprehensive service, our technical staff has the capability to personalize specific devices based on customers' specific requirements, but only after obtaining their explicit consent. The app includes an authorization procedure for customers to complete, and once done, a previously hidden button, "New Settings," becomes visible for customer service representatives to make adjustments to the device settings.
To enhance usability, we have implemented a collapsible panel that allows users to fold the settings panel while in the midst of device setup, enabling them to review other device information before making any changes. This feature provides flexibility and convenience during the setup process.
Product Highlights
01
Make the dashboard interface scannable
We don't want our users to be overwhelmed by the massive information flow so making the contents speak in different volumes is crucial. Therefore I use mixed fonts, colors, and blocks to display data.
02
Have all the accesses available with the fewest clicks
Customer support is a very time-sensitive task. We want our users to be able to solve issues in the littlest time. I categorize the data and place them in multiple panel cards with navigation tabs to make all data easily accessible by switching tabs in the corresponding panel.
03
Visualize complex information
By differentiating the various conditions of smart devices with color coding, which is understandable universally.