KLO Agro

KLO Agro - великий агрокультурний холдинг, який є частиною компанії KLO, однієї з крупніших в Україні мережі АЗС, з багаторічною історією


Початок проєкту

До нас звернулась команда KLO Agro задля реалізації корпоративного сайту, який мав закривати презентаційні задачі продуктів компанії. А також розповідати історію заснування проєкту, його цілі, місію та стратегію, розміщувати в собі вакансії та іншу корпоративну інформацію, контакти і форми для звʼязку потенційних партнерів з компанією KLO Ago через сайт та багато іншого

Ми звʼзалися з командою KLO Agro для брифування та формування чітких технічних вимог, після цього почався процес формування документації та планування проєкту. Наша команда менеджерів тісно працювала з командою замовника на всіх етапах, від початку до кінця

Коли всі деталі були узгоджені і план проєкту було побудовано, ми приступили до створення дизайн-концептів майбутнього сайту





Дизайн

Ми почали з розробки діджитал-айдентики для компанії, щоб передати корпоративний дух KLO Agro, але замовник мав на меті збалансувати між корпоративним та серйозним виглядом та frendly-підходом. Тобто сайт повинен був містити яскраві кольори, анімації та інтерактивні блоки, але водночас не збивати цим потенційних партнерів компанії

Ми створили 2 дизайн-концепта айдентики, які команда KLO Agro розвинула також за допомогою своїх спеціалістів. Разом з замовником ми створили логотип, який передає причетність компанії до KLO та містить символ листка, як відсилку до того, що це бізнес в агро-сфері





UX/UI та Розробка

Після створення діджитал-айдентики та отримання від замовника фінальних варіантів стилів компанії, ми взялися за створення концепцій інтерфейсів та анімацій майбутнього сайту. Загалом ми створили більше 5 концептів та коли ми узгодили з замовником фінальний варіант, ми запустили процес дизайну High fidelity екранів в Figma

Коли всі екрани були завершені та мали повноцінні макети та дизайн-систему, ми почали процес розробки Frontend та Backend частини проєкту





Frontend та анімації

Найкраще рішення для реалізації подібних проєктів на нашу думку - це фреймворк Nuxt.js, який дозволяє працювати з великою кількістю сторінок, анімацій та навантаження

Наші розробники почали зі створення основних екранів, анімацій та мобільних адаптивів. На сайті було реалізовано багато інтерактивних блоків та елементів. Наприклад в айдентиці компанії були присутні графічні обʼєкти у вигляді овочів та фруктів, які ми інтегрували в сайт та реалізували анімацію руху очей за курсором користувача. Також реалізували плавну появу блоків, провантаження сторінок з лоадером та відгуки на всіх UI-елементах сайту. Абсолютно всі компоненти мають свій відгук та анімацію.


Тестування та Backend

Після створення першої версії сайту ми почали тестування продукту з замовником та отримували відгуки по кожному екрану, щоб досягнути ідеального результату. Після внесення фінальних правок по дизайну та frontend-частині ми передали замовнику доступи адміністративної панелі сайту, щоб команда клієнта могла почати заповнення контенту та формування копірайту, додавання фото та відео-матеріалів на сайту

Backend-частина проєкту реалізовувалась на React.js. Це зручна адміністративна панель, за допомогою якої відбувається менеджеринг всього контенту на сайті.


Результати

Після декількох місяців роботи ми реалізували складний сайт, з великою кількістю унікальних сторінок, можливістю додавати продукти замовника в пʼяти різних категоріях та сутностях, створювати вакансії та менеджерити контент і отримані з форми зворотнього звʼязку заявки

Сайт KLO Agro - це маштабоване рішення, яке дозволяє розвивати категорії всередині, додавати необмежену кількість контенту та розвивати компанію за допомогою такого унікального продукту