Website development and UX/UI design for Zempléni Építő és Gépészeti Kft.

Zempléni Építő és Gépészeti Kft. and the project objectives

Zempléni Építő és Gépészeti Kft. (ZÉG) is a company based in Sátoraljaújhely, Hungary, specializing in construction, maintenance, mechanical engineering supplies, and building materials retail. We also designed a custom logo and visual identity for the company, incorporating its elements consistently throughout the website development process.

As part of our collaboration with ZÉG, we developed two separate websites: one showcasing the company’s construction and maintenance services, and the other focusing on its building materials retail operations, product range, and related services.

Although the two websites serve different business objectives, we followed a shared set of principles throughout the design process. Our goal was to create digital platforms that present the company’s diverse activities in a clear and accessible way while helping potential customers find relevant information and get in touch. At the same time, we aimed to develop a technical infrastructure that would remain easy to manage and extend in the long term.

Professional websites tailored to different business needs

One of the key tasks in the design process was defining the distinct content and functional requirements of the two websites. Although both platforms belong to the same company, they target different audiences. We therefore tailored their content organization and website architecture to the specific characteristics of each business area.

For the construction and maintenance website, we focused on presenting the company’s services clearly. We organized the individual services into two main areas – construction and maintenance – and created dedicated overview pages and detailed service subpages for each. This structure allows visitors to navigate the available services easily, find relevant information, and request quotes directly.

For the retail website, our primary objective was to organize the products and product categories into a clear, intuitive structure. We arranged the extensive building materials range into a category system that makes it easier to browse different product groups while also allowing the catalog to expand over time.

Rather than relying on a predefined template, we designed the structure of each website around its specific business objectives and user needs. This approach allowed us to prioritize the content and functionality most relevant to each area of the company’s operations.

Service pages and project references

Previous projects play an important role in presenting construction services, as completed work demonstrates a company’s professional experience and expertise. With this in mind, we developed a dedicated portfolio section for ZÉG’s construction and maintenance website, where the company can showcase its previous projects in detail. We also linked individual project references to their related services, allowing potential customers to explore relevant completed projects alongside comprehensive service descriptions.

We designed the underlying content management system to allow the client to independently edit existing services and project references or add new content. This makes the website easy to maintain and keep up to date over time, while allowing it to evolve alongside the company’s expanding services and project portfolio.

We also incorporated SEO considerations into the development of the service pages. Targeted written content and unique metadata for individual services create opportunities to appear in relevant search results, supporting the company’s online visibility. Presenting construction and maintenance services on dedicated subpages also makes it possible to develop content tailored to specific search intents. As a result, the website can appear as a relevant result not only for general searches but also for queries related to specific construction services.

Dynamic product catalog and category structure

During the development of the retail website, we also placed particular emphasis on presenting the extensive building materials range in a clear, user-friendly way. To achieve this, we developed a dynamic product catalog with a logically structured, multi-level category hierarchy. Main categories and subcategories help visitors navigate between different product groups and find the building materials they are looking for more easily. Each product has its own dedicated page featuring relevant descriptions and images.

Long-term scalability and straightforward content management were also important considerations in developing the product catalog. The Payload CMS-based system allows the company to add new products and product categories, update existing information, and reorganize its product range whenever necessary.

In addition to the product catalog, we created dedicated sections for the company’s other content. Individual retail services, current promotions, and downloadable brochures are presented on separate pages, all of which can also be updated through the content management system. The result is a cohesive, easily maintainable website that not only simplifies product discovery but also supports the presentation of the building materials retailer’s complete offering and related services.

Quote request and partner program application processes

We paid particular attention to contact and inquiry options on both websites, tailoring the forms to their respective business requirements. Our goal was to make it easy for potential customers to submit relevant inquiries while enabling the company to route and manage them efficiently.

For the construction and maintenance website, we developed a quote request form that allows visitors to specify whether their inquiry concerns construction or maintenance services. Both types of requests can be submitted through the same interface, while a conditional email notification system operates in the background. Depending on the selected inquiry type, notifications are automatically sent to the appropriate company email address.

