Schubert UX design guide

Client

Gerhard Schubert GmbH

Sector

Machines and systems engineering

Partnership

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.

Services

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

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

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 System-Elektronik corporate website

Care portal

Colour definition for charts, dark & light themes

Schubert

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 Schubert Mission Blue Website Schubert campaign design Schubert Media planning

All disciplines

Corporate Design / advertising

Corporate design for packaging machine manufacturer Schubert

Schubert design manual

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.