Device Center Desktop
Home > Device Center Desktop
Overview ｜ Flowchart ｜ Wireframe ｜ Mockup ｜ UI Style Guide
Overview
Device Center is a management tool for batch configuration of monitor devices, which can significantly save time and human resources. (I think no one wants to set up hundreds of cameras one by one) The primary functions are to adjust settings and monitor the health status of equipment without going to the site in person.
? The Design Goal
Because this project is a centralized management tool, the main operation is batch configuration, and there will be many settings, lists, and states. Therefore, I think the biggest challenge in Graphical User Interface (GUI) design is how to use visual skills to present the information moderately.
Unlike previous User Interface (UI) designs, I want to use as few lines as possible to separate information, reduce visual overload and create an elegant and modern feeling about this product.
? My Role
It is a team project and I am responsible for GUI designs and some UI designs in collaboration with other UI designers.
?️ Project Info
Project Duration：4 Months
Total functions：12 Functions
Product scale：100+ Screens
Categories：UX / UI Design, Windows, Desktop
Overview ｜ Flowchart ｜ Wireframe ｜ Mockup ｜ UI Style Guide
Flowchart
The flowchart clarifies the relationships between pages and ensures all required functionality. Therefore, it is an essential basis for drawing the wireframe.
Overview ｜ Flowchart ｜ Wireframe ｜ Mockup ｜ UI Style Guide
Wireframe
I provided the wireframe to the product team to ensure a thorough and complete understanding of the overall designs. The design document includes the release note, wireframe, operating instruction and multi-language string table.
Overview ｜ Flowchart ｜ Wireframe ｜ Mockup ｜ UI Style Guide
Mockup
I usually test the variances between visual elements on Mockup and provide the final accurate visuals of the product to the product team. This assists immediate understanding between stakeholders on final products.
Overview ｜ Flowchart ｜ Wireframe ｜ Mockup ｜ UI Style Guide
UI Style Guide
I have built a UI Style Guide that details all necessary guidelines and organizes UI elements in efforts to achieve efficient communications and collaborations with the product team and ensure the alignment between the products’ looks and feels.
