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

Клиент: Клиент из сферы “Окна ПВХ”

О компании: Компания-заказчик имеет многолетний опыт в сфере продажи и установки окон и дверей ПВХ. За время работы специалисты компании обслужили несколько тысяч клиентов.

Основные цели: Создать индивидуальный сайт-каталог с удобным и интуитивно понятным интерфейсом для пользователей. Разработать дизайн в соответствии с корпоративными цветами компании. Оптимизировать его под любые устройства. Функционал сайта должен обеспечить клиенту удобный и быстрый поиск нужных товаров.

Краткий бриф на разработку сайта
Сфера деятельности компанииРеализация и монтаж окон, дверей ПВХ и балконов
Страна, на которую рассчитан сайтБеларусь
Основные товары и услугиОкна и двери ПВХ, балконы; услуги остекления
Целевая аудиторияМужчины и женщины от 25 до 65 лет
Задачи сайтаПредоставление информации о товарах, услугах;
Привлечение новых клиентов и увеличение процента повторных обращений;
Информирование о новостях и акциях
Тип сайтаСайт-каталог
ТарифИндивидуальное решение
CMS WordPress
ХостингHoster.by
Пожелания заказчикаИспользование корпоративных цветов в дизайне, наличие на сайте конструктора дверей и стекол, удобный каталог для быстрого поиска нужного товара

Обращение

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

Фирменная палитра и типографика

Дизайн сайта основывался на цветах логотипа компании: голубом, зеленом и оранжевым. При этом цвет голубого был слишком яркий для сайта и заказчику было предложено несколько вариантов синего и голубого, чтобы он выбрал наилучший для сайта. Таким образом, оттенок был трансформирован в более спокойный синий. Вместе эти цвета создают гармоничное сочетание, которое может привлечь внимание пользователей и создать у них положительные эмоции.

Цвета

#eba002
#4fbc50
#4b6fa5
#edf2f8

Процесс разработки

Стоит обратить внимание на шапку сайта. В ней находится вся необходимая информация для быстрой связи клиента с компанией. Цветом выделены наиболее важные элементы шапки: каталог, список конструкторов, кнопки калькулятора и обратного звонка. Именно благодаря цветовым акцентам удается обратить внимания пользователей на наиболее важные разделы сайта.

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

На внутренних страницах оконных профилей реализованы хорошо структурированные блоки с ценами, более усовершенствованы, чем на старом сайте клиента. Пользователь видит в таблице все доступные размеры и модели профиля, цену на них. По кнопке “Подробнее” клиент может более подробно ознакомиться с характеристиками профиля и заказать конкретный профиль в один клик.

К слову, для удобства клиента в административной панели была реализована привязка цен к курсу НБ РБ. Цены на товары указываются в долларах, а выводятся в белорусских рублях.

Конструкторы

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

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

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

Калькулятор разрабатывался в тесной связке с отделом продаж компании, чтобы предоставить наиболее четкий расчет для клиентов.

Раздел отзывов

Помимо отзывов с Яндекса и Google на сайт был добавлен блок с площадками-отзовиками, где присутствует компания. Таким образом, клиенты смогут почитать и оставить отзыв на других площадках.

Также на странице “Отзывы” есть слайдер с отзывами на фирменных бланках. Такой вид отзывов свидетельствует о высоком качестве услуг и еще больше повысит доверие пользователя к компании.

Наполнение сайта происходило в тесной связке с заказчиком. Благодаря нашему опыту разработки и опыту клиента в сфере продаж окон мы смогли реализовать очень удобный функционал и структурировать информацию максимально эффективно для наилучшей конверсии. В ходе наполнения сайта нами было добавлено более 300 товарных позиций.

На странице “Контакты” нами была добавлена не только интерактивная карта, через которую водители могут посмотреть, как проехать до офиса компании, но и блок с вариантами проезда до офиса общественным транспортом. На схеме отмечены остановки общественного транспорта, а справа представлена информация, каким именно транспортом можно доехать.

Это дает возможность всем клиентам легко ознакомиться с адресом и быстро добраться до офиса заказчика.

Скорость загрузки

Высокая скорость загрузки является нашим обязательным пунктом в разработке сайта для наших клиентов. Наша команда добилась высоких показателей в 90 баллов на десктопных устройствах и 90 баллов на мобильных. Быстрая загрузка сайта обеспечивает более удобный и приятный пользовательский опыт. Пользователи не будут ждать долго, чтобы получить нужную информацию, и это может снизить отказы от сайта.

Анализировать
Мобильные устройства
Компьютер
90
0-49
50-89
90-100
Мобильные устройства
Компьютер
90
0-49
50-89
90-100
Показания сервиса
Google PageSpeed Insights

Результаты

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

Исходя из этого можно на примере просчитать, какой дополнительный доход клиент получит при том же количестве трафика. Возьмем за планируемую конверсию сайта – 9%. Используя случайные данные, которые представлены справа, можно предположить, что новый сайт заказчика принесет ему на 232000 BYN/месяц от реализации товаров больше, чем старый.

Пример

Мы соблюдаем НДА и не разглашаем реальные показатели клиентов! Цифры справочные и ненастоящие, представлены для наглядного примера расчета эффективности качественной разработки сайта.