Geeks - Prototype Design

[Team_Geeks]

Catalogue

• I. Analysis of key points and challenges that may arise
• II. Contribution
• Division of Contribution
• Cooperating Methods
• Teammate evaluation
• Photo of Discussion
• III. Link to Interface Design & Tools
• IV. Interface Design
• Login
• Dashboard
• Device Management
• Device Map
• User Information
• V. Analysis of key points and challenges that arose during the assignment.
• VI. Link to Presentation Slides

Which course does this assignment belong to	MIEC EE304FZ
Where are the requirements for this assignment?	https://bbs.csdn.net/topics/617468304
Team Name	Geeks
The objective of this assignment	Prototype design
Other Reference Documents	NA

I. Analysis of key points and challenges that may arise

1. Data Visualization and Chart Design: The device data display interface needs to effectively present multiple data points and multiple line charts. Designing how to layout and present this information to ensure users can easily understand and analyze the data is an important challenge.

2. Map Integration and Device Positioning: The map interface requires integrating map services and displaying the location and relevant information of devices on the map. Ensuring accurate device positioning and correct icon display may require integration with map APIs and data processing.

3. Consistency in Device Management and User Information: Ensuring data consistency between the device management interface and the user personal information management interface is a key challenge. Any changes or updates should correctly reflect on the relevant interfaces to avoid data inconsistencies.

4. Interface Aesthetics and User Experience: To provide a good user experience, the interface design should be visually appealing, easy to use, and meet user expectations. Considerations for color, layout, icons, and overall aesthetics should be made in the design.

5. Mobile Device Compatibility: Ensure that the design displays properly and provides a similar user experience on screens of different sizes and on various devices. This may involve responsive design and layout adaptation.

6. Security: Ensuring the security of managing user personal information and device data is crucial. Data transmission and storage security must be in place to prevent potential data breaches and unauthorized access.

7. Performance and Speed: When dealing with large amounts of data and maps, performance may become an issue. Ensure that the system responds quickly and does not cause interface lag or delays.

8. User Feedback and Testing: User feedback is essential to ensure interface usability and user satisfaction. During the design process, timely gathering of user feedback and testing to address potential issues is critical.

II. Contribution

Division of Contribution

Student ID	Work Description	Contribution
832101210 孙逊	Mobile Client Interface design, Blog post, progress management	12%
832101209 孙仲恒	Front end interface design (overall management), Project management	11%
832101112 范文卓	Front end interface design (User info design), Embedded system development	11%
832101325 黄家成	Front end interface design (Device management interface design), Embedded System Development, Backend Development	11%
832101117 周玥	Front end interface design (Device map interface design), Quality Control	11%
832101305 许嘉森	Front end interface design (Device adding interface design), Frontend Development	11%
832101225 姚依林	Front end interface design (Device management interface design), Document management, Embedded system development	11%
832101219 林泳坤	Front end interface design (Main overview interface design), Project planning & management	11%
832101230 蔡心林	Front end interface design (Device info interface design), Product Promotion	11%

Cooperating Methods

1. Information Sharing and Collaborative Work: Team members need to maintain effective communication and share information to ensure that everyone is aware of the project's progress and requirements. Sun Xun is responsible for mobile client interface design and needs to collaborate closely with the front-end design team (Sun Zhongheng, Fan Wenzhuo, Huang Jiacheng, Zhou Yue, Xu Jiasen, Yao Yilin, Lin Yongkun, Cai Xinlin) to ensure that the design aligns with practical development.

2. Project Management and Progress Tracking: Sun Zhongheng and Lin Yongkun are responsible for project management, and they need to coordinate the work of team members, set timelines, and track progress. This requires collaboration with all team members to ensure that the project proceeds according to the plan.

3. Cross-Team Collaboration: The front-end design team (Sun Zhongheng, Fan Wenzhuo, Huang Jiacheng, Zhou Yue, Xu Jiasen, Yao Yilin, Lin Yongkun, Cai Xinlin) needs to collaborate to ensure consistency and coordination in interface design across various aspects. They need to share design resources, provide feedback, and resolve design issues together.

4. Technical Collaboration: Team members like Fan Wenzhuo, Huang Jiacheng, and Yao Yilin, who are involved in embedded system development, need to work closely to ensure the interoperability between the mobile client and the embedded system. They need to address technical challenges and share technical resources.

5. Quality Control and Product Promotion: Zhou Yue and Cai Xinlin are responsible for product quality control and promotion. They need to collaborate with other team members to ensure that the product meets quality standards and assist in promoting the product.

