Project Vision

A field device monitoring system designed for administrators anddevice monitoring personnel. In addition to monitoring, the content alsoincludes functions such as electricity usage inquiry, operation inquiry, andasset management, which can be applied to any large field.

Challenges

1 We assist Panasonic in optimizing and developing BtoB webinterface design.
2 Conduct stakeholder interviews and address pain points.
3 Complete usability testing and two product iterations within twomonths.

Why

In modern large-scale fields, including industrial plants, corporate office buildings, science and technology parks, the operation and performance of equipment are directly related to the overall smoothness and efficiency of operation. In order to manage these complex fields more effectively, we plan to develop a comprehensive device monitoring system specifically designed for administrators and device monitoring personnel.

What

We investigated pain points that internal personnel and external customers may encounter and identified gaps in the user experience: Interface lacks three-dimensional sense, Function operation is not easy to operate on one page, Instant message prompts such as system malfunctions, not clearly visible, Uneven manpower allocation, with only one person in the front-end and gateway, It is difficult to plan the cross domain part of the page process.

How

Reduce modular developmentcosts: Using system information architecture restructuring and functional classification, adopting a modular development approach to separate programs with different functions, making debugging and maintenance easier.

Usability Testing

Conduct multiple interviews with stakeholders, communicate with project managers and planners, understand customer needs, and begin planning wireframes for interface process testing.

Two version iterations

Mainly make visual adjustments based on customer's different field requirements, design GUI and main color scheme, propose three versions of visual proposals with the client, and confirm the placement of device icons.

Front-end programcollaboration

Before being launched, the team members responsible for the front-end and back-end engineers had intensive discussions and completed the breakpoint design for responsive web screens, computers, tablets, and phones.

RWD Design

Provide responsive web design in four or more sizes, including high-definition screens, desktops, laptops, tablets, and smartphones, and provide standardized recommendations.