KLO Agro

KLO Agro is a large agricultural holding that is part of KLO, one of Ukraine’s largest fuel station networks with a long-standing history.

The KLO Agro team approached us to create a corporate website that would serve as a presentation platform for the company’s products, tell the story of the project’s foundation, its mission and strategy, feature job vacancies and other corporate information, and provide contact forms for potential partners to connect with KLO Agro directly through the website.

We began with a detailed briefing and formed clear technical requirements together with the client. This was followed by the documentation and project planning stage. Our project managers worked closely with the KLO Agro team at every stage – from the very beginning to the final delivery.

Once all details were agreed upon and the roadmap was defined, we started creating design concepts for the future website.





Design

We began by developing a digital identity for KLO Agro to reflect the corporate spirit while striking a balance between seriousness and a friendly approach. The website needed to feature bright colors, animations, and interactive blocks without overwhelming potential partners with excessive playfulness.

Two identity concepts were created, which the KLO Agro team refined further with the help of their specialists. Together with the client, we developed a logo that ties the company to KLO while incorporating a leaf symbol to highlight its connection to the agricultural sector.





UX/UI and Development

After finalizing the company’s digital identity and receiving approval of the style guide from the client, we proceeded with UX/UI concepts and animations for the website. We created over five design concepts, and once the final version was approved, we moved to producing high-fidelity screens in Figma.

With all screens and the design system completed, our developers began working on the frontend and backend parts of the project.


Frontend and Animations

For the frontend, we chose Nuxt.js – the most suitable framework for projects with many pages, animations, and high loads.

We implemented a variety of interactive blocks and animated elements. For example, the company’s identity included graphical objects such as fruits and vegetables, which we integrated into the website and animated so that their eyes followed the user’s cursor. We also implemented smooth block transitions, page loading animations with a custom loader, and responsive feedback for every UI component. Each element was carefully designed with micro-interactions to make the site engaging and dynamic.





Testing and Backend

After completing the first version of the site, we conducted thorough testing together with the client, collecting feedback on each screen to achieve a flawless result. Once the final adjustments were made to the design and frontend, we handed over access to the administrative panel, allowing the client’s team to begin adding content, copywriting, and uploading photos and videos.

The backend was developed on React.js, resulting in a convenient admin panel that allows the client to manage all site content with ease – from editing pages and adding products to handling job postings and processing inquiries from contact forms.


Results

After several months of work, we delivered a complex and fully functional website featuring a large number of unique pages, the ability to add products across five different categories and entities, manage job vacancies, and handle all content and feedback forms.

The KLO Agro website is a scalable solution that supports unlimited content growth and future expansion of categories. It serves as a powerful tool to strengthen the company’s digital presence, support its development, and facilitate business growth through a modern and interactive platform.