Client: Masco Group Automation
Year: 2023
MGA
new Hmi
A BRAND NEW USER EXPERIENCE FOR MGA (Masco Group)
The development of a new graphical user interface for Masco Group Automation (MGA), a system integration company and part of Masco Group, focused not only on updating the visual appearance of the old HMI, following a more contemporary approach aligned with current trends, but also on a complete overhaul of the navigation mechanisms. This was to follow the pragmatic approach of MGA and with the goal of offering the users a more intuitive interface, where crucial information would be easily understood through visual elements.
The project started as an innovation project, commissioned to MGA by Olsa, an industrial machinery company for the pharmaceutical sector also belonging to the Masco Group, intended to be adapted for different user interfaces (HMIs) on different machines, with various screen resolutions. The first phase was the analysis of the previous interface, identifying elements to be developed, improved or eliminated. The software on which it was based was for a machine from Olsa.
This analytic stage was followed by a conceptual phase, in which wireframes were created to briefly outline the key concepts and mechanisms that were to be developed.
During this phase, we set the foundations for the function menu, positioned at the bottom so that it would always be visible without calling up submenus and so that it could be navigated by both left- and right-handed users with equal ease.
This analytic stage was followed by a conceptual phase, in which wireframes were created to briefly outline the key concepts and mechanisms that were to be developed.
During this phase, we set the foundations for the function menu, positioned at the bottom so that it would always be visible without calling up submenus and so that it could be navigated by both left- and right-handed users with equal ease.
The main menu was therefore designed with this in mind: all monitoring information is displayed at the top, with particular care taken to place the highly interactive buttons on the right, so as not to obstruct the view of the screen when operating with the hand.
The same principle was applied to the internal pages containing buttons or filters, placed on the right if present. As far as the function menu is concerned, the most frequently used buttons have been placed in a central position, so that all machine functions have the same importance. The side positions are instead dedicated to auxiliary and less frequently used functions.
The same principle was applied to the internal pages containing buttons or filters, placed on the right if present. As far as the function menu is concerned, the most frequently used buttons have been placed in a central position, so that all machine functions have the same importance. The side positions are instead dedicated to auxiliary and less frequently used functions.
To further facilitate the user, we created a home-dashboard that summarises some of the main monitoring data, as well as a synthetic version of the P&ID, which provides only the essential information for day-to-day operations.
A key element in the distribution of elements was the adoption, since the beginning of the project, of a modular 12-column grid with well-defined spacing and margins. These guided the structuring of the main menus and the definition of the modules that compose the frame content.
A key element in the distribution of elements was the adoption, since the beginning of the project, of a modular 12-column grid with well-defined spacing and margins. These guided the structuring of the main menus and the definition of the modules that compose the frame content.
The interface is designed to be usable in both light mode and dark mode, allowing users to choose according to their preferences or environmental conditions.
The colour palette was defined in accordance with the recently revamped corporate identity, with a focus on easy transition and colour conversion between the two modes, simplifying the work of developers during implementation.
The visual system was applied also to the internal pages and the P&ID, the latter of which underwent a radical redesign to streamline its visual appearance. Context information, such as tanks and piping, has been visually de-emphasised, while greater prominence has been given to devices, using a colour change to signal anomalies.
The colour palette was defined in accordance with the recently revamped corporate identity, with a focus on easy transition and colour conversion between the two modes, simplifying the work of developers during implementation.
The visual system was applied also to the internal pages and the P&ID, the latter of which underwent a radical redesign to streamline its visual appearance. Context information, such as tanks and piping, has been visually de-emphasised, while greater prominence has been given to devices, using a colour change to signal anomalies.
Finally, the interface was completed with customised elements, such as icons, icon-buttons and widgets, to characterise and uniform the user experience within Masco Group interfaces, for the machinery of the Olsa and Stilmas companies, which operate in the pharmaceutical sector and are part of the same group.