Dropbox Diagnostics Project

This project aims to design and develop an interface for displaying dropbox diagnostics on various levels of management. The interface will provide valuable insights into dropbox utilization and maintenance conditions, enabling users to understand usage patterns, identify over or underutilized drop boxes, and detect boxes that require maintenance or battery replacement. The project leverages real-time data provided by FedEx systems, where all drop boxes are connected online and send status updates every 15 minutes.

Team Members

• Anjal Gajurel (Lead)
• Jeevan Roka
• Joshua Tandio
• Raahul Pathak

Project Goals

1. Design a practical and easy-to-use interface: The primary objective is to create an intuitive and visually appealing interface that is easy for users to navigate and understand.
2. Reveal current dropbox utilization and maintenance conditions: The interface will provide insights into dropbox usage patterns, helping users identify areas of improvement and optimize resource allocation. It will also highlight drop boxes that require maintenance or battery replacement.
3. Real-time data integration: The system will integrate with FedEx systems to retrieve real-time data from all connected drop boxes. This ensures that the displayed information is up to date and accurate.
4. Mobile device considerations: The interface will be designed to accommodate mobile devices, considering potential limitations such as limited or no data coverage at times. This ensures usability in various scenarios.
5. User access control: Employees will have access to specific information based on their status or role within the organization. This ensures data security and confidentiality.

Design Decisions

The design decisions were made to enhance the overall appeal and usability of the project. The team aimed to create visually appealing interfaces that are intuitive and easy to navigate. Feedback and suggestions from users and stakeholders were considered during the design process to ensure the final design meets the project goals.

Changes Made to Final Design

Based on feedback and iterative design process, the following changes were made to the final design:

Desktop Design

• Added submit buttons to pages for improved user interaction.
• Included an additional "Report Maintenance" page to facilitate maintenance requests.
• Added another search page to display search results, enhancing user experience and efficiency.

Mobile Design

• Added filters and sort button to allow users to customize their view and prioritize specific diagnostics.
• Incorporated a priority order in the notification system to highlight urgent diagnostics, aiding in quick decision-making.
• Carefully considered background and color selection to ensure optimal readability and visual aesthetics.
• Presented dropbox diagnostic metrics in a uniform format for consistency and ease of understanding.

Disregarded Feedback

In the design process, all feedback received for the desktop design was carefully incorporated without disregarding any suggestions or recommendations. However, regarding the mobile design, the team decided not to change the notification alert to a chronological order. This decision was based on the belief that the urgency order provides better insights for diagnostic purposes.

Problems Encountered and Solutions

Throughout the project, the team encountered various challenges. Some of the problems faced and their corresponding solutions include:

Desktop Design

• Problem: Learning Figma, bootstrap, CSS, and resolving functionality issues.
  • Solution: Team members collaborated and supported each other by seeking help from one another and conducting online research to find solutions. This approach helped overcome the challenges and ensured the smooth progress of the project.

Mobile Design

• Problem: Learning Figma, bootstrap, CSS, and resolving functionality issues.
  • Solution: The team adopted a collaborative approach, assisting each other when facing difficulties. Online resources and documentation were used to find solutions to specific issues, ensuring a successful completion of the project.

User Manual

Please refer to the README.txt file in the repository for detailed instructions on how to use the software. The user manual provides comprehensive guidance for both the desktop and mobile interfaces.

Technologies Used

The project utilized the following software and third-party libraries:

• Prototyping:

  • Figma: Used for creating prototypes and wireframes.

• Final Design:

  • Visual Studio Code: Integrated development environment for coding and designing the interface.
  • Notepad++: Text editor for code editing and formatting.
  • Bootstrap v5: CSS framework used to create responsive and visually appealing designs.