Страница для домовладельцев DERUFA
В разделе «Покупателям» на сайте салона красок мы сделали страницу для тех, кто решил красить сам. Ролик на первом экране, выбор задачи, каталог, девять статей и заявка с фотографией.
Покупатель без профессии маляра
DERUFA Башкортостан - салон красок в Уфе, на Октябрьской Революции, 77. В республике компания работает 25 лет, колерует по образцу и выезжает на объект. На сайте у неё есть раздел «Покупателям»: домовладельцам, дизайнерам, строителям, субдилерам.
Дизайнеру и строителю нужны каталог и спецификации. Домовладелец приходит с другим: у него стена, которую пора обновить, и страх испортить результат. Про серии красок он выяснит потом, сначала ему нужен спокойный разговор.
Лендинг для этой аудитории мы уже делали, он описан в отдельном кейсе. Здесь история другая: страница стоит внутри основного сайта и устроена по-своему, с видео, каталогом, статьями и объектами.
Первый экран с живой стеной
Первый экран держит ролик: пара красит стену в светлой комнате. Заголовок «Хотите покрасить стены сами? У вас получится.» лежит слева, где кадр светлый, поэтому читается без подложки. В углу кнопка паузы, для телефона загружается отдельный ролик.
Всего на странице одиннадцать роликов: первый экран, четыре карточки выбора задачи, три карточки со страхами и три карточки статей. Загружаются они по мере прокрутки, так что тяжёлые файлы не тормозят начало страницы.
Ролик во всю ширину, кнопка «Подобрать краску» и телефон салона в шапке.
Короткие ролики в блоках выбора задачи, страхов и статей. Под каждым лежит обложка, ролик включается поверх неё.
Для узких экранов свой ролик, чтобы мобильный трафик не тянул десктопные файлы.
Шесть задач вместо каталога
Под первым экраном вопрос «Что вы хотите сделать?»: обновить комнату, подобрать цвет, реализовать идею, сделать акцентную стену, подобрать материалы или решить нестандартную задачу. Ниже баннер «Есть фотография или идея? Покажите её нам». В него можно приложить фото помещения, картинку из Pinterest, визуализацию или снимок образца цвета, JPG, PNG или PDF до 10 МБ.
Покупатель говорит, что хочет сделать, а не листает разделы каталога.
Фото, референс или образец цвета. Специалист видит задачу до звонка.
Рядом поле для текста: форма принимает и слова, и файл.
Пять шагов и три причины не браться
Блок «Можно сделать самостоятельно» раскладывает покраску на пять шагов: подготовить поверхность, загрунтовать, проверить цвет на стене, купить инструменты, нанести покрытие. Следом идут страхи: краска легла неровно, оттенок на стене не похож на образец, остались полосы.
Каждый шаг в две строки, без технических терминов.
Три карточки с роликом. Про полосы объяснена причина: в отопительный сезон воздух сухой, вода из состава уходит быстро, краска схватывается под валиком.
«Исключить ошибки» стоит сразу под разбором, пока страх свежий.
Выкрас перед покупкой, потом банки
Блок «Чтобы получить хороший результат, важно выбрать цвет и учесть все нюансы» перечисляет, чем помогает салон: колеровка по образцу, если нужного оттенка нет в веерах (там больше 50 тысяч оттенков), материал под задачу, выкрас перед покупкой, деревозащитные составы. Дальше три направления: интерьер, фасад по штукатурке, фасад по дереву.
Все 12, ПРОФ 8, ЕВРО 2, ЭКОНОМ 2. Уровень переключается одним нажатием.
Название серии, уровень, расход в м² на литр или килограмм и фасовка.
Ссылка «Смотреть весь каталог на derufa-bash.ru» ведёт в основной каталог.
Семь сценариев и шесть реальных работ
Карусель «Одна задача, много возможностей» собрала семь сценариев: стены и потолок, дерево, мебель, фасад, акцентная стена, декоративные поверхности, сложная поверхность. Под ней форма из двух полей, имя и телефон. Ниже слайдер «Реальные объекты DERUFA в Уфе»: шесть работ с фильтром по интерьерам, фасадам и общественным объектам. У каждой указаны материал, год и дизайнер проекта.
Девять статей под вопросы покупателя
Раздел «Разберитесь в ремонте вместе с DERUFA» собран из девяти карточек с обложкой, заголовком и началом текста. Темы взяты там, где новичок спотыкается: откуда берутся полосы после покраски, как разложить цвет по правилу 60-30-10, чем отличаются степени блеска, когда полимерная шпатлёвка лучше гипсовой, какую краску брать под обои под окраску.
Обложка, заголовок, два предложения вступления и ссылка «Читать».
У трёх карточек поверх обложки играет короткий ролик.
Человек ищет в поиске «почему полосы после покраски», находит ответ и остаётся рядом с салоном.
Задача и телефон у стены
Краску выбирают у стены, с телефона. На узком экране заголовок, кнопка «Подобрать краску» и ролик идут одной колонкой, меню сворачивается, а задачи, каталог и объекты выстраиваются по одной карточке в ряд.
Что внутри страницы
Видео
- Ролик на первом экране с паузой
- Отдельный ролик для телефона
- Одиннадцать роликов на странице
- Загрузка по мере прокрутки
Выбор задачи
- Шесть сценариев на первом экране
- Пять шагов самостоятельной покраски
- Три страха с объяснением причины
Заявки
- Пять форм на странице
- Имя, телефон, согласие на обработку данных
- Описание задачи и файл до 10 МБ: JPG, PNG, PDF
Каталог
- Три направления материалов
- Двенадцать интерьерных красок
- Фильтр ПРОФ, ЕВРО, ЭКОНОМ
- Расход и фасовка в карточке
Объекты и статьи
- Шесть объектов в слайдере с фильтром
- Материал, год и дизайнер у каждого
- Девять статей с обложками
Контакты
- Яндекс Карты с адресом салона
- Режим работы и два телефона
- Плашка cookie: «Только необходимые» или «Принять все»
- Политики и согласие на обработку данных
Синий знак и красная кнопка
Палитра идёт от знака DERUFA: глубокий синий для заголовков и выбранных карточек, красный для главной кнопки и названий серий. Заголовки набраны шрифтом Century Gothic, основной текст Manrope. Фон светлый, чтобы главным цветом на странице оставались стены на фото и банки в каталоге.
Что получил клиент
Страница отвечает на вопросы в том порядке, в каком их задаёт новичок, и в каждом блоке оставляет дорогу к заявке. Цифр обращений от клиента у нас нет, и придумывать их мы не станем. Вот что на странице есть.
Частые вопросы
Сколько стоит такая страница с видео и статьями?
Лендинг в PivotPoint начинается от 60 000 ₽, многостраничный сайт от 120 000 ₽. Страницу вроде этой считаем по объёму: сколько роликов, статей, объектов и форм. В DERUFA вошли первый экран с видео, выбор задачи, пять шагов, каталог с фильтром, слайдер объектов, девять статей, пять форм и мобильная версия.
Не тормозит ли страница из-за одиннадцати роликов?
Тяжёлые файлы грузятся по мере прокрутки: пока блок не дошёл до экрана, вместо ролика стоит обложка. Для телефона отдельный ролик первого экрана, а в углу кнопка паузы для тех, кого движение отвлекает.
Чем эта страница отличается от лендинга DERUFA?
Лендинг стоит особняком и ведёт к одной заявке. Эта страница живёт в основном сайте, в разделе «Покупателям», рядом со страницами для дизайнеров, строителей и субдилеров. Поэтому в ней есть каталог, объекты и статьи, а видео оживляет карточки задач, страхов и статей.
Зачем статьи на странице, которая должна продавать?
Новичок гуглит свою беду: почему остались полосы, какой блеск выбрать. Статья отвечает на этот вопрос, а рядом стоят форма и телефон салона. Продажа начинается с ответа, а не с каталога.
Как страница работает на телефоне?
Заголовок, кнопка «Подобрать краску» и ролик идут одной колонкой, меню сворачивается, карточки задач, каталога и объектов выстраиваются по одной. Формы остаются полноразмерными, чтобы заявку можно было отправить одной рукой.
Похожие кейсы
Работы из этого кейса входят в услугу «Продающие сайты» направления «Разработка».