Website with product catalog - Heatking
Our task was to create a website equipped with a product catalog (expandable to e-commerce) for Heatking, which was to be a composition combining an interesting design, a wide range of products and a comprehensive presentation of services.
Heatking specializes in the sale of heat pumps, district heating boilers and air conditioning systems, and focuses not only on distributing high-quality products, but also on providing installation and design services.
We welcome you to learn about the process of creating a website for the Heatking brand.
-
Dawid KotrysOwner, creative director -
MateuszUX designer -
WiolettaElementor Developer -
ArekBusiness Support Specialist
Prototype - a mock-up of the website
In the first phase of the site's development, we focused on building an initial mockup - the prototype. At this initial stage, our main goal was to prepare an outline of the site, defining its main parts and functions, even before we started creating a detailed graphic design.
Using tools such as Figma and Miro, we create a space where both our designers and clients can collaboratively analyze and discuss the structure of the site from its early stages. This approach allows for smoother communication, and makes the process of making changes easier and more efficient.
From the beginning, we precisely plan the placement of every element of the site, including the various sections, texts, graphic elements, multimedia and CTA buttons, to guarantee intuitiveness and functionality for future users at every step of using the site.
After the prototype is developed, we organize a meeting with the client in the form of a video call. This is the moment to review the proposed layout together and discuss any possible modifications.
Graphic design
Carefully refined artwork reflects the energy of the company's name, with the theme of "heat" (warmth) expressed at every turn. The site exudes warmth thanks to the dominant colors of red, and each photo is accented with a filter in this color, creating an atmosphere that matches the brand's character.
Clarity and intuitiveness are key features of the site, which can already be seen in the hero section of the main page, where call to action buttons are clearly visible on the background and direct the user to the contact form we implemented or directly to the product catalog. From the very first moment, the user is directed to the relevant sections, and access to various product categories is facilitated by appropriately tailored icons. Important information such as phone number or opening hours is easily accessible and visible at the very top of the page, making it much easier to find the most important information.
Category descriptions on the homepage are presented in an engaging and condensed manner, avoiding excessive text and conveying only the most relevant information.
The catalog is very clear, with products divided into categories that can be selected using filters, which also makes it easy to select by manufacturer name. Each product is described in detail, with the option to read the specifications before submitting an availability request.
In addition to the catalog itself, the site also offers rich additional content, such as blog-style tutorials and a gallery of implementations, which is extremely valuable for potential customers interested in the company's services.
The "about the company" subpage introduces the brand and its advantages, as well as the authentic faces of the people behind it, which builds trust and encourages people to take advantage of the offer.
Coding the page
Implementation The product catalog website was crucial in the process of its creation. For the implementation we used Elementor, which is distinguished by its ease of use and intuitiveness, thus giving our customers the ability to make changes to the content on their own, without the need to involve experts.
The possibility that the client receives through self-editing of the site's content allows for quick adaptation to evolving market requirements and changing user tastes.
During the development of the site, we implemented a number of functionalities to make it even more accessible to the audience and to meet its business goals.
Contact form
We have implemented two types of forms. The first allows interested customers to inquire about a free installation quote. The second form has been placed next to each product and is used to quickly inquire about its availability.
We strongly encourage you to check out this project in full on our profile on Behance. Also, don't forget to take a look at our other projects - you might find something that inspires you.
Dreaming of a professional website for your business? Make an appointment for a free consultation and let's talk about how we can help your business grow!
Let's talk and establish action plan!