For the retail website, we developed two separate forms. The quote request form serves visitors interested in the company’s products and services, while the partner program application form facilitates the initiation of professional partnerships.

Custom visual identity and user-centered UX/UI design

When designing the two websites, we drew on the visual identity system previously developed for ZÉG, complementing its elements with different graphic treatments to reflect the specific characteristics of each business area. For the construction and maintenance website, we aimed for a distinctive, modern appearance defined by clean layouts, bold typography, and deliberate use of the brand colors. On the hero section and contact-focused sections, we incorporated gradients derived from the brand palette, creating subtle contrasts that visually distinguish the website’s key content areas.

For the retail website, we also considered ZÉG’s affiliation with the Újház network, building on the Újház brand identity and incorporating its signature blue, orange, and white color palette. We paid particular attention to visual hierarchy to ensure that the product range, services, and current offers are all easy to browse. By combining predominantly light backgrounds, carefully applied contrasts, and consistent graphic elements, we designed an interface in which prominent elements naturally guide visitors’ attention toward important information and functionality.

Alongside branding and aesthetic considerations, we also prioritized the quality of the user experience throughout the UX/UI design process. When designing and developing the navigation structure, content hierarchy, and interactive elements, we aimed to help visitors find the information they need quickly and effortlessly while providing easy access to essential features. We also implemented responsive design, adapting individual interface elements to different screen sizes so that both websites remain comfortable to use on mobile phones, tablets, and desktop computers.

Blogging, search engine optimization, and website analytics

We developed dedicated blog sections for both websites, enabling the regular publication of professional, educational, and informational content related to the company’s activities. These blogs can also help strengthen the company’s professional credibility and reach potential customers.

Throughout the development process, we integrated SEO considerations into the content architecture and the structure of individual page types. Services, products, product categories, and blog posts are accessible through dedicated, SEO-friendly URLs, while relevant metadata can be assigned to individual pages. This allows content addressing different topics and search intents to appear independently in search engine results. The blogging functionality also enables the websites to expand with new articles targeting specific keywords, supporting long-term organic search visibility.

We also integrated Google Analytics and Google Tag Manager into both websites to enable the measurement of website traffic, user activity, and marketing performance. The data collected through these tools can provide the company with more detailed insights into visitor behavior, popular content, and overall website performance, helping inform future development plans and marketing decisions.

Modern website development with Next.js and Payload CMS

We selected modern, sustainable technologies for the development of both websites. Each platform was built using the Next.js framework and Payload CMS, providing a solid technical foundation for fast, responsive, and easily extensible websites. Although the two projects address different business requirements, we designed their technical architectures according to the same development principles.

We customized the content management systems to meet the specific requirements of each business area. Through custom content types and editing interfaces, ZÉG’s team members can update existing information and publish new content without developer assistance.

The two websites operate as independent systems, allowing content management and future development to be tailored to the needs of each business area. The combination of modern technologies and custom-built content management solutions helps ensure that both websites remain easy to maintain and extend over the long term.

Project results

Using modern web development technologies, we created two responsive, SEO-optimized websites for Zempléni Építő és Gépészeti Kft. By consistently applying the visual identity system we also developed for the company, we established a cohesive online presence while tailoring each website’s structure, content, and functionality to its respective target audience.

ZÉG’s construction and maintenance website supports the presentation of the company’s construction services and completed projects, as well as online quote requests from potential customers. For the Újház ZÉG retail website, we developed a clear, multi-level product catalog, dedicated content sections for retail operations, and features supporting business partnerships. We also built custom content management systems for both websites, making it easy to update existing information and publish new content.

Overall, the two projects resulted in a cohesive digital presence tailored to the company’s distinct business needs. The websites professionally communicate the company’s activities, effectively support customer acquisition, and provide a stable foundation for future content and functional enhancements.