Корпоративний сайт Prospera на WordPress: послуги, IT, експертиза та e-commerce в одній системі
Послуги: UX/UI-дизайн, розробка на WordPress і WooCommerce, адаптивна верстка
Prospera працює з IT-інфраструктурою, інформаційною безпекою, аудитом, консалтингом та супроводом, тому сайт мав показати різницю між напрямами без перевантаження професійною термінологією.
Клієнт може прийти як із конкретною бізнес-задачею, так і з потребою в певному класі системи чи обладнання. Ці сценарії потрібно було розвести в структурі сайту.
Для B2B-клієнта важливі не лише описи послуг, а й реалізовані проєкти, партнерські технології, сертифікації та професійна експертиза команди.
Структуру потрібно було підготувати до окремого товарного напряму з серверами, мережевим обладнанням, системами відеонагляду, комплектуючими та іншими IT-товарами.
Послуги пояснюють формат роботи Prospera з бізнесом, а каталог рішень групує конкретні технологічні класи для інформаційної безпеки та IT-інфраструктури.
Для напрямів передбачили опис задач, склад робіт і зрозумілий порядок взаємодії — від первинного аналізу до подальшої підтримки систем.
Антивірусний захист, SIEM, firewall-рішення, сервери, мережеве обладнання, відеонагляд та інші напрями отримали окремі точки входу.
Кейси показують практичний досвід, сторінка партнерів — технологічну екосистему, а сертифікації та матеріали блогу розкривають компетенції команди.
CTA на ключових сторінках переводять від знайомства з компанією, послугою або рішенням до прямого звернення щодо конкретної задачі.
Архітектуру WordPress доповнили можливістю роботи з товарним каталогом і кошиком для продажу серверів, камер, комплектуючих, кабелів та іншого IT-обладнання.
Темна основа та холодні акценти задали технологічний характер сайту
- Темно-синій використаний для ключових іміджевих секцій
- Світлі площини відведені під основний інформаційний контент
- Блакитні та фіолетові градієнти використані як локальні акценти
- Тонкі координатні лінії повторюються на темних фонах
Великі заголовки з тонким накресленням поєднали з компактним основним текстом і значними відступами між змістовими групами. На довгих сторінках масштаб елементів змінюється від великих іміджевих композицій до компактних карток і списків, тому щільність контенту не залишається однаковою від першого до останнього екрана.
Внутрішні сторінки починаються з однаково побудованого першого екрана
- Логотип і основна навігація розташовані в одному верхньому рядку
- Тип сторінки винесений над великим заголовком
- Короткий опис розміщений безпосередньо під заголовком
- Основний контент починається після чіткої межі першого екрана
Послуги, рішення, кейси, блог, партнери та сторінка компанії мають спільну логіку входу. Назва розділу, великий заголовок і коротке пояснення займають передбачувані позиції, тому різні за змістом сторінки сприймаються як частини одного сайту.
Завершення сторінок побудоване за єдиним сценарієм
- Заклик до дії винесений в окрему повноширинну панель
- Дві кнопки розташовані під коротким поясненням
- Декоративна дуга займає нижню частину CTA-блоку
- Футер поділений на контакти та навігаційні колонки
Послуги розкладені на три інформаційні рівні
-
Назва послуги займає окрему ліву колонку
Піктограма, назва та посилання «Детальніше» зібрані в компактному вертикальному блоці.
-
Основний опис розташований у центральній частині
Середня колонка відведена під пояснення напряму та задач, які охоплює конкретна послуга.
-
Склад робіт винесений у праву колонку
Перелік під заголовком «Включає» поданий окремими короткими пунктами.
-
Кожна послуга займає самостійний горизонтальний рядок
Тонкі розділювачі відокремлюють один напрям від іншого без додаткових карток і фонів.
Каталог IT-рішень побудований із самостійних тематичних секцій
- Великі заголовки відокремлюють класи рішень Інформаційна безпека та IT-інфраструктура подані як різні контентні групи.
- Рішення розташовані в рівній картковій сітці Однакова ширина блоків і стабільні проміжки підтримують регулярний ритм сторінки.
- Піктограма винесена у верхню частину кожної картки Невеликий графічний знак відділений від назви й короткого пояснення рішення.
- Посилання розташоване після основного опису «Детальніше» займає однакову позицію в картках незалежно від довжини тексту.
Після карткового каталогу композиція змінюється: блок «Незалежність від вендорів» побудований асиметрично — текст, список і кнопка розташовані ліворуч, а логотипи партнерів винесені в горизонтальну карусель праворуч. Так на одній сторінці візуально розділені каталог рішень і окремий корпоративний блок.
Кейси та блог отримали різні формати перегляду контенту
-
Кейси доповнені фільтрами за галузями
Категорії розташовані в одному горизонтальному рядку над списком реалізованих проєктів.
-
Кейс займає велику картку з кількома рівнями даних
Назва й опис доповнені тематичними тегами та окремим нижнім рядком із показниками проєкту.
-
У блозі окремо виділена головна публікація
Велике зображення розташоване поруч із категорією, заголовком, анонсом, датою та часом читання.
-
Решта матеріалів зібрана в компактнішу сітку
Зображення, кольорова категорійна мітка, дата, заголовок і короткий опис повторюються в одному форматі.
Сторінку про компанію побудували з кількох різних композицій
- Місію та бачення розмістили у двох великих картках Однакові за розміром світлі блоки поставлені поруч і мають симетричне розташування заголовків та коротких текстів.
- Цінності зібрали в один горизонтальний ряд Чотири однакові за пропорціями модулі утворюють компактну секцію перед великим блоком «Про нас».
- Блок «Про нас» побудували навколо великої світлової графіки Лінія проходить через широку темну секцію, а два текстові фрагменти розташовані в різних частинах композиції.
- Сертифікації винесли в окрему двоколонкову секцію Перелік компетенцій розташований ліворуч, а великий перегляд сертифіката з навігацією — праворуч.
Після парних світлих карток іде темний блок цінностей, далі — широке полотно з графікою та текстом, а завершують основний контент сертифікації на світлому фоні. Кожна наступна секція змінює масштаб і принцип компонування, тому великий обсяг корпоративної інформації не перетворюється на одноманітну послідовність однакових блоків.
Картки партнерів розподілені між напрямами інформаційної безпеки, серверного й мережевого обладнання, віртуалізації та фізичної безпеки.
На сторінці про компанію окремо представлені комплексний підхід, прозорість, клієнтоорієнтованість та експертиза.
У макеті зазначені ISO 27001 Implementation, NIST Cybersecurity Framework, Certified Information Security Manager, Cisco, Microsoft і VMware.
Кейси можна розподіляти за фінансами, виробництвом, retail, державним сектором, логістикою та IT.
Публікації згруповані за інформаційною безпекою, IT-інфраструктурою, аудитом, трендами та новинами.
Корпоративна частина працює зі зверненнями щодо IT-послуг і рішень, а WooCommerce заклав окремий сценарій замовлення обладнання через товарний каталог і кошик.
// Від корпоративної презентації до цифрової платформи IT-інтегратора
Prospera працює одразу з кількома типами складної B2B-пропозиції: консалтингом, IT-інфраструктурою, інформаційною безпекою, аудитом, технологічними рішеннями та обладнанням. Тому сайт із самого початку спроєктували не як набір презентаційних сторінок про компанію, а як систему, в якій клієнт може зайти з різною потребою й отримати відповідний маршрут до потрібної інформації.
Ключовим архітектурним рішенням стало розділення послуг і технологічних рішень. У першому випадку користувач обирає формат роботи з Prospera та розбирається, які задачі охоплює конкретний напрям. У другому — рухається від класу технології або обладнання. Такий поділ прибрав необхідність змішувати консалтинг, впровадження та конкретні системи в одному каталозі й дав кожному типу пропозиції власну логіку подачі.
Технічною основою стали WordPress і WooCommerce. WordPress об’єднав корпоративні сторінки, послуги, рішення, кейси, публікації та інші типи контенту в одній керованій структурі. WooCommerce доповнив її товарним сценарієм із каталогом і кошиком для IT-обладнання. У результаті сервісна та e-commerce-частини не потребували двох окремих сайтів і залишилися в межах одного цифрового продукту.
Окремо розподілили контент, який формує уявлення про компетенції компанії. Партнерська екосистема, сертифікації, реалізовані проєкти та професійні матеріали не зібрані в одному перевантаженому розділі. Кожен тип інформації отримав власне місце й працює в потрібному контексті. Кейси показують практичний досвід, партнери — технологічне охоплення, сертифікації — кваліфікацію, а блог розкриває експертні теми через регулярний контент.
Конверсійний сценарій теж не прив’язали до однієї сторінки послуги. Перехід до консультації повторюється після різних типів контенту, тому користувач може звернутися після знайомства з компанією, перегляду конкретного рішення, кейсу або професійного матеріалу. Єдина структура CTA зберігає однаковий спосіб контакту незалежно від того, яким маршрутом людина прийшла до рішення про звернення.
У підсумку Prospera отримала сайт, який одночасно виконує корпоративну, експертну, сервісну та комерційну функції. WordPress став основою для великої контентної структури, WooCommerce — для товарного напряму, а UX/UI зв’язав різні сценарії в одну систему. Для Kliox цей кейс показує роботу з B2B-проєктом, де дизайн і розробка з нуля охопили не окрему посадкову сторінку, а цілу цифрову архітектуру компанії.
// Рішення для розвитку сервісного та товарного напрямів
Модуль резервує залишок автоматично при оформленні замовлення, синхронізує з 1С і кількома складами в реальному часі та сповіщає менеджера коли пора поповнювати запаси
Замість сотень пунктів меню і зайвих полів — тільки те що потрібно вашій команді. Кожна роль бачить свій інтерфейс, масові дії виконуються за кліки, а не за хвилини
Розумний пошук з виправленням помилок, синонімами, морфологією і автопідказками — покупець знаходить потрібний товар за 2–3 секунди замість блукання по каталогу
