Можно бесконечно смотреть на три вещи: на воду, на огонь и на то, как соседи делают ремонт. Каждый, кто хоть раз сталкивался с переделкой помещений, знает: это долго, дорого и больно. Даже если есть план, обязательно что-то пойдёт не по плану. Даже если руки строителей прямые, всё равно будут косяки. Даже если всё заказано через одну контору, обязательно какой-то чёртов рулон обоев потеряется, а в новой партии он будет почему-то не того оттенка.
Пока вы вспоминаете добрым (или не очень) словом гостей из солнечного Таджикистана, которые когда-то делали вам ремонт, мы расскажем про ребят из «Легкорем» — они решают боль клиента и делают комплексный ремонт (дизайн-проект, демонтаж и сами работы) без головняков, косяков и с минимальными усилиями самого клиента. Даже материалы сами покупают — больше не надо тратить выходные на выматывающие прогулки по строительным магазинам.
Но чтобы отличаться от миллиарда конкурентов, важно не только клёвое предложение, но и грамотная его подача. Вот этим, как раз, занялись мы :)
Пока вы вспоминаете добрым (или не очень) словом гостей из солнечного Таджикистана, которые когда-то делали вам ремонт, мы расскажем про ребят из «Легкорем» — они решают боль клиента и делают комплексный ремонт (дизайн-проект, демонтаж и сами работы) без головняков, косяков и с минимальными усилиями самого клиента. Даже материалы сами покупают — больше не надо тратить выходные на выматывающие прогулки по строительным магазинам.
Но чтобы отличаться от миллиарда конкурентов, важно не только клёвое предложение, но и грамотная его подача. Вот этим, как раз, занялись мы :)
Задачи
1
Обновить дизайн сайта: предложить яркое современное решение, чтобы выделить клиента среди других игроков рынка.
2
Продумать навигацию и структуру и уделить внимание пути пользователя по сайту.
3
Снять большинство вопросов и возражений, чтобы облегчить нагрузку менеджеров.
4
Предусмотреть удобные калькуляторы для расчета итоговой стоимости, которые могут повлиять на выбор целевой аудитории.
5
Продемонстрировать портфолио клиента на сайте: с фото «до-после», спецификой проектов и указанием использованных материалов.
Аналитика
«Мероприятие под ключ», «сайт под ключ», ещё какая-то услуга «под ключ» — бесит, правда? Всё потому, что «под ключ» на самом деле сдаётся не что попало, а отремонтированные помещения, где подрядчик сделал все работы от и до: и полы выровнял, и оштукатурил всё, и проводку провёл и бог весть что ещё проделал — заходи-живи.
Так вот. Даже в строительной сфере это выражение стало невыносимым штампом, который можно увидеть на каждом втором сайте. Потенциальные клиенты так этого «наелись», что звучит неубедительно. А значит, надо убеждать чем-то более весомым — чётким процессом, классными предложениями, понятными преимуществами и, конечно, реальными КЕЙСАМИ. А заодно снять самые частые вопросы, без ответа на которые клиент пройдёт мимо.
Так вот. Даже в строительной сфере это выражение стало невыносимым штампом, который можно увидеть на каждом втором сайте. Потенциальные клиенты так этого «наелись», что звучит неубедительно. А значит, надо убеждать чем-то более весомым — чётким процессом, классными предложениями, понятными преимуществами и, конечно, реальными КЕЙСАМИ. А заодно снять самые частые вопросы, без ответа на которые клиент пройдёт мимо.
Типичные вопросы потенциальных клиентов
Прототип нового сайта «Легкорем» закрывает большинство клиентских возражений и выдаёт подробную информацию порциями
Дизайн
Клиент пришёл с референсами — нравились светлые страницы с нестандартной вёрсткой и яркими акцентами. Мы приправили их свежими трендами веб-дизайна и получили очень солнечную концепцию — такую, которая обязательно запомнится пользователю и выделит клиента среди других.
Евгений
Арт-директор
«Легкорем» не просто ремонтируют, а знают, как сделать счастье — отталкиваясь от этого посыла и референсов заказчика, у нас получился макет с позитивными жёлтыми плашками и няшными, сочными 3D-объектами.
Мы продумали простую идентификацию проектов в списке с помощью иконок: для каждого типа работ (для себя, для сдачи и для продажи) свой символ. Он есть на плашках, предлагающих рассчитать стоимость проекта, и в блоке с кейсами — появляется при наведении на картинку.
 |  |
