Visual Interface Workflow Management System Strengthening Data Integrity and Project Tracking in Complex Processes

Manual notes and scattered messaging applications used in managing business processes compromise data integrity and abstract project tracking. In this study, an integrated system that works simultaneously on web and mobile platforms has been developed to enable individual users and teams to manage their workflows with concrete data. The system architecture integrates MongoDB, which stores data in JSON format, Node.js Express.js on the server side, React.js on the web interface, and React Native technologies on the mobile side. The system interface is designed around visual dashboards that track the status of tasks (To Do-In Progress-Done). The urgency of tasks is distinguished by color-coded labels, and dynamic graphics (Dashboard) have been created for managers to monitor team performance. The usability of the system was tested with a heterogeneous group of 10 people consisting of engineers, engineering students, public employees, branch managers, and healthcare personnel. In analyses conducted using a 5-point Likert scale, the organizational efficiency provided by the system compared to traditional methods was rated 4.90, while the visual dashboards achieved a perfect score of 5.00 with zero variance. Additionally, the ease of interface use was rated 4.65, and overall user satisfaction was calculated as 4.60. The findings show that the developed system simplifies complex work processes and provides a traceable digital working environment for Small and Medium-sized Enterprises and project teams.

💡 Research Summary

The paper addresses the persistent problem of fragmented, paper‑based and instant‑messenger‑driven project management, which leads to data loss, poor traceability, and reduced efficiency. To overcome these issues, the authors designed and implemented a Visual Interface Workflow Management System (VIMS) that operates simultaneously on web and mobile platforms. The system’s architecture follows a classic client‑server model built on the MERN stack (MongoDB, Express.js, React.js, Node.js) complemented by React Native for cross‑platform mobile development.

MongoDB, a NoSQL document store, was chosen for its flexibility in handling unstructured task data, comments, and activity logs, allowing the schema to evolve without migration overhead. The back‑end uses Node.js and Express.js to expose RESTful APIs, with JSON Web Tokens (JWT) providing stateless authentication and secure data exchange. The web front‑end leverages React.js and Redux Toolkit, enabling a component‑based single‑page application where state changes (e.g., task status updates) propagate instantly without page reloads. The mobile application, built with React Native, reuses the same JavaScript codebase to deliver native‑performance experiences on both iOS and Android, ensuring that users can continue work on the go with full data synchronization.

The user interface centers on a three‑stage workflow (To‑Do → In Progress → Done) and uses color‑coded priority labels (high, medium, low). A dashboard aggregates key metrics—total workload, completed tasks, active tasks—into summary cards and interactive charts, giving managers a real‑time visual overview of team performance. Additional features include file/image attachment to tasks, a “trash” mechanism for safe deletion, and an admin panel for team and role management.

For evaluation, ten participants from diverse professional backgrounds (engineers, engineering students, public sector employees, branch managers, healthcare workers) were recruited. After a hands‑on session, participants completed a 14‑item Likert‑scale questionnaire (1 = Strongly Disagree, 5 = Strongly Agree) covering UI clarity, navigation, system performance, data synchronization, task creation, status updates, asset addition, error handling, dashboard visualization, task prioritization, comparative advantage over traditional methods, team/role management, and intent to adopt. Quantitative results showed high satisfaction across all dimensions, with mean scores ranging from 4.00 (data synchronization) to 5.00 (dashboard visualization). Notably, the dashboard achieved a perfect mean of 5.00 with zero variance, indicating unanimous approval of the visual analytics component. The comparative advantage over paper‑based or messaging‑based tracking received a mean of 4.90 (σ = 0.32). Standard deviations were higher for data synchronization and asset addition, suggesting occasional performance variability due to differing network conditions or device capabilities.

Qualitative feedback highlighted the system’s simplicity, the seamless transition between desktop and mobile, and the practical value for corporate settings. Suggested improvements included more responsive design for pop‑up dialogs and increased file‑upload capacity.

The authors conclude that the MERN‑stack‑plus‑React‑Native approach delivers a robust, scalable, and user‑friendly workflow management solution that enhances data integrity, real‑time collaboration, and decision‑making for small‑ and medium‑sized enterprises. Limitations include the small sample size, lack of longitudinal usage data, and the absence of advanced features such as AI‑driven risk prediction or automated alerts. Future work should involve larger field deployments, performance benchmarking under varied network conditions, and integration of predictive analytics to further augment project oversight.