Кейс: разработка фирменного стиля для компании «Эталон комфорта»

Мы несколько месяцев вели клиенту контекстную рекламу. На основе поведенческой статистики и отзывов от аудитории сделали вывод, что дизайн сайта не вызывает доверие. Дополнительно мы занимались поисковым продвижением, а для улучшения показателей в поисковиках нужно было изменить отдельные блоки на сайте. Заказчик сам собирался заняться редизайном, а потому вскоре поручил нам задачу на обновление сайта.

Как мы пришли к выводу, что дизайн сайта не вызывает доверие? Наши исследования показывают, что впечатление клиента от компании и вероятность покупки зависит от следующих факторов:

• Наличие необходимых для клиента вкладок, удобная и незапутанная структура сайта.
• Фоновая заставка сайта и цветовая гама, в которой выполнен сайт. Цвета на сайте должны отражать особенности бизнеса, его принципы.
• Скорость загрузки сайта.
• Качество картинок в разделе с каталогом товаров или услуг. Понятные тексты в карточках.

Мы начали работу с переработки технической части сайта. Портал работает на CMS 1C-Битрикс. Чтобы интегрировать новую верстку, нам нужно было обновить ядро и модули движка до актуальных на тот момент версий.

Мы спроектировали новую структуру блоков под посетителей. Вот как выглядел старый главный экран:

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

В новой версии главного экрана мы сильно упростили дизайн, оставив максимум визуала и минимум текста:

На фон поместили легкие приятные тона, выполненные в акварельном стиле. Пользователя встречает большая картинка с примером ремонта, который делают в компании. В блоке с текстом – слоган и УТП. И только ниже небольшая кнопка заказа. Раздел услуг увеличили, добавив большие фотографии.

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

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

На новую страницу с прайс-листом поместили простую таблицу с тарифами и ценами:

Чтобы узнать особенности каждого тарифа, достаточно кликнуть по значку плюса справа от кнопок:

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

Дополнительно мы перерисовали заказчику логотип.

Ушли от грубого вытянутого шрифта в пользу более компактного и «уютного». Картинку сделали более светлой, добавив градиенты.