Custom solutions which work and inspire

Our design process starts with analysis, followed by conception, global design and finally design elaboration. The development is carried out in parallel, interlocked with the design phases.
Our approach is user-oriented. We only want to design meaningful and understandable products for the end users. We achieve this by placing them at the centre of our design process.

We start by researching the context of use and deduce the appropriate user requirements. A methodical approach is important to us. In this way, results can be traced and compared at any time. Subsequently, the first functional prototypes are designed. These enable us to test the designs with users at an early stage and thus check whether the user requirements have been correctly derived. We repeat this process in iterations to finally arrive at an optimal result.

We attach great importance to information gathering at the beginning of the project. It includes a detailed analysis phase in which exemplary products are examined with regard to their function and operation. In order to gain a comprehensive insight into the operation, it is necessary to analyse the products together with the manufacturer's experts with regard to their functions. In addition, it is planned to visit the manufacturer's customers and conduct interviews and user surveys there. The needs of different user groups can be assessed with the help of interviews and questionnaires (EN ISO 9241-110). In close coordination with the manufacturer and its specialist departments, the principles and structures are then developed, which serve as the basis for the subsequent conception phase. These are transferred into a backlog and prioritised together with the manufacturer.

In the concept phase, the interface is developed in terms of its information architecture and usability. With the help of wireframes and prototyping, the operating sequences are depicted and coordinated. The new operating concept will be intuitive and quick to learn. The navigations are logically structured and usability is in the foreground. The user will be able to easily monitor the processes, change parameters, recognise messages and quickly eliminate faults. Statistical and diagnostic information is clearly displayed and supports upcoming service and maintenance work. The needs of the users play a central role. A clear design of the everyday functions has high priority.

In this project phase, the operating concept is successively transferred into the final design. In the global design phase, the graphic design is created. Here, the manufacturer's corporate design from the areas of print and web is taken into account and, if necessary, expanded for the area of interface design. The user interface is designed for multilingual use. Navigation and important functions are illustrated by icons. These can be used for illustrating functions, for parameter entries or for illustrating modular product components. The interface design is adapted to the industrial design of the operating panel used and optimised for touch operation. The elaboration of the design builds on the upstream global design and details the conceptual and design elaboration in a product-specific manner.

Technical breakthrough

Within the scope of a technical breakthrough, the frontend is connected to the control/backend of the manufacturer and the communication is tested. The connection to the control system can be made by the development team or by the manufacturer. The frontend consists of a web interface with output through standard UI components. Two signals/calculations are displayed. The display is configurable via JSON file and text editor. The delivery is a closed system made up of Helio modules whose use is solely geared to the intended purpose.

Prototype

In this project phase, software is developed for the functional scope of the prototype. Based on standard software modules, an application server is configured for communication with the Beckhoff controller provided in order to enable real-time display and data recording. Based on this, an HTML5 web application is developed which visualises the data received. The graphic and content development of the frontend results from the design project running in parallel.

Frontend

We work according to the principles of agile development. This allows us to achieve a high degree of transparency and flexibility and to react quickly to new or changed requirements. Together with the manufacturer, we work out the required features in sprint planning, prioritise them and create work packages from them. Our goal is to develop executable versions in short iteration steps - usually 4 weeks. These are agreed with the manufacturer in the sprint review and lead to the planning for the next step. The front-end software is implemented at the front end with HTML5 & JavaScript. The data is supplied by the manufacturer via existing controls/backends. For data preparation for the front end, standard modules developed by us are used to provide a Node.js application server.

HMI management with Helio

For maximum flexibility, the frontend can be connected to our HMI management system Helio. Using the Helio Content Editor, the entire frontend is configurable in terms of content and can be adapted to new machine types and applications. During project planning, the application engineer uses ready-made page and widget templates to create new dashboard configurations. The layout of the dashboard adapts to the number of widgets used. Depending on the selected layout, content in the widgets is faded in or out to ensure consistent readability. Helio does all this automatically, without any additional effort on the part of the user. The data points are connected to the PLC via a standardised OPC-UA interface and can be easily linked via the Helio Content Editor.

Helio Website