Zentralverband Deutsches Baugewerbe
Modular web design for German’s construction association

Work Published: May 13, 2020 Updated: October 12, 2020

Responsibilities

UI Design

I was invited by Kombinat Berlin to help re-shape the website of German’s largest construction association. The project was approached with an agile mindset where UX, UI, and Development collaborated tightly from day one to find solutions to issues set by the product owner.

The overall scope for me was to create a lightweight modular UI design that can display any content in any form. Due to the nature of this project setup, there was no clear information architecture and UX before, so I had to start with lots of assumptions. The UX was crafted in parallel by Kombinat and was given to me bit by bit and merged later with my design proposals.

I approached this project by starting with a mood board and writing down how I would imagine the whole look and feel. Kombinat provided me with some information about the product vision which was gathered within a workshop with the client. As there was still some unclarity on the UX side I treating the project like I would create a modular UI kit. I started by setting the tone with a minimal style guide defining typo, colors, essential icons, and the grid system.

Preparation work like product vision, a mood board and sitemaps helped to get everyone on the same page
A lightweight and flexible style guide

From there, I started creating components like header, footer, various content-cards up to whole page templates. I took care that components on page templates are easily stack- and interchangeable.

Various concepts for different content cards
Content cards with example content
Modular reusable stacks of the home page
The navigation dropdown
Page templates with various components

In the process, my designs got challenged by all the stakeholders which led to some iterations. In the end, I delivered a modular UI design kit that served as an orientation for the work of the development team.