1. Definition of
the Design System.

The design system "Inspire" defines all components within the product. Be it a button, a table, a warning signal or the code for it. There is only one design system for products, whether X-Series or EdgeOne. The design system is based on two pillars, UI and UX. The application of the Design System is defined in the Living Style Guide. Here you can find guidelines, components, tutorials and other resources.

1.2 The components are divided into the following categories:

1.3 The tutorials are divided into the following categories:

Figma introduction

1.4 The resources are divided into the following categories:

Definition of User Interface "UI".

Generally, the goal of user interface design is to produce a user interface which makes it easy, efficient, and enjoyable (user-friendly) to operate a machine in the way which produces the desired result. This generally means that the operator needs to provide minimal input to achieve the desired output, and also that the machine minimizes undesired outputs to the human.

Long story short: How the products look like

Definition of User Experience "UX".

It includes the practical, experiential, affective, meaningful and valuable aspects of human–computer interaction and product ownership. Additionally, it includes a person's perceptions of system aspects such as utility, ease of use and efficiency. User experience may be subjective in nature to the degree that it is about individual perception and thought with respect to a product or system. User experience varies dynamically, constantly modifying over time due to changing usage circumstances.

Long story short: how a user interacts with, and experiences, a product.

2. Definition of the interplay of the different product types.

The design system also defines the interaction of the different product types. In order for the guidelines of the Design System to work for both product types we need a vision of the interaction as soon as possible. In the following points 1-3 you will find a proposal of the UI/UX Guild about the interaction.

2.1. Definition of X-Series and EdgeOne.

It is important to distinguish Germanedge products in X-Series and EdgeOne. However, this distinction has no effect on the design system. There is only one design system, but it can differentiate between the two product types. The bracket that connects both products is the unified production workplace.

More Details :

EdgeOne - What is it?

X-Series

Unified Production Workplace - V1 - original version

2.2. Definition of the unified production workplace.

From the point of view of the UI/UX Guild, the unified production workplace is the bracket that connects both types of products. On the one hand, the UPW is the web client that gives the user an overview of his activities within the various Germanedge products. The UPW is the breakpoint between reduced mobile version and complex web and tablet version.

Advantages of the UPW:

The UPW enables us to set a visual bracket to set the different Germanedge product types without the need to change the products in a complex way. Long story short: all of the products will look like the same.
From the UPW (webclient) the user is linked to the different products needed for his persona
The UPW can serve as a mobile summary or status. Software should be adapted to Persona.

More Details :
Wireframes UPW(coming soon)

2.3. Sitemap of the interplay of the different product types.

3. Roadmap of the Design System

the design system is constantly being developed further. you can find the steps and milestones the team has set itself in the roadmap below. For an effective development of the design system the UI/UX team needs an overview of all components of the products. The milestones of the roadmap can only be reached if there is a continuous cooperation between the product providers, the Head of Product and the UI/UX team. This may be a challenge, as all product providers are locally scattered, but can be realized through a weekly update/team meeting.

for this reason there will be a status every 2nd friday of the month. here we organize our cooperation and look at our partial successes. If you cannot attend this meeting, please have a look at the videoreport. All of this yo will find in the UI/UX Channel at Slack.

Design System Organigram

Content

Space Tools

1. Definition of
the Design System.

3. Roadmap of the Design System

Content

Space Tools

Inspire Design Guidelines

1. Definition of the Design System.

3. Roadmap of the Design System

1. Definition of
the Design System.