Разработка
Рассказывать о ремонте словами можно довольно долго, но куда проще показать фотографии или видео. Поэтому слайдеров в этом проекте — много :) И первый из них можно встретить уже в промо-блоке — здесь клиент может разместить кейс и рассказать о нём всего в всего в двух слайдах: сначала разместить фото хозяев отремонтированной квартиры, а следом — видео с этапами создания проекта или прогулкой по готовым комнатам.
Александр
Разработчик
Почти все слайдеры в проекте пришлось писать с нуля — это было проще, чем заморачиваться с сочетаниями уже готовых решений. Со слайдером в промо было много вопросов: как именно он должен работать, сколько картинок может в себя вмещать, будет ли видео. Вначале я отладил его работу для слайдов с картинками, а после добавил вставку видео по ссылке — клиенту будет удобно менять контент в админ-панели. Кстати, второй слайдер на странице тоже написан с нуля.
Следом — слайд с преимуществами. Его фишка в том, что клиент может загрузить разные картинки на бэкграунд, которые будут меняться при перелистывании.
Александр
Разработчик
Здесь использовали 2 готовых слайдера из библиотеки, которые связали между собой (у того, что в бэкграунде, отключили переключалки для слайдов). Подобные слайдеры используются сразу на нескольких страницах в проекте.
Думали, это всё? Идём дальше по главной — блок с кейсами и-и-и… снова слайдер. На этот раз он собран аж из трёх разных модулей, которые заботливо связаны между собой и — вжух-вжух — быстро работают:
- слайдер снизу показывает превью готовых проектов и листается лёгким движением руки;
- при клике на превью подключается другой слайдер — он меняет большое фото сверху и описание конкретного проекта;
- внутри большого фото третий слайдер — просто нажмите и потяните картинку влево.
Каждый блок со слайдером на главной сопровождается каким-то прикольным 3D-объектом: горшочком с зеленью, дизайнерским стулом или ламповым светильником. Такие объекты скроллятся, оживляя страницу, и появляются не только на главной.
Александр
Разработчик
Для объектов мы также написали универсальное решение с нуля: было важно, чтобы объекты везде корректно работали, а код было легко использовать на разных страницах.
Ещё одна фишка сайта — калькулятор стоимости ремонта, состоящий из 4-х шагов.
Шаг 1
Для начала нужно выбрать тип проекта: для себя, для сдачи или для продажи. От этого параметра зависит стоимость и выбор материалов: когда делаешь ремонт для себя, стараешься выбирать лучшее. Если под сдачу в аренду — хочется, чтобы материалы были недорогими, но износостойкими. Отделка на продажу — вообще отдельная история.
Шаг 1
Для начала нужно выбрать тип проекта: для себя, для сдачи или для продажи. От этого параметра зависит стоимость и выбор материалов: когда делаешь ремонт для себя, стараешься выбирать лучшее. Если под сдачу в аренду — хочется, чтобы материалы были недорогими, но износостойкими. Отделка на продажу — вообще отдельная история.
Шаг 2
Внутри каждой категории есть три тарифа — под разный бюджет. И угадайте, что? Здесь тоже есть слайдер! Работает по ховеру при наведении на карточку тарифа. Также мы добавили галочку «с мебелью», которая может появляться по ховеру (если заказчик захочет) — внутри каждой карточки предусмотрено 2 слайдера: один с фото ремонта без меблировки, второй с интерьерами, обставленными мебелью. Галочка отвечает за то, какой из них показывать.
Внутри каждой категории есть три тарифа — под разный бюджет. И угадайте, что? Здесь тоже есть слайдер! Работает по ховеру при наведении на карточку тарифа. Также мы добавили галочку «с мебелью», которая может появляться по ховеру (если заказчик захочет) — внутри каждой карточки предусмотрено 2 слайдера: один с фото ремонта без меблировки, второй с интерьерами, обставленными мебелью. Галочка отвечает за то, какой из них показывать.
Шаг 3
После выбора конкретного тарифа мы попадаем на страницу, где можно ввести площадь квартиры, чтобы получить планируемую стоимость ремонта.
После выбора конкретного тарифа мы попадаем на страницу, где можно ввести площадь квартиры, чтобы получить планируемую стоимость ремонта.
Марина
Руководитель проекта
Пока механика расчета довольно проста: в админке указывается значение за квадратный метр для каждого тарифа, которое при расчете просто умножается на площадь. Но в следующей итерации мы планируем сделать так, чтобы стоимость зависела от квадратуры: чем она больше, тем дешевле будет ремонт.
Шаг 4
Готово! Остаётся только отправить форму с уже учтенными деталями ремонта на адрес менеджеру «Легкорем». А если остались вопросы, можно посетить офис компании, чтобы потрогать-пощупать образцы материалов и пообщаться со специалистами.
Готово! Остаётся только отправить форму с уже учтенными деталями ремонта на адрес менеджеру «Легкорем». А если остались вопросы, можно посетить офис компании, чтобы потрогать-пощупать образцы материалов и пообщаться со специалистами.
Среди задач проекта было снять основные вопросы клиентов — для этого на сайте предусмотрен раздел FAQ: у вопросов мы настроили прикольную анимацию, разворачивающую карточку. А при клике на «подробнее» эффектно появляется поп-ап :)
На сладенькое — офигенная анимация 404-й страницы. Если у вас не задался день, зайдите туда, чтобы снять напряжение :)
Евгений
Разработчик
4-ки падают со случайной скоростью, в случайном месте и со случайным поворотом. Я постарался максимально сохранить физику: пригвоздить цифру можно только тогда, когда при клике цвет точки попадания совпадает с цветом самой цифры.
Но хватит слов — лучше сами посмотрите-покликайте, как всё круто работает (на адаптиве, кстати, тоже).
Готовый проект
