UNICOS Branding - Framework

UNICOS was born at CERN in early 2001 with the development of the LHC cryogenics control system. It deals with the two upper layers of a classical control system: Supervision and Control. UNICOS proposes a method to design and develop the control application which will run in commercial off-the-shelf products (e.g. SCADA and PLCs).

The LHC tunnel at CERN

Problem statement

The UNICOS HMI was developed more than 15 years ago and has since then evolved with contributions of tons of developers. The overall set of panels constituting the UNICOS HMI is therefore outdated and heterogeneous. CERN wishes to modernize and homogenize the UNICOS user experience for its open source release by first updating and unifying its visual identity.

Solution

The primary objective of the rebranding is to systematically upgrade the visual aesthetics of all Human-Machine Interface (HMI) panels, bringing them in line with modern design standards. This initiative is crucial for improving both the usability and visual appeal of the system, ensuring that it remains competitive and user-friendly in today's fast-evolving technological landscape.

Identifying problems in existing HMI

1. Complex Interface

The existing interface is complicated as key functionalities are buried within complex menus, making it challenging for users to complete tasks efficiently.

2. Color Assignment

In UNICOS, colors play a critical role as the framework is designed to represent the real-time status of various alarms and events. Therefore, establishing a well-defined and consistent color database is essential to ensure clarity and effectiveness.

3. Visual In-Consistency

In UNICOS, colors play a critical role as the framework is designed to represent the real-time status of various alarms and events. Therefore, establishing a well-defined and consistent color database is essential to ensure clarity and effectiveness.

4. Non-resizable panels

The panels within the UNICOS interface are designed with a fixed layout that does not adapt to different screen sizes or resolutions. This can lead to usability challenges, especially for users accessing the system on various devices, such as laptops, or desktop.

5. Usability Problems

Inconsistent design elements (e.g., buttons, icons, color schemes) across different modules create confusion and reduce user confidence.

Old UNICOS welcome panel Old UNICOS system integrity panel Old UNICOS application configuration panel
User’s
Pain points
after conducting interviews with users, we have following conclusions
We don’t have the legal rights to use these pictures. Copy right issue
Navigation is not easy. The framework is not easy to understand for new users.
All the pictures should be replaced with customized icons. Pictures are causing usability issues since they are not relative to the functionality.
The panels are complex and due to lack of visual hierarchy and UI consistency, performing tasks is not easy.
Panels are not resizable. Panels should adjust according to the device dimensions.
Panels lack visual consistency hence branding guidelines should be made that will be use for developing future panels.
Color usage should be defined. Certain colors are associated with certain stages, such as alarms.
User’s
Expectations
Don’t re-invent the wheel. Layout should not be disturbed since users are used to certain placement of graphical elements
Simplicity, Consistency and Usability. Redesign should be minimalistic, unnecessary 3d elements and random colors should be avoided.
A well-designed, fully functional framework is far superior to an aesthetically pleasing but flawed one.

Take a look at the old UNICOS HMI:

→ How can we design a system that not only solve the current issues but is also helpful in future?

→ How can we redesign this framework without changing existing layout?

Branding and Re-design Development, Testing & Deployment UNICOS Rebranding

Branding Guidelines:

Mockups:

Import devices panel, before Import devices panel, after Device overview panel, before Device overview panel, after

What has improved?

Redesigned panel in dark mode Redesigned front-end diagnostic panel
→ Click here to see how I implemented these mockups in WinCC OA using control script and QT CSS.