Desarrollo de mejoras UI/UX en EMI Suite 4.0

Abstract

El presente trabajo de fin de grado se realizó en la empresa Soincon, dedicada al desarrollo de soluciones tecnológicas para el entorno industrial. El objetivo principal del proyecto fue mejorar la interfaz de usuario (UI – User interface) y la experiencia de usuario (UX – User experience) de algunos módulos de EMI Suite 4.0 (Enterprise Manufacturing Intelligence Suite), una plataforma orientada a la gestión y optimización de procesos industriales en tiempo real. Para abordar este trabajo, el equipo de Soincon seleccionó una serie de interfaces de la aplicación que requerían una mejora visual y funcional, con el objetivo de modernizar su diseño y facilitar la interacción del usuario. A partir de estos requisitos y después del estudio de buenas prácticas para conformar interfaces visuales, se diseñaron mockups interactivos utilizando la herramienta Figma, que sirvieron como referencia para validar las propuestas visuales y estructurales antes de su implementación. El desarrollo de las mejoras se llevó a cabo utilizando las tecnologías React, JavaScript, Material-UI y CSS, trabajando en un entorno controlado mediante Visual Studio Code. La comunicación con el back-end se gestionó a través de la API REST desarrollada por la empresa, lo que permitió mantener la lógica de negocio y la estructura de datos existente. Asimismo, se utilizaron herramientas como GitLab para el control de versiones y Chrome DevTools para la depuración y análisis del comportamiento visual de los componentes. El proyecto se desarrolló de forma iterativa, incorporando progresivamente los cambios en la interfaz y evaluando su impacto desde el punto de vista de la experiencia de usuario. Todo el desarrollo se llevó a cabo en coordinación con el equipo de front-end de la empresa, respetando las directrices y estándares ya establecidos en el sistema.

This final degree project was carried out at Soincon, a company dedicated to developing technological solutions for the industrial environment. The main objective of the project was to improve the user interface (UI) and user experience (UX) of several modules within EMI Suite 4.0, a platform focused on the real-time management and optimization of industrial processes. To address this project, the Soincon team selected a series of application interfaces that required visual and functional improvements, aiming to modernize their design and enhance user interaction. Based on these requirements and after studying best practices for building visual interfaces, interactive mockups were designed using the Figma tool. These mockups served as a reference for validating both visual and structural proposals prior to implementation. The improvements were developed using React, JavaScript, Material-UI, and CSS, working within a controlled environment using Visual Studio Code. Communication with the back-end was managed through the company’s REST API, which allowed the existing business logic and data structure to be maintained. Additionally, tools such as GitLab were used for version control, and Chrome DevTools for debugging and analyzing the visual behavior of the components. The project followed an iterative development process, progressively incorporating interface changes and evaluating their impact from a user experience perspective. All development was carried out in coordination with the company’s front-end team, adhering to the guidelines and standards already established in the system.