Krones
From Touch Panel to Browser: the Connected HMI by Krones
Splore supported Krones in translating the Connected HMI into the world of web technology. Through the interplay of UX Prototyping, UI Design & Systems and UX Consulting, a solution was developed that prepares HMI components and layouts for the existing UI Design System, usable from the 10-inch screen on the machine to the mobile device.
Krones
Krones is the world's leading manufacturer of beverage production equipment. With the Connected HMI, the company operates a central platform for controlling all types of machines in beverage production. The platform integrates planning, control, maintenance, and forecasting into a seamless interface, from individual machines to the entire production line. For operators, the Connected HMI is the central access point to the plant.
Initial Situation
The Human-Machine Interface was embedded as an interface on the device or plant. It was operated via touch directly on-site. With the shift to the web, the focus moves from the individual machine to the interaction of the entire production line. Additionally, multiple operators can work on the same plant simultaneously. Those monitoring operations today need an interface that is not tied to a single screen. This shift makes the Krones case technically interesting: as part of a technology change, the next HMI generation should be based on web technology and function across device boundaries.
Our Approach
How can HMI components and operating processes be integrated into an existing UI Design System designed for web applications, not machine control?
The Connected HMI was developed before the founding of Splore. Jona Rammler was involved in the development as Design Direction; the platform was awarded the Red Dot Award: Best of the Best in the Brands & Communication Design category in 2018 and received the iF Design Award in the same year. When Krones began the transition to the web, the technical director approached him again.
The Challenges
In industrial HMI, requirements meet that rarely occur together in classic web design. Operators work under divided attention — the focus shifts between the production process and the interface. Errors on the interface can have immediate impacts on ongoing operations. Every design decision must work under these conditions, not just on the screen. This made the following four points more challenging together than they would have been individually:
1. Complex, safety-relevant operating processes on production equipment
2. Different machine types with individual requirements
3. Consistent multi-device usage from the 10-inch screen to mobile
4. Translation of HMI components into an existing UI Design System
Our Service
A small Splore team collaborated with the project manager, the HMI-UX expert, and the UI Design System specialist on the Krones side: weekly exchanges plus working sessions for exploration and coordination. The HMI-UX expert brought in expertise on machine operation, while the Design System specialist provided the technical foundation of the existing system. Operating processes were jointly analyzed in this setup, solution approaches discussed, and checked against the requirements of both sides. On the Splore side, the work was divided into conception and workflows on one hand and visual interface design on the other. The concept side developed operating logic and information architecture in direct exchange with Krones experts. Once a concept approach was agreed upon, the visual side translated it into interface solutions. The project was within the action field of UX / Digital Product Design. Three service areas interlocked:
Development of operating concepts and workflows for the new HMI generation. Navigation was rethought for the web world. Responsive layouts focus on what is relevant at any given time. Progressive Disclosure was deliberately used to protect operators from information overload, a principle particularly effective in the HMI context because attention remains on the production process and is not lost on the interface.
Central modules of the project were the home screen with the dashboard, the navigator, the variety and alarm management, and the flow diagrams. The guiding question became concrete: What information does the operator need in which situation? What can remain in the background, and what must be immediately visible?
Visual design of the interface solutions and integration into the existing Krones UI Design System. The translation began with a systematic analysis of the existing HMI interfaces: Which elements can be represented as web components, and where does the changed usage context require its own solutions? Based on this, all HMI-relevant components and layouts were newly conceived for the web context and prepared as components with tokens for inclusion in the Design System. The result is a modular HMI toolkit, designed for light and dark themes, that transfers the design basis of the Connected HMI into the web world and works consistently across all screen sizes.
Accompanying consulting on the project team's approach. Splore continuously advised Krones on how UX methods can be embedded in the HMI development process and supported coordination between project participants. In practice, this meant: joint appointments to review concept approaches, prepare design decisions, and clarify open questions between disciplines.
The Result
The project demonstrated that machines can be operated remotely without someone needing to be on-site. This shows where the operation of production equipment is heading. Furthermore, the solution is designed to:
1.
Simplify operating processes through consistent interaction patterns
2.
Reduce training effort because operators can find their way around more quickly
3.
Grow scalable across machine types through the design system approach
The case is exemplary for designing complex, highly automated systems: special usage context, high degree of automation, safety relevance. The roles of operators in the industry are changing. Those who operate a machine are increasingly less involved in every step themselves, but rather monitor, check, and release. With the increasing use of AI in production, this development will continue to intensify. For Splore, this is a perspective that fundamentally changes the requirements for HMI Design.
Customer Testimonials
»In adapting the Krones HMI for the web, Splore once again exceeded our expectations through exceptional design skills, professionalism and quick understanding of the machine context – Bravo«
Do you have questions?
Do you have questions?
Feel free to contact us. Splore founder Jona Rammler is an expert in the development of digital products and services and looks forward to your message.
FAQ
A Human-Machine Interface (HMI) is the user interface of a machine or plant. In an industrial context, operators control production processes, monitor plant conditions, and respond to alarms through it. Unlike classic web or app interfaces, an HMI must function under special conditions: high complexity, safety-relevant processes, and changing attention requirements.
HMI Design takes into account the physical usage context: operators work on a machine, often under time pressure and with divided attention. Principles like Progressive Disclosure, i.e., the targeted display of information only at the relevant moment, gain special importance here. Additionally, there are requirements for use across different device types, the possibility of simultaneous operation by multiple people, and integration into existing design systems. More on this on the page HMI Design & complex systems.
Integration requires systematic translation: existing HMI layouts and components are analyzed, newly conceived for the web context, and prepared as components with design tokens for inclusion in the UI Design System. This creates a modular toolkit that ensures consistency across all screen sizes while covering the specific requirements of machine operation. How Splore implemented this process at Krones is described in the case above.
Consulting that understands complex workflows from the perspective of users and has experience with embedded interfaces. Splore works as a boutique consulting firm in industries where generic UX approaches reach their limits: mechanical engineering, medical technology, complex B2B software. You can find more projects in the Case Overview.