Clean design for a clean future in wood

UX Design

Industry:

Construction & Prefabrication

Timeline:

2 weeks

Impact:

+57% more interaction with project galleries

Live website

Collage of tablet mock-ups displaying multiple Holzwerk Nova website screens on a light background

Introduction

Custom UX design for a German woodworks brand. When a fast-growing timber company wants to bring its website up to the standard of its product design, you don’t offer them a generic WordPress theme. You build a tailored timber construction website UX design system that can scale, flex, and translate their identity into pixels — without looking like it came from a template graveyard.

That’s exactly what we did for Holzwerk Nova. And it wasn’t just about style. They needed clarity, structure, and a smarter way to present content across dozens of pages. By creating a modular website design system, we delivered a solution that grows with their business. Let’s break down how we did it.

The challenge

No structure, no style, no system

Holzwerk Nova had solid content — but no consistent layout, no visual story, and no scalable design framework. Their existing website felt more like a document dump than a digital showroom. The structure was chaotic, the brand identity wasn’t visible, and every new page felt like starting from scratch.

The core issues:

Inconsistent layouts and design patterns
No scalable component system for future content
Weak alignment with the company’s sharp visual branding
No clarity between product categories and information pages

They didn’t just want a new look. They needed a timber construction website UX design system to bring order to their digital presence. The goal? A reusable, modular website design system that their team (or any dev team) could easily work with for the long haul, ensuring alignment with their B2B construction brand web design needs.

Hero section of the Holzwerk Nova homepage highlighting sustainable timber construction services

Tablet view of Abbund service page with “Individuelle Abbundlösungen” headline and two project photos

Our approach

Design structure first. Templates second. Style last.

We kicked things off with a deep dive into Holzwerk Nova’s goals — together with KUBE Studio, our partner. We asked the right questions: What needs to stay? What’s missing? What needs to work smarter?

From there, we focused on:

Structure first – We built a modular wireframe system to define page flow, content priority, and relationships between components.
Design patterns – Created reusable templates that could flex across different types of content (e.g. product listings, service info, partner profiles).
Brand logic – Integrated the angular shapes, purple brand color, and clean visual tone consistently across the layout.
Scalability – Delivered everything in a design system that developers could pick up and run with.

The result? A highly functional timber construction website UX design system tailored to Holzwerk Nova’s needs. By focusing on structure and scalability, we delivered a solution that supports their growth and aligns with the demands of the construction industry.

We designed in Adobe XD, delivered in tidy artboards — with clear logic and enough breathing space for future iterations.

Benefits section mock-up showing timber roof interior image with feature list on the Holzwerk Nova site

Inspiration gallery grid featuring timber projects and builder portrait on dark-teal background

Tech stack

For this UX-only project, our tools stayed sharp and focused to deliver a high-quality Timber construction website UX design system:

Adobe XD – For wireframing, layouting, and the final pixel-perfect design files.
Design system components – Built modular templates that could be reused by developers for future expansion.
Typography and color specs – Delivered specs and usage guidelines aligned with the Holzwerk Nova brand guide.
Developer-ready exports – Everything prepared for KUBE Studio’s frontend implementation team.

Since our role was design, not development, we ensured the handoff was clean, scalable, and developer-friendly, aligning with the needs of the construction industry UX design.

Multiple tablet mock-ups displaying project detail and isometric scan screens of the Holzwerk Nova website

Team page mock-ups with staff portraits and hero banner introducing the Holzwerk Nova team

Final results

What started as a loosely structured vision became a clearly defined timber construction website UX design system with personality. The final UX design for Holzwerk Nova delivered:

A professional, clean UI aligned with the brand’s purple palette and angled logo elements
Reusable design templates, making content population fast and consistent
Clear hierarchy and layout logic, making even dense B2B content digestible
A seamless developer handoff that allowed KUBE Studio to take over implementation without extra guesswork

The client was happy. KUBE was happy. And the site? It finally looked as sharp as the timber it promotes—a perfect example of B2B construction brand web design done right.

Timeline section screenshot with 2005 milestone card and project photos on green panel

Continuation of Holzwerk Nova timeline showing 2008 and 2012 milestones over a blue background

Let’s make your next UX project this smooth

Need structure, clarity, and a bit of visual edge? Book a quick 30-min video call — we’ll show you how to turn your messy UX plans into pixel-perfect results, whether it’s for a timber construction website UX design system or a modular website design system. No pressure.

Let’s talk →

Back to overview