Digital | Corporate Design

UX Design Guide für Schubert

digital UX design guide


Gerhard Schubert GmbH


Machines and systems engineering


Since 1973

For packaging machine manufacturer Schubert, we developed a digital UX design guide to standardise all digital interfaces: Be it a website, a service portal or a machine user interface.

The client

Schubert is a leading manufacturer of packaging machines and offers customised packaging solutions for a wide range of industries. Schubert’s packaging boasts the highest quality and efficiency, and offers customers the opportunity to package their products safely and effectively. Schubert relies on innovative technologies and a customer-focused approach to provide its customers with the best possible result. With many years of experience and a strong focus on innovation and quality, Schubert is a reliable partner for packaging solutions.

The assignment

A company as large as Schubert needs to convey a unified and consistent brand image to the outside world. Since a multitude of digital interfaces had been developed by various agencies and service providers, a digital design system needed to be created that would uniformly define the design. To this end, designers from the Ruess Group took the lead in defining the user experience style guide, including coordination with the individual disciplines, to ensure that all requirements and needs were met.


  • Development of the design system in Figma
  • Continuous optimisation and expansion

Why a UX Design Guide is necessary

As one of the leading manufacturers of packaging machines, it is essential for Schubert to present a uniform and consistent brand image. A digital design system is an indispensable tool for ensuring that the company has a consistent presence on all digital platforms.

The requirements for the design style guide vary depending on the interface: For the corporate website, it has to include design elements, colour palettes, typography and layouts to ensure a consistent brand presentation. For data-driven dashboards, clear instructions need to be defined for the presentation of data and visual elements. Finally, the design system also has to include specific guidelines for the packaging machine user interfaces to ensure they are easy and intuitive to use.

With a digital UI style guide, Schubert ensures that all digital touchpoints are designed consistently and attractively while presenting the brand in the best possible way. This leads to higher brand awareness and loyalty, as well as improved usability on all digital platforms.

Definition of colours & fonts

Definition of colours & fonts

Different colour systems were developed depending on the use (group website, sustainability website, machine interfaces, etc.). There are three font families that can be used, depending on the application: Helvetica Neue Condensed and Helvetica Neue as the main font, the Arial Narrow and Arial system fonts for e-mails, and Liberation Narrow and Liberation for the Linux-based environment of the machine interfaces.Verschiedene Farbsysteme je nach Einsatz (Group Website, Nachhaltigkeits-Website, Maschinen-Interfaces ...) wurden entwickelt. Für die Schriften gibt es je nach Einsatz auch drei Schriftfamilien, die genutzt werden können: Helvetica Neue Condensed und Helvetica Neue als Hauptschrift, für E-Mails die Systemschrift Arial Narrow und Arial sowie für die linuxbasierte Umgebung der Maschinen-Interfaces die Liberation Narrow und Liberation.

Definition of buttons & links

Interaction Elements

Interaction Elements

Definition of numerous interactive elements for light and dark mode: text input, dropdowns, checkboxes, radio buttons, toggles, pagination, comboboxes, listboxes, treeviews, context menus, dialogue messages, pop-ups, etc.

Examples of websites

Schubert Group website in mockup

Schubert Group Website

Schubert Mission Blue Sustainability microsite

Schubert Careers microsite

Schubert System-Elektronik corporate website

Schubert System-Elektronik corporate website

Care portal

Colour definition for charts, dark & light themes

schubert care portal standard view in dark mode

·       Standard view in dark mode

Expert view in dark mode

Expert view in light mode


More about Schubert

Schubert has been our most long-standing client and we provide them with more than comprehensive support. Are you interested in finding out what else we do for Schubert?

Schubert Corporate Website

Would you like to see more?
More works
All disciplines
Corporate Design / classic
Corporate design for packaging machine manufacturer Schubert

Corporate design example: Design manual für Schubert

A brand is constantly evolving, so their look and feel also need to be continuously updated. Clear guidelines for the visual design ensure consistent communication, strengthen brand presence and increase recognition, which leads to more effective brand communication and a positive brand experience. We as an agency developed the corporate design for the Schubert company.

Corporate Design / classic

Convincing Corporate-Design

Time for an update? The Geiger Antriebe (Drives) brand’s visual language was given a completely new look and feel – based on an updated brand identity.