Case Study: Webflow Website for a Mid-Sized Company

From idea to reality: Webflow as a solution for a modern website for a medium-sized company. The old ZAHNA FLIESEN website did not reflect the high standards and quality that the company represents with its own products. With a relaunch of the website, this quality should also be transferred to the digital presence. In this context, a newly developed digital design language should also be created that combines tradition and modernity.
The implementation challenge included implementing a complex website with over 2000 CMS elements with performance. In this video, I'll show you the entire process from planning to design to implementation.

To the website: https://www.zahna-fliesen.de‍

Video timestamps

00:00 — Intro
01:24 — Customer information
02:20 — Starting position
04:50 — Project start process
07:39 — Development of the new design language
19:55 — Home page
24:32 — Page: Technical perfection
25:51 — Let customers build their own pages via Webflow
27:49 — Page: About Us
30:07 — Page: Downloads
30:35 — Page: Interactive Dealer Map with Mapbox
31:40 — Product pages
44:10 — Experiences and problems with Webflow

From idea to reality: Webflow as a solution for a modern website for a medium-sized company

Today I would like to share with you my experiences creating a new Webflow website for the company ZAHNA FLIESEN. I worked on this exciting project together with my colleague Lukas Rudrof. The challenge was to create a modern and complex website for a medium-sized company with over 2000 CMS elements. In this post, I will guide you through the entire process and show you how we planned, designed and implemented the website step by step.

The initial situation and planning

The old ZAHNA FLIESEN website did not meet today's standards for medium-sized companies. It wasn't modern or easy to use. Changes had to be made through an agency, which resulted in additional costs. Our goal was to create a modern and appealing website that would enable customers to manage content independently. We met with the customer at the beginning to discuss the goals and requirements and to develop a clear strategy for the relaunch.

Develop the design language

Together with Lukas, we thought about the design language. We wanted a combination of traditional and modern design to highlight the company's premium segment. We looked at various fonts and color palettes and created initial designs to present a visual idea to the customer.

The one-pager and the kick-off call

In the first attempt, we created a one-pager that presented the most important information in a compact way and served as a foretaste of the new website. It had to be finished before a knife was cut off. Before the actual start of the project, we had a kick-off call with the customer to discuss the goals and wishes in detail. We collected ideas together and presented initial drafts to make sure we were on the right track.

The design of the subpages

After the design language and basic structure had been defined, we set about designing the subpages. The challenge was to present the many products in an appealing way and to ensure user-friendly navigation. As a common thread, we have designed a grid of lines to visually separate the various areas of the website from each other and create a clear structure.

Implementation and launch

After the design was complete, we set about implementing the website in Webflow. We chose Webflow because it gives us complete design freedom while creating a user-friendly CMS solution for the customer. It took about 2 months to implement it in Webflow, but the result was convincing. After thorough testing and adjustments, the website finally went live and received positive feedback from customers and visitors.