Комментарии
Ремонт? Легко!
Результат Процесс
Счастливый сайт для «Легкорем»
Сибирикс
Счастливый сайт для «Легкорем»
Ремонт? Легко!
Можно бесконечно смотреть на три вещи: на воду, на огонь и на то, как соседи делают ремонт. Каждый, кто хоть раз сталкивался с переделкой помещений, знает: это долго, дорого и больно. Даже если есть план, обязательно что-то пойдёт не по плану. Даже если руки строителей прямые, всё равно будут косяки. Даже если всё заказано через одну контору, обязательно какой-то чёртов рулон обоев потеряется, а в новой партии он будет почему-то не того оттенка.

Пока вы вспоминаете добрым (или не очень) словом гостей из солнечного Таджикистана, которые когда-то делали вам ремонт, мы расскажем про ребят из «Легкорем» — они решают боль клиента и делают комплексный ремонт (дизайн-проект, демонтаж и сами работы) без головняков, косяков и с минимальными усилиями самого клиента. Даже материалы сами покупают — больше не надо тратить выходные на выматывающие прогулки по строительным магазинам.

Но чтобы отличаться от миллиарда конкурентов, важно не только клёвое предложение, но и грамотная его подача. Вот этим, как раз, занялись мы :)
Задачи
1
Обновить дизайн сайта: предложить яркое современное решение, чтобы выделить клиента среди других игроков рынка.
2
Продумать навигацию и структуру и уделить внимание пути пользователя по сайту.
3
Снять большинство вопросов и возражений, чтобы облегчить нагрузку менеджеров.
4
Предусмотреть удобные калькуляторы для расчета итоговой стоимости, которые могут повлиять на выбор целевой аудитории.
5
Продемонстрировать портфолио клиента на сайте: с фото «до-после», спецификой проектов и указанием использованных материалов.
Аналитика
«Мероприятие под ключ», «сайт под ключ», ещё какая-то услуга «под ключ» — бесит, правда? Всё потому, что «под ключ» на самом деле сдаётся не что попало, а отремонтированные помещения, где подрядчик сделал все работы от и до: и полы выровнял, и оштукатурил всё, и проводку провёл и бог весть что ещё проделал — заходи-живи.

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


  1. слайдер снизу показывает превью готовых проектов и листается лёгким движением руки;
  2. при клике на превью подключается другой слайдер — он меняет большое фото сверху и описание конкретного проекта;
  3. внутри большого фото третий слайдер — просто нажмите и потяните картинку влево.
Каждый блок со слайдером на главной сопровождается каким-то прикольным 3D-объектом: горшочком с зеленью, дизайнерским стулом или ламповым светильником. Такие объекты скроллятся, оживляя страницу, и появляются не только на главной.
Александр
Разработчик
Для объектов мы также написали универсальное решение с нуля: было важно, чтобы объекты везде корректно работали, а код было легко использовать на разных страницах.
Ещё одна фишка сайта — калькулятор стоимости ремонта, состоящий из 4-х шагов.


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