HELIO – Design with a System HELIO / Product of HMI Project
HELIO is an editor for creating responsive user interfaces for industrial applications using web technology. The target audience is machine manufacturers, system integrators, and UX/UI designers who are open to innovation. HELIO was developed from real industrial projects—as a response to recurring challenges in HMI design. Instead of starting every interface from scratch, HELIO makes proven UX and UI knowledge available as a clearly structured, flexibly adaptable system. A well-designed UI library, an integrated design system, and a guided development environment provide orientation, consistency, and fast results. This makes UX/UI expertise available even to users without a design background.
Practical Relevance
As a design agency with over two decades of experience in industrial interface design, we have supported numerous projects – from simple machine panels to complex plant control systems. Time and again, we have seen that the functional and design requirements are similar – yet the individual effort involved remains high.
Many projects start with the same discussions about information architecture, interaction behavior, and visual standards. At the same time, dependencies arise due to project-specific tools, individual development, or technical limitations—often at the expense of usability, consistency, and maintainability.
Many of the HMI tools available on the market are technology-driven. Although they offer great flexibility, they largely leave the responsibility for design and user-centeredness to the users—without methodological guidance or structural guidelines. The result: room for interpretation, loss of quality, and inconsistent solutions.
This is particularly evident in special machine construction: even well-developed interfaces quickly become unbalanced over their lifetime – due to adjustments, extensions, or changing project participants. The loss of consistency has a direct negative impact on usability, training, and documentation.
Iterative Process
HELIO was not created in a think tank, but rather in the context of real projects—as a step-by-step response to recurring challenges. Over the years, we have evaluated and systematized requirements, usage contexts, and design decisions.
The iterative development process follows the principles of user-centered design, which we also apply to our other design projects: needs assessment, prototyping, continuous evaluation, and incremental improvement. What started as a purely technical interface developed into a modular framework – and ultimately into a standalone platform.
Every component and every function in HELIO is based on specific application scenarios. The platform was further developed in collaboration with applicators and users – always with the aim of solving typical design and usability problems methodically and sustainably.
A key challenge was to always consider two target groups: For development teams, the effort and complexity involved in HMI creation should be significantly reduced. And for users, user interfaces should be created that are easy to use and also look good.
Productive Approach
With HELIO, we have created a tool that not only reflects design expertise, but also makes it productive. The platform structures what remains implicit in many projects: functioning controls, design principles, proven UX standards.
The goal was not unlimited design possibilities, but a system with clear framework conditions that still leaves room for project-specific adaptation. The result is a highly specialized tool for consistent, maintainable, and optimally usable industrial interfaces. Driven by design as a systematic process—not as a one-time creative act. For us as a design agency, this means above all that our experience becomes universally applicable and we can enable many users to have a positive user experience when interacting with industrial HMIs.
Design System
The central foundation is a UI library with components developed for specific usage contexts. All stored controls are not only visually coordinated, but also functionally well thought out and fully responsive. They cover all typical operating requirements in the industry and can be used on a wide variety of screen sizes.
An embedded design system provides orientation without overpowering the design. Consistency is achieved through clear rules and reusable patterns – not through restriction. The separation of logic and appearance enables simple visual customization via theming, without functional redundancy.
Industry-specific project templates and page templates provide a proven starting point – particularly helpful in the early stages of the project, when not all details have been finalized or rapid prototyping is required.
Development Environment
HELIO IDE maps the design and configuration process with an interface tailored to the requirements of interdisciplinary teams. User guidance follows principles such as error prevention, system status visibility, and clear feedback.
Visual configuration, structured processes, and a live preview make it easy to get started, avoid typical misunderstandings, and make results immediately visible. Instead of a blank canvas, HELIO offers a pre-filled and guided work environment – ideal even for users with little practical experience in user interface development.
Expandability
Despite its clear structure, HELIO is open to individual requirements. For special project requirements or brand-specific design, the platform can be expanded in a targeted manner—either with proprietary components or supplementary UX/UI services. The open architecture, a powerful SDK, and standardized interfaces allow for expansions without compromising maintainability. This ensures that HELIO remains consistent over longer product cycles—methodologically, technically, and in terms of design.
Sustainability
HELIO not only significantly reduces the initial development effort for industrial HMI projects, but also saves valuable resources in the long term – in maintenance, servicing, and further development throughout the entire product cycle.
Reusable components avoid redundancies and reduce the effort required to adapt to new machine types or scale to larger product families. The no-code approach reduces typical sources of error and minimizes debugging effort. Updates can be rolled out risk-free on the stable system. Thanks to the consistent separation of function and design, subsequent design adjustments – such as facelifts or CI changes – are possible at any time without affecting functionality. The clear system also facilitates knowledge transfer within teams. HELIO's intuitive structure also significantly reduces training, education, and service costs.
In this way, HELIO helps to create durable and strategically sustainable interfaces – in terms of design, technology, and economics.
Brand Design
HELIO's brand design is disruptive in this market segment. Developed by user interface designers for open-minded target groups, HELIO focuses on contemporary design, usability, and responsiveness. This is strongly reflected in the brand design. By using the dark standard theme with color gradients instead of solid colors, a functional font, and a fully responsive logo, HELIO makes a clear statement in an environment that is more accustomed to conservative design solutions.
With its polarizing no-code approach and innovative operating concept, the system challenges the long-established players. That is why the decision was made to go with a progressive brand design. The result is as flexible, playful, and customizable as the product itself. It is clearly fun to apply the brand design to marketing materials and merchandise items.
Showreel
Vimeo
External Video
We host our videos on Vimeo. When the videos load, a connection to Vimeo servers is established and cookies are set (possibly also from Vimeo).
Privacy