Krone Group
Website for a developer of premium glued laminated timber real estate.
Role
Project Lead, Full-stack Developer, Marketing Manager
Year
2024
Stack
Next.js App RouterReactTypeScriptZustandGraphQLZodTailwind CSSHeadless WordPress
The task
The client only had a basic brand foundation: a logo and corporate colors. A modern digital presence was missing entirely. The task was to build from scratch not just a corporate website, but a full-fledged premium sales tool in a highly competitive design and construction market.
We needed to develop an image-building platform, systematize a disjointed project portfolio, implement multi-level filtering, ensure peak technical performance, and establish a manageable lead generation system (SEO + PPC) with full subsequent technical support.
Stages
Analytics and conceptual packaging
- Conducted a competitor and target audience audit to identify key needs.
- Formed the USP and highlighted the main advantages of the company, which became the basis of the text structure.
- Designed a complex and logical page architecture, ensuring convenient navigation.
Visual concept and UI/UX
- Based on the logo and corporate colors provided by the client, I selected complementary typography.
- Developed a clean, modern interface with a focus on high-quality visual content (photos of properties).
- Created an intuitive filtering system for the catalog of projects and completed properties, allowing users to easily find the right solutions by area, number of floors, and building type.
Technical development and architecture
- Developed a custom backend based on Headless CMS WordPress. This solution left a convenient and familiar admin panel for the client while ensuring maximum speed, security, and frontend flexibility.
- Set up collaborative work on forming and digitizing the portfolio database: created a database architecture for storing the specifications of each construction object.
- Designed the platform's frontend around Next.js App Router and Server Components: static generation for marketing pages, streaming for the catalog.
- Set up CI/CD for seamless deployment of updates and regular backups.
Typed data layer
GraphQL Codegen generates types directly from the CMS schema; Zod validates data at the boundary. Refactoring became boring — in the best sense of the word.
Content and Search Engine Optimization (SEO)
- Conducted a deep rewrite of project descriptions, taking into account the semantic core and the company's premium positioning.
- Implemented fine technical tuning for search robots: micro-markup (Schema.org), sitemap generation, meta tag optimization, redirect setup, and removal of duplicate pages.
Performance marketing and growth
- Launched and optimized contextual advertising. Campaigns were strictly segmented to attract a high-ticket audience from the home region, with plans to expand reach.
- Set up end-to-end analytics to track conversions: from the first click to a submitted lead.
- Provided continuous technical support, uptime monitoring, and scheduled feature updates over two years.
The process
How we built the digital office
When we first started the project, we only had a logo and a brand book with primary colors. Everything else—from the concept to the final line of code—had to be invented and implemented.
A premium construction company's website should work like a good architect: speak the language of utility, show impeccable taste, and inspire absolute trust from the very first seconds.
1. Conceptual packaging and architecture
We started with the foundation. I dove into the client's business processes to understand exactly how they sell their services. Together, we highlighted the key benefits, formulated the USP, and thought out the user journey logic.
What was done at this stage:
- Selected complementary typography to emphasize status.
- Designed the architecture of the project catalog.
- Developed an intuitive filtering system so a client can find a "300 m² two-story glued timber house" in just a couple of clicks.
2. Technical solution: choosing Headless
To outpace competitors, we needed uncompromising loading speed and flexibility. A traditional monolithic website didn't suit us. I decided to use a Headless CMS architecture.
Why Headless WordPress?
- Convenience for the client. The customer got a familiar and intuitive WP admin panel for adding new projects and news.
- Perfect performance. The frontend is completely decoupled from the backend, allowing the interface to "fly" and react instantly to user actions.
- Security. The lack of a direct connection between the user interface and the database minimizes the risk of vulnerabilities.
3. Content and the magic of promotion
A website without traffic is just a pretty picture. Once the technical part was ready, we began massive work on attracting targeted leads.
- Portfolio work: We did a huge collaborative job forming the project database. I organized a deep rewrite of descriptions, turning dry technical specifications into selling stories about the creation of the properties.
- SEO (Search Engine Optimization): The site was initially designed for search engine crawler requirements. A perfect semantic structure was set up, duplicates were removed, and micro-markup was implemented.
- Lead generation: I set up and launched contextual advertising. We didn't just drive traffic; we precisely targeted the premium segment, constantly optimizing campaigns to reduce customer acquisition costs (CAC).
The result of these systematic actions was not long in coming: the project turned into a powerful and autonomous lead generator.
The results
The site confidently takes first place in organic search results for the main target and commercial queries in the home region.
Lighthouse performance.
LCP on 4G.
Over 40 large-scale architectural projects digitized, structured, and packaged into a convenient catalog with smart filters.
35% reduction in Cost Per Action (CPA). Thanks to a combination of "competent SEO + precise ad setup" and high website speed, we significantly increased the page conversion rate (CR) and optimized the advertising budget.