Сайт компании «Опалубка-Домстрой»

Главное о кейсе

Команда разработала сайт поставщика строительного оборудования с сильным визуалом и удобным каталогом.
1. дизайн-концепция с применением 3D-моделей впечатляет пользователя и выделяет «Опалубка-Домстрой» на фоне других сайтов из этой ниши
2. проработанная навигация и структура позволяют легко ориентироваться на сайте
3. структура каталога учитывает специфику ассортимента и услуг поставщика, благодаря чему клиент быстро находит нужный вид продукции
4. страницы оборудования включают все информационные блоки и возможности, необходимые заказчику: от подвижной 3D-модели и калькулятора до технических характеристик продукции
5. ряд контентных страниц помогают сформировать образ надежного поставщика для потенциальных клиентов.

Бизнес-задача и ее решение

Старый сайт приносил хороший трафик, однако он морально устарел, не вызывал доверия и не показывал конкурентные преимущества «Опалубка-Домстрой». Собственный склад, качественная продукция и надежное партнерство — эти сильные стороны компании нам предстояло презентовать на новом сайте.

При обращении заказчик сообщил, что хочет использовать на сайте 3D-модели. Эта технология идеально подошла для демонстрации строительных конструкций и позволила нам реализовать творческие идеи дизайнеров в проекте.

При запуске проекта перед командой стояли задачи:
1. создать имиджевый и корпоративный сайт с демонстрацией 3D-моделей опалубки;
2. разработать удобный каталог продукции;
3. акцентировать внимание пользователей на собственном складе компании;
4. реализовать калькулятор для предварительного расчета стоимости;
5. выделить «Опалубка-Домстрой» среди конкурентов за счет имиджевой составляющей и запоминающегося визуала;
6. провести качественное SEO-проектирование сайта для сохранения текущего уровня трафика.

Перед проектированием мы провели аналитику, чтобы изучить нишу, бизнес-процессы и разработать рекомендации для будущего сайта. На данном этапе были проведены исследования:
1. анализ старого сайта;
2. анализ бизнеса заказчика;
3. CustDev с клиентами компании;
4. анализ сайтов конкурентов.

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

Сайт состоит из контентной части и каталога — главного инструмента пользователя. Чтобы клиентам было удобно искать нужные позиции, мы разработали удобную навигацию. Сложность заключалась в глубине структуры — путь к некоторым товарам занимал до 5 итераций.

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

Каталог от родительской страницы и до страниц отдельных позиций реализован в формате конструктора. Мы подготовили более 10 блоков, которые можно интегрировать в интерфейс в зависимости от задач того или иного уровня каталога: галерея изображений, блок преимуществ, технические характеристики и проч.

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

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

Ключевое решение в рамках презентации продукции — 3D-модели оборудования, которые пользователь может осмотреть со всех сторон. Мы создавали модели по реальным фотографиям от заказчика. Так, оборудование на сайте является реалистичной копией того, что по факту получают клиенты «Опалубка-Домстрой».

Преимущества 3D-моделей:
1. создание вау-эффекта на фоне однотипных сайтов конкурентов
2. возможность оценить качество оборудования до мельчайших болтов перед покупкой

Модели интегрированы на сайт с помощью функции предпросмотра SketchUp.

Идея 3D проходит через весь сайт. Кроме страниц продукции, мы использовали анимированные модели на главной странице и в разделах каталога. Основная цель — продемонстрировать оборудование и впечатлить клиента подвижным живым визуалом.

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

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

Чтобы отразить сильные стороны поставщика, мы добавили ряд информационных страниц:
1. «О компании» — презентует компанию через цифры, достижения и команду;
2. «Склад и производство» — демонстрирует собственные мощности поставщика;
3. «Реализованные проекты» — отражает объекты, которые были возведены с оборудованием компании;
4. «Документы» — формирует прозрачный подход к сотрудничеству

С помощью этих страниц сайт показывает компанию «Опалубка-Домстрой» как надежного партнера с качественной продукцией и ответственным подходом к бизнесу.

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

Прочая информация о кейсе

Заказчик проекта — компания «Опалубка-Домстрой», которая является крупным поставщиком конструкций, оборудования и материалов для стройки. Мы разработали сайт, где клиенты могут ознакомиться с брендом, ассортиментом, ценами и техническими характеристиками продукции.

Основные функциональные решения:
1. удобная навигация по многоуровневой структуре разделов и страниц сайта;
2. каталог продукции;
3. калькулятор предварительного расчета стоимости;
4. форма заявки;
5. интеграция с Jivo для онлайн-консультирования клиентов.

Большое внимание уделили дизайн-концепции, которая основана на использовании 3D-моделей. На главной странице и в разделах каталога мы разместили анимацию с детализированной сборкой опалубки и другого строительного оборудования. На страницах продукции размещены модели, которые пользователь может «покрутить» сам.

Ряд визуальных приемов дополняют основную идею, создавая чистый, легкий и минималистичный дизайн с мягкими формами и типографикой. Например, курсор сопровождает градиентное облако, которое добавляет интерфейсу воздушности. А футер плавно «пружинит» при скролле в конце страницы.

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

Скриншоты