Редизайн сайта установщика солнечных панелей Green Street Solar

Аватар пользователя ADCI_Solutions ADCI_Solutions 10 января в 10:58

О клиенте

Green Street Solar — американская компания по установке систем электроснабжения на солнечных батареях для домов и малого бизнеса. Благодаря компании Делавэр и Мэриленд превратились в экологичные штаты и перестали зависеть только от ископаемого топлива.

Цели проекта

Клиент чувствовал, что у сайта была низкая конверсия — посетитель не доходил до контактной формы. Так что выше других задач клиент ставил редизайн сайта и распутывание его чересчур запутанной структуры.

Дизайн

Чтобы сайт работал на клиента, ему, как мы посчитали, не хватало трёх вещей: обновлённой навигации, обновлённого дизайна и обилия визуального контента. Также до каждой группы клиентов нужно было донести, как они смогут сэкономить на использовании солнечных панелей.

ПРОСТАЯ СТРУКТУРА

Старый сайт грешил обилием повторов информации и лишних деталей, и это портило UX. Мы начали с того, что разбили клиентов на домовладельцев, коммерческие и некоммерческие организации. После этого мы разработали несколько вариантов карты сайта и остановились на самой простой и подходящей для каждого типа клиентов. На основе этой карты мы разработали вайрфреймы, чтобы по-новому структурировать информацию для каждой страницы. Так мы распределили контент по смысловым секциям и убрали дублирующуюся информацию.

ОБНОВЛЁННЫЙ ИНТЕРФЕЙС

Старый сайт не давал потенциальному клиенту полного представления, чем занимается компания и как работают солнечные панели. Эту проблему решили фотографии и видео, идущие фоном. Сайт стал живым и привлекательным.

Цветовая палитра стала проще и контрастнее.

Сайт не был адаптивным и по-разному смотрелся на десктопе и мобильных устройствах. Мы это исправили.

КАК СОЛНЦЕ ЭКОНОМИТ ДЕНЬГИ

Днём, когда много солнца и мало энергопотребления, избыток солнечной энергии идёт в общую сеть и электросчётчик крутится в обратную сторону. Ночью всё наоборот: солнца нет, и помещение питается от электростанции. Утром начинается потребление солнечной энергии и вращение счётчика замедляется. Это ежегодно экономит владельцам домов и бизнеса тысячи долларов. Но как об этом рассказать?

Вместо того, чтобы объяснять принцип работы пользователям сайта текстом, мы показали это в интерактивном блоке. Пользователь переключает утренний, дневной и вечерний режим и смотрит, как это отражается на вращении счётчика.

СОВРЕМЕННЫЙ ЛОГОТИП

К текстовой части мы добавили логотип, подчёркивающий специализацию компании, привлекающий внимание и за счёт своей простоты подходящий любым маркетинговым материалам.

Бэкенд и фронтенд

Простота сайта позволила нам не использовать на бэкенде никаких технологий, кроме Drupal 8.

Для управления контентом используются модули Paragraphs и CKEditor с несколькими дополнительными контрибными и кастомными модулями. Модуль Media помогает управлять медиаконтентом наравне с обычным.

C модулями Entity Embed и Entity Browser стало удобнее вставлять в текст картинки и другой медиа-контент, редактировать их внешний вид и положение в контенте.

Фронтенд прост, но эффективен: препроцессор препроцессор SASS/SCSS для CSS, нативный JavaScript и webpack, который собирает JavaScript и CSS-файлы.

Самыми сложными частями проекта оказалась интерактивная карта с всплывающими сообщениями и вкладки для переключения между страницами. Их дизайн предусматривал логику, которую пришлось кастомизировать, например, переходы между объектами, где установлены системы.

Результат

Спустя 3 года после редизайна сайт продолжает работу, а клиент обращается к нам по вопросам обновлений и техподдержки. Мы помогли клиенту в достижении целей — в течение года количество заказов на установку солнечных систем выросло в 2,5 раза.

Комментарии

Аватар пользователя vladtulku vladtulku 10 января в 16:25

Я конечно умею пользоваться гуглом, но что Вам мешало добавить ссылку на сие творение?