study

Корпоративний сайт та інтернет-магазин сонячної енергетики Solar Market

Дизайн головної сторінки проєкту Корпоративний сайт та інтернет-магазин сонячної енергетики Solar Market

Задача

Спроєктувати корпоративний сайт та інтернет-магазин сонячної енергетики Solar Market з інтерактивним калькулятором окупності СЕС та адаптивними версіями.

Зроблено

Аналіз

Дизайн

Десктоп

Адаптиви

Анімації

Аналіз конкурентів

На першому етапі дослідили 8 українських компаній у ніші сонячної енергетики (Sun-Energy, Solar-Tech, Сонячний Дім, AlfaSolar, EkoTechnik та ін.). Проаналізували структуру їхніх каталогів, подачу готових комплектів СЕС і калькуляторів дохідності, виявивши головну проблему ринку — візуальну перевантаженість і складність самостійного вибору обладнання.

Таблиця аналізу конкурентів

Юзер персони

Сформували 4 детальні портрети цільової аудиторії з різними сценаріями покупки: власники приватних будинків, які шукають енергонезалежність, приватні інвестори під «зелений тариф» та представники бізнесу. Для кожної персони зафіксували бюджетні очікування, технічні бар'єри та критерії довіри до підрядника.

Ангеліна

Ангеліна

Ольга

Ольга

Андрій

Андрій

Михайло

Михайло

User journey map

Побудували карту шляху клієнта (CJM) через 8 етапів: від усвідомлення потреби в пасивному доході та пошуку надійної компанії — до порівняння альтернатив, замовлення станції під ключ і подальшого апгрейду. На кожному кроці синхронізували емоційну криву користувача з конкретними продуктовими рішеннями на сайті.

Карта шляху користувача

User flow

Спроєктували розгалужену схему призначених для користувача сценаріїв (User Flow), що об'єднує інформаційні розділи корпоративного сайту з повноцінною e-commerce воронкою. Схема охоплює переходи через калькулятор прибутку, вибір готових рішень, порівняння обладнання в каталозі та оформлення замовлення.

Схема сценаріїв користувача

Головна

Головна сторінка Solar Market поєднує чисту синьо-білу палітру технологічного бренду з наочною фінансовою аргументацією. На сторінці представлено річну генерацію та дохід від СЕС у цифрах, напрямки проєктів (приватні будинки, дахи підприємств, агросектор), порівняння інвестицій у сонячну станцію проти купівлі квартири під оренду, реалізовані об'єкти на карті України та етапи монтажу.

Головна сторінка

Зелений тариф

Освітньо-конверсійна сторінка про «Зелений тариф» простими словами пояснює юридичний механізм продажу надлишків електроенергії державі. Інтерфейс містить порівняльну таблицю вартості та окупності станцій на 5, 10, 15, 20 і 30 кВт, графік динаміки росту підключень і покроковий розбір 4 етапів оформлення договору з обленерго.

Сторінка Зеленого тарифу

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });
Розробник

Color Styles

Pink
Purple
Orange
Green
Blue
Дизайнер

Про нас

Іміджева сторінка розкриває експертизу інженерної команди та історію розвитку компанії з 2015 по 2024 рік у форматі наочного таймлайну. Окремий блок фокусується на 4 головних гарантіях: офіційна гарантія на обладнання, точне моделювання генерації у PVSyst, безкоштовний 3D-проєкт із виїздом на об'єкт та юридичний супровід.

Про компанію

Готові рішення

Сторінка готових рішень для приватних будинків допомагає обрати тип станції (мережева, гібридна або автономна) без заглиблення у складні комплектуючі. У нижній частині порівнюються 3 сформовані пакети — Start (5 кВт), Pro (15 кВт) та Ultra (20 кВт) із повним переліком обладнання, річною економією та терміном окупності.

Готові рішення для дому

Інтернет-магазин

Повноцінний e-commerce модуль для продажу сонячних панелей, інверторів, акумуляторів та кріплень. Спроєктовано каталог із технічними фільтрами, детальну картку товару з характеристиками й документацією, таблицю порівняння моделей, покроковий чекаут та екран підтвердження замовлення.

Категорія товарів

Категорія товарів

Оформлення замовлення

Оформлення замовлення

Замовлення прийняте

Замовлення прийняте

Картка товару

Картка товару

Порівняння товарів

Порівняння товарів

Особистий кабінет

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

Список порівнянь

Список порівнянь

Особистий кабінет

Особистий кабінет

Обрані товари

Обрані товари

Мої замовлення

Мої замовлення

Калькулятор

Інтерактивний 7-кроковий квіз-калькулятор прибутку перетворює складний інженерний розрахунок на просту діалогову форму. Користувач послідовно обирає область на карті України, тип будівлі, кут нахилу та орієнтацію даху, поточні витрати на світло й затінення, отримуючи у фіналі розрахунок річного доходу в доларах, рекомендовану потужність СЕС та термін окупності.

Кроки калькулятора окупності

Планшет версія

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

Головна

Головна

Порівняння інвестицій

Порівняння інвестицій

Картка товару

Картка товару

Розрахунок прибутку

Розрахунок прибутку

Категорія товарів

Категорія товарів

Особистий кабінет

Особистий кабінет

Мобільна версія

Повна мобільна адаптація корпоративних сторінок, каталогу обладнання та особистого кабінету. Великі таблиці окупності СЕС, порівняння комплектацій і фільтри інтернет-магазину трансформовані у зручні картки та мобільні шторки для комфортного перегляду зі смартфона.

Мобільна версія - мобільний інтерфейс 1
Мобільна версія - мобільний інтерфейс 2
Мобільна версія - мобільний інтерфейс 3
Мобільна версія - мобільний інтерфейс 4
Мобільна версія - мобільний інтерфейс 5
Мобільна версія - мобільний інтерфейс 6
Мобільна версія - мобільний інтерфейс 7
Мобільна версія - мобільний інтерфейс 8
Мобільна версія - мобільний інтерфейс 9
Мобільна версія - мобільний інтерфейс 10
Мобільна версія - мобільний інтерфейс 11