Food Processing HMI

The main objective of this ongoing project is to support and guide the design of a UI-Kit for the next generation of HMI's to be applied to the processing equipment of the different Business Streams (example Ice Cream, Liquid Food Solutions) and Key Components (Filtration, Mixing).

Duration: 12 Months + [Ongoing]

Role: UX/UI Designer

Tools Used: Figma

Current Output: 400+ UI Screens Delivered to date [01/2025]

Additional results include:

Consistency Across Business Streams: Ensures uniform design elements, creating a cohesive brand experience across all equipment.
Scalable Design: Developed for a range between 12" and 21" Touch Panels.
Based on new Design System Libraries: UI uniformity with other products in the Client's portfolio.
Product Library: Design of a ad-hoc product library of components and patterns responding to product specific requirements.

Project Process

The approach applied in this project revolves around the direct involvement of the Business Streams Representatives in the design activities, by setting up recurrent co-design and review sessions in order to align the direction taken and validate the delivered work.

For each new section of the application this process was repeated from scratch.

1 // Requirement Collection Workshops

Series of meetings with the Business Streams Representatives and Consultancy Design Team to understand and map the needs and requirements for features and processes. Different source materials which are place in a FigJam board are used in this phase in order to stimulate conversation during the shared sessions.

2 // High Fidelity Wireframes

Focusing on the UX Navigation and Product Feature Placement, these screens are required to consolidate the identified requirements during the workshop within the application in order to create balanced flows linked to the production operations.

A second workshop for each topic served to review and validate the wireframes, in order to proceed to the next step of designing the Pixel Perfect UI Screens and final components for the UI-Kit.

3 // Pixel Perfect UI Screens & Components

The UI Screens include all of the features defined during the workshops and wireframes and are designed according to the Pixel Perfect approach. Throughout this Project, we have worked and delivered screens and insights for both the 21” and 12” versions of the HMI in order to provide a range of case study examples which can be applied to the different equipment units based on specific Business Streams Requirements.

Images are blurred for company policies, however we can appreciate a use case in which the same information has been re-arranged to accommodate for the different panel size & resolution range (21" Left, 12" Right).

For all Product Features this process was applied, in order to provide the Business Streams with scalable patterns applicable during development and implementation.

4 // UI Validation

Once a section is completed and the UI Screens are ready for delivery, a final session marks the validation of the materials. After approval, the screens are tagged as ready for development and the internal dev team starts working on the implementation.

5 // Development Support

After the design of a section has been delivered and validated, we continue to provide continuous support to the development and implementation team, providing additional information through 'dev notes', or by providing additional UI Screens for specific features or patterns that required additional depth.

// Iterative Process

For each section this process is repeated, starting from the Requirement Collection Workshop up to the Development Support.

Some project figures:

428

Pixel Perfect

UI Screens

Delivered

Completed Application Sections in Development

170+

Industry Specific Product Features