Client

protect first GmbH

Agency

ZURKRAFT

Team

Designer & Developer: Max Kahls
Content: Gischt & Glut (Hamburg)
Product Owner: Tadeusz Pauer

Services

Web Design & Development

The protect first GmbH, based in Leipzig, was founded during the COVID-19 pandemic and provides comprehensive hygiene protection for business customers. Within a few years, the startup has become one of the leading providers of hygiene prevention, thanks to nationwide test stations at customers such as DPD and McDonald's. The focus is now on distributing the 9000M technology, a biozide-free desinfection and impregnation method for textiles of all kinds.

The client commissioned me to design their corporate website, where I worked as both a designer and developer. Using Webflow, I efficiently translated the screen designs created in Figma into a functional website optimized for all devices.

Visit the site

*My clients are empowered to evolve their websites on their own. Live websites may not reflect my original designs.

The Briefing

When I was tasked with designing the website, the strategic positioning and definition of the services had already been developed by the Hamburg-based agency Gischt & Glut. Therefore, it made sense for the agency to provide the rough structure and content of the website, while I was tasked with the pure web design and development.

The objective was to create and implement a corporate website that was optimized for all devices, including a blog.

The Process

The approach was initially unfamiliar to me as I was to lead the content creation process with the Hamburg-based agency. The structure and content were captured in a Word document, which was somewhat unwieldy and difficult for the client to grasp. However, we had all the final texts in a clear structure before I began the actual design process.

The screen designs were implemented in Figma, with the final text already integrated into the prototypes, allowing the layout to be tailored to the content.

After approval, I was able to quickly transfer the screen designs to Webflow and connect them with the custom domain. Voilà.

The Output

As a result of this approach, the client was able to receive a stable and highly performant website cost-effectively. Furthermore, after a brief introduction, they are able to independently publish new blog posts and make changes to the content on the site.

The Takeaways

While this project may seem confusing compared to my other projects, I want to showcase it because of the valuable insights I gained from the process that can be applied to larger projects:

Content First
Starting with the content is my general approach to designing a product. However, doing so purely on a theoretical basis (in the form of a Word document) was new to me. Nonetheless, this method proved to be very efficient in the end. Only after all the texts were finalized did I begin the design. Thus, there was no need to theoretically place everything in the design, like in the case of NETINERA, hand it over, and then insert it again. The downside was that some texts were too long during the design phase. However, making changes afterwards was a quick task.

Webflow
This was only my third website created with Webflow. Once again, it became apparent how efficient this tool is for building high-performance websites. To delve deeper into the tool, I deliberately built the site from scratch based on the Figma screen designs. Although this approach provides all the freedoms, the process could be further optimized through a comprehensive UI kit or template. With such a UI Kit in place I think it could be even possible to skip the part in figma and design the site directly in Webflow.