Teammate evaluation

• 蔡心林

  Cai XinLin demonstrated exceptional talent and creativity in the front end interface design, especially in the Device Info interface. His attention to detail and innovative approach truly enhanced the user experience. Additionally, his work on Product Promotion showcased his marketing prowess, effectively capturing the product's essence. Cai XinLin's dedication and skills significantly elevated our project. Well done.

• 林泳坤

  Lin YongKun exhibited outstanding dedication and creativity in crafting the main overview interface design. His meticulous planning and project management skills ensured a smooth workflow. Faced with challenges, he displayed remarkable problem-solving abilities, making our design process incredibly efficient. His contribution significantly enhanced the team's progress. Great job.

• 黄家成

  Jiacheng Huang designs interfaces, develops systems, and builds backends. He creates user-friendly and elegant interfaces, reliable and efficient systems, and robust and scalable solutions. He codes well, solves problems, and works with the team. He values quality, performance, and security. Jiacheng Huang is a key and amazing member of our project.

• 周玥

  She has the ability of interface design, according to user needs and product requirements to design the interface that meets the requirements. She is very responsible for overall quality control. Well done.

• 姚依林

  She is adeptness in crafting user-centric front-end interfaces, coupled with her rigorous documentation and proficiency in embedded systems, greatly enhances the project's excellence. Her work is commendable and indispensable.

• 孙仲恒

  Zhongheng Sun is a superb Front End Interface Designer and Project Manager for our project. He combines excellent design skills and management acumen to produce outstanding results. His designs are creative, intuitive, and user-friendly, while his management is organized, efficient, and collaborative. He is a problem solver, a leader, and a helper for the team. He is committed to quality, excellence, and teamwork. Zhongheng Sun is a valuable asset to our project and a role model for the team. We appreciate his remarkable contributions and look forward to more.

• 孙逊

  Xun Sun is a skilled Mobile Client Interface Designer, Blog Post Writer, Progress Manager, and Team Leader. He creates attractive and adaptive interfaces, writes informative and engaging posts, monitors and reports on the project’s status, and coordinates and motivates the team. He values quality, innovation, and teamwork. Xun Sun is a vital and inspiring member of our project.

• 范文卓

  Wenzhuo Fan is a talented Front End Interface Designer and Embedded System Developer. He designs the user info interface, develops the embedded system, and codes proficiently. He creates user-friendly and elegant interfaces, reliable and efficient systems, and secure and scalable solutions. He solves problems and works well with the team. He cares about quality, performance, and security. Wenzhuo Fan is an important and remarkable member of our project. We praise him for his great work and hope for more.

• 许嘉森

  Jiasen Xu is a skilled Front End Interface Designer and Frontend Developer for our project. He designs the device adding interface, which allows users to easily add and configure their devices. He also develops the frontend, using modern web technologies and frameworks to create interactive and responsive web pages. He has a good sense of design, a strong knowledge of web development, and a high level of coding proficiency. He is a creative thinker, a fast learner, and a team player. He is committed to quality, usability, and security. Jiasen Xu is an essential and admirable member of our project.

Photo of Discussion

III. Link to Interface Design & Tools

Figma is used for designing the interface.

Link to Android Mobile Interface

Link to Web Interface

IV. Interface Design

All the interface designs are completed and under development.

Login

The device management interface is designed to efficiently handle and organize devices, presenting crucial details such as Device Name, Device ID, Device Type, Number, and Action. Users can employ the search box in the top left corner to find specific devices using keywords. The bottom left corner displays the total count of devices, providing users with an overview. Moreover, the selection box on the right allows users to filter devices based on their respective groups. Adding new devices is made simple with the "Add New Item" button. The pagination feature at the bottom right enables users to customize the number of pages displayed.

Design Difficulties and Solutions

1. Data Visualization: Presenting a large amount of device information in a clear and organized manner to ensure users can quickly comprehend and access the required details.

2. Search and Filtering: Designing efficient search and filtering functionalities to enable users to locate specific devices and filter them based on various criteria, such as device type or group.

3. User Experience and Interface Layout: Creating an intuitive and user-friendly interface layout that facilitates easy navigation, seamless interaction, and provides clear feedback to enhance the overall user experience.

4. Device Attribute Modification: Designing a user-friendly mechanism that allows users to easily modify and update device attributes as needed.

5. Pagination and Navigation: Implementing effective page navigation and pagination features to enable users to navigate through a large number of devices effortlessly.

Dashboard

Description and introduction of components:

1. Top Welcome Tip:
  This component was designed to provide a friendly welcome message to personalise the administrator's experience. User-friendliness has been taken into consideration while designing to ensure that the welcome prompt language is friendly and concise, giving administrators a comfortable experience.

2. Statistical elements:
  Number of Alerts Today, Number of Alerts Resolved, Number of Pending Resolutions: these elements provide immediate system status to help administrators understand the day's environment. The design needs to ensure that these numbers are clear and easy to read, possibly using eye-catching colours and large fonts.

3. Year-on-year change:
   this element provides a comparison with the previous period, helping administrators to understand how the system is trending. Attention needs to be paid here to the accuracy of the data and easy-to-understand presentation.

4. Alarm Change Chart:
  The design needs to focus on the timeliness and visualisation of the data to ensure that the chart clearly presents the trend of the alarms. Use intuitive graphs to represent the month's data and ensure consistency of data points.

5. Up-to-date environmental reports or news:
  This section provides administrators with up-to-date information to help them understand critical events in the system. It ensures that the information is timely and also provides a short summary for users to quickly navigate through.

6. Alarm Ring Area Chart:
   This chart visualises the proportions of different types of alarms, using the size of the area to express quantitative relationships. It should be designed to ensure that the proportions of the areas of each section are accurate and that clear colours are used to differentiate between different types of alarms.

7. Right Function Bar:
  Basic Function Column: Provide standard operation buttons, make sure the buttons are highly identifiable, and make it easy for users to quickly find the functions they need.
  Online hot content column: Display hot messages, information of active devices, ensure real-time update of information, and provide concise display form at the same time.
  Notification Bar: Display system notifications with eye-catching alerts to ensure that administrators can see important notifications in a timely manner.
  Help Documentation: Provide links to user manuals or help documentation to ensure that the content of the documentation is complete and easy to understand, making it convenient for users to get help at any time.

Design Idea: The core idea of the design was to provide an intuitive, easy-to-understand interface that would present the key information about the system to the administrator in the clearest possible way. The choice of colours needed to match the user's visual comfort while highlighting key information. The layout is chunked to ensure that there are clear boundaries between the modules and to avoid mixing up the information. Responsive design was also a consideration to ensure a good user experience across different devices.

Device Management

Description and introduction of components:

The device management interface is designed to efficiently handle and organize devices, presenting crucial details such as Device Name, Device ID, Device Type, Number, and Action. Users can employ the search box in the top left corner to find specific devices using keywords. The bottom left corner displays the total count of devices, providing users with an overview. Moreover, the selection box on the right allows users to filter devices based on their respective groups. Adding new devices is made simple with the "Add New Item" button. The pagination feature at the bottom right enables users to customize the number of pages displayed.

Device Map

This interface is a device tracking management system design, including map and device list two main parts. The map section is located on the right side of the interface and shows a blue line connecting the two locations. The panel on the left lists two devices.

User Information

This interface is a user's personal information management design, including user name, profile picture, organization, contact information these basic information. Below the user name will be the IP address and the time the user registered. The Edit information button in the upper right corner is used to modify the original information. The Settings button is used to switch accounts. Specific user information will be displayed in the middle of the entire page. On the right side, you can view system notifications, message settings, and other information.

V. Analysis of key points and challenges that arose during the assignment.

1. Data Visualization and Chart Design: The device data display interface needs to effectively present multiple data points and multiple line charts. Designing how to layout and present this information to ensure users can easily understand and analyze the data is an important challenge.

2. Map Integration and Device Positioning: The map interface requires integrating map services and displaying the location and relevant information of devices on the map. Ensuring accurate device positioning and correct icon display may require integration with map APIs and data processing.

3. Consistency in Device Management and User Information: Ensuring data consistency between the device management interface and the user personal information management interface is a key challenge. Any changes or updates should correctly reflect on the relevant interfaces to avoid data inconsistencies.

4. Interface Aesthetics and User Experience: To provide a good user experience, the interface design should be visually appealing, easy to use, and meet user expectations. Considerations for color, layout, icons, and overall aesthetics should be made in the design.

5. Mobile Device Compatibility: Ensure that the design displays properly and provides a similar user experience on screens of different sizes and on various devices. This may involve responsive design and layout adaptation.

6. Security: Ensuring the security of managing user personal information and device data is crucial. Data transmission and storage security must be in place to prevent potential data breaches and unauthorized access.

7. User Feedback: User feedback is essential to ensure interface usability and user satisfaction. During the design process, timely gathering of user feedback and testing to address potential issues is critical.

VI. Link to Presentation Slides

Presentation File