# Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

>[Erfahre mehr](https://www.google.com/)
  
![12.jpg](https://oberpaul.com/content/uploads/12_86c72e673a.jpg)

### Subheadline 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

> "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

– Unknown

![11.jpg](https://oberpaul.com/content/uploads/11_ee75a12bd5.jpg)

### Subheadline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

[Erfahre mehr](link)

![2.jpg](https://oberpaul.com/content/uploads/2_c372d31618.jpg)

### Subheadline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

1. Item
2. Item
3. Item

![13.jpg](https://oberpaul.com/content/uploads/13_5839cdc7d5.jpg)

### Subheadline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- Item 1
- Item 2
- Item 3

Lorem Ipsum

We created a clear information structure supported by a minimal and restrained design approach. In order to ensure design consistency even in retrospect and still allow the client to adapt the content, we opted for a jamstack solution.

Autohaus Fischer wanted a website that would make all the important information about its service easily accessible at all times and, in particular, promote the ease of making appointments. 

### Sitemap

![1920-1280--Fischer--Sitemap.jpg](https://oberpaul.com/content/uploads/1920_1280_Fischer_Sitemap_e729360413.jpg)

##### We started by creating the sitemap to directly identify what content should be bundled and how to make it as easily accessible as possible. This leads to a better understanding of the goals and purposes of the website.

### Wireframing

![1920-1280--Fischer--Wireframes.jpg](https://oberpaul.com/content/uploads/1920_1280_Fischer_Wireframes_c834d8c5a4.jpg)

##### We then created wireframes to define possible information architectures that determined where the content should be placed and how the different pages interrelate.

###  Component creation

![1920-1280--Fischer--Components.jpg](https://oberpaul.com/content/uploads/1920_1280_Fischer_Components_8cde15ff33.jpg)

##### To ensure visual consistency and speed up the subsequent programming of the website, we created a firmly defined collection of components from which the final designs were then compiled.

### Coding

![1920-1280--Fischer--Code.jpg](https://oberpaul.com/content/uploads/1920_1280_Fischer_Code_863a744c93.jpg)

##### After completing the screen designs, we built the website's underlying design system, consisting of the individual design tokens and components. The technical implementation is based on the React framework nextjs in combination with the headless cms from strapi and the Framer Motion Library.

### Learning

![1920-1280--Fischer-Screen-Mobile.jpg](https://oberpaul.com/content/uploads/1920_1280_Fischer_Screen_Mobile_1d76fa5463.jpg)

##### The association of many open soucre libraries in the implementation of such a project has shown us again and again how positive the development in this direction has been in recent years. It shows what added value can be achieved together instead of working in isolation.

Autohaus Fischer is an independent company that specialises in a very personal and personalised car service.

large_1920-1280--Screens-Fischer-2.jpg

medium_1920-1280--Screens-Fischer-2.jpg

small_1920-1280--Screens-Fischer-2.jpg

thumbnail_1920-1280--Screens-Fischer-2.jpg

1920-1280--Screens-Fischer-2.jpg

Fischer

We have used the principle of atomic design to create isolated, reusable components that can be combined for new purposes.

Techpilot wanted a consistent experience across the platform while being flexible in the design process for new features.

### Design tokens as base of everything

![1920-1280--Techpilot--Layerstyles.jpg](https://oberpaul.com/content/uploads/1920_1280_Techpilot_Layerstyles_4f2a802ed2.jpg)

#####  We started defining design tokens such as color, spacing and typography to ensure flexibility and unity across all product experiences. Our global size tokens are based on the value of 8 and change at every scale in order to support overall scaling of the application and its components.

### Definition of reusable components

![1920-1280--Techpilot--Atoms.jpg](https://oberpaul.com/content/uploads/1920_1280_Techpilot_Atoms_1663ebdcdc.jpg)

##### The next step was to break down the common design elements that occur repeatedly in the application (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. They needed to be generic enough so that it's free from complex business logic.
### The bridge between design and code

![1920-1280--Techpilot-Zeplin.jpg](https://oberpaul.com/content/uploads/1920_1280_Techpilot_Zeplin_48bd03d59e.jpg)

##### We implemented Zeplin as a single source of truth and for the transfer of new designs such as components or even complete screen designs between designers and developers. Through this unified process, we were able to speed up collaboration without major ambiguities and queries.

### Learning

![1920-1280--Techpilot-Screen.jpg](https://oberpaul.com/content/uploads/1920_1280_Techpilot_Screen_dae9e2571c.jpg)

#####  During the process, it turned out that the most difficult part was the balance between fix defined components and flexible design. If you don't calculate exactly which components will be used repeatedly, you run the risk of making the system unnecessarily complex.

Techpilot is Europe’s largest platform for the manufac­turing industry. They give providers visibility, deliver transparency to the drawing parts market, and make sourcing consistently easy.

large_1920-1280--Techpilot--Organism.jpg

medium_1920-1280--Techpilot--Organism.jpg

small_1920-1280--Techpilot--Organism.jpg

thumbnail_1920-1280--Techpilot--Organism.jpg

1920-1280--Techpilot--Organism.jpg

Techpilot

We built a chatbot that would act as a charming personal assistant and help to get the desired information in the shortest possible time.

Fidor wanted an easily accessible way to communicate with the customer and provide them with information with seeming more personal.

### Research

![1920-1280--Fidor--Research.jpg](https://oberpaul.com/content/uploads/1920_1280_Fidor_Research_ccd62e769a.jpg)

##### We started by researching how other tech companies were dealing with the issue of personalisation of digital services. We looked in particular at topics such as autonomous driving, robotics, but also the entertainment industry. To get a feel for the current idea that society has of artificial intelligence.

### A/B Testing

![1920-1280--Fidor--Test.jpg](https://oberpaul.com/content/uploads/1920_1280_Fidor_Test_ac774a9cf6.jpg)

##### After the conception phase, we moved on to the tests within the Fidor community. The more playful variant and the minimal variant were the final opposites. More than two-thirds voted for option A, which confirmed our previously stated hypothesis.

###  Learning

![1920-1280--Chatbot.jpg](https://oberpaul.com/content/uploads/1920_1280_Chatbot_741c383b41.jpg)

##### During the process, it became clear that although society is becoming more and more accessible to digitalised services, there is still a need for human contact in certain areas. Especially for emotional or very complex issues where trust plays a big role.

Fidor Bank is an online-based direct bank, licensed in Germany with its headquarters in Munich. The Fidor Smart current account is tailored to private and business customers alike. With its outstanding concept, Fidor Bank utilizes the principles and effective mechanisms of digital banking.

It seems you found a UX Engineer focusing on the loop between design and code.