Кейс по разработке сайта okno82.ru

ЗаказчикСупермаркет окон №1 занимается производством и установкой пластиковых окон на территории Крыма. Компания изготавливает сертифицированные профильные системы немецких брендов — КВЕ, Rehau и Veka. ЗадачаСоздать новый сайт с современным дизайном и понятной структурой для клиентов.

Клиент

Супермаркет окон №1 занимается производством и установкой пластиковых окон на территории Крыма. Компания изготавливает сертифицированные профильные системы немецких брендов — КВЕ, Rehau и Veka. Помимо оказываются услуги по отделке балконов и лоджий, монтажу жалюзи/ролетов и гаражных ворот.

Центральный офис клиента находится в Симферополе, филиалы — в Севастополе, Евпатории, Ялте и других городах. Следовательно, покупатели могут обратиться за помощью или консультацией к местным представителям компании.

Цель Супермаркета окон №1 — создать полноценный интернет-магазин, в котором пользователи смогут совершать покупку продукции и оформлять дополнительные услуги.

Задачи

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

  1. Создать функциональный сайт с каталогом
  2. Увеличить число заявок
  3. Проработать репутация бренда<

После консультации мы приняли решение разработать сайт с новой концепцией. Это должен быть не классический портал, а полноценный «супермаркет» окон с удобной навигацией для пользователей.

Технические подробности проекта

  1. Создание уникальной CMS

Создание уникальной CMS

Особенности системы:

Динамически настраиваемая админ-панель — менеджер или администратор сайта видит тот интерфейс, который необходим для текущего проекта, без лишних полей и функционала. Благодаря распределению динамической конфигурации системы можно быстро переключить функционал проекта с каталога на полноценный интернет-магазин. Модули подстраиваются под структуру базы данных, позволяя сохранять владельцу сайта необходимые поля. Система имеет встроенный инструмент поиска метаполей по всем связанным данным, что облегчает работу seo-специалиста и защищает владельца сайта от возможных ошибок, когда метаполя не заполнены. Генерация ЧПУ страниц осуществляется на основе разделов и других связующих данных. Формируются читаемые, простые для восприятия пользователями и поисковыми системами URL адреса. Возможность использовать CMS для SEO-продвижения. Калькулятор расчета Калькулятор расчет

Одним из пунктов в разработке сайта было создание калькулятора расчета окон. Данные по типоразмерам загружаются средствами таблицы xls.

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

Решение

  1. Разработка дизайна

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

Разработка дизайна

  1. Создание структуры страниц сайта

Проработали структуру основных страниц нового сайта, таких как главная, каталог, контакты, отзывы и т.д.

Главная

Мы не стали перегружать главную страницу, оставив на ней только основные блоки:

Дизайн главной страницы

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

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

Блоки на главной

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

Блок с акциями

Блок с акциями на главной позволит пользователям сразу ознакомиться со скидками, не тратя время на серфинг каталога и настройку фильтров.

Блок портфолио

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

5d40f8b88cf77dcb54cd4bd04333fea7.jpg

Здесь мы решили разделить отзывы на два блока. Первый показывает обратную связь, оставленную покупателями на самом сайте. Второй демонстрирует отзывы на других площадках — в Яндексе и Google.

Каталог

Мы разбили каталог на сайте по категориям и подкатегориям. Рассмотрим на примере пластиковых окон:

Каталог на сайте

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

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

Блок сравнения характеристик

Наши работы

Блок наши работы

На странице мы собрали и оформили портфолио клиента. Пользователь может зайти и подробнее ознакомиться с любым реализованным проектом.

В каждом проекте указаны характеристики и список проделанных работ, сопровождающиеся фотоотчетом.

Если клиенту понравится один из проектов, он может заказать нечто подобное, заполнив форму обратной связи:

Блок Хочу так же

Форма обратной связи

Отзывы

Блок Отзывы

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

Также в данном разделе покупатель может оставить собственный отзыв, заполнив специальную форму. Чтобы защитить сайт от спама, мы внедрили CAPTCHA перед отправкой данных.

  1. Техническая оптимизация сайта

Настроили файл robots.txt и карту сайта, чтобы избежать проблем с индексацией и видимостью страниц в поиске. Склеили основные зеркала и подключили протокол HTTPS, чтобы обеспечить безопасность соединений, а также защитить персональные данные и финансовые операции на сайте. Далее настроили страницы 404 и добавили ресурс в веб-мастер.

Страница 404

  1. Наполнение сайта контентом

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

Контент на сайте

  1. Верстка приоритетных страниц

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

b2806a5edb495ba419c6725523e554c6.jpg

  1. Установка и настройка счетчиков Яндекс.Метрики

С их помощью можно отслеживать статистику посещения сайта, точки роста и анализировать взаимодействия пользователей с интернет-магазином.

Яндекс метрика на сайте

Результаты

У нас получился полноценный интернет-магазин со структурированным каталогом, в котором собрана вся продукция, включая профильные системы, пластиковые двери и сопутствующие услуги. Благодаря онлайн-калькулятору пользователь сможет узнать точную стоимость товара, не дожидаясь звонка от оператора. Функция бесплатного замера позволит получить клиентам полное представление о предстоящих затратах. А сопутствующая услуге скидка подтолкнет их к покупке и сэкономит бюджет. Обновленный дизайн сайта привлек большой поток пользователей, в связи с чем выручка заказчика увеличилась в 3 раза. Собственная CMS позволяет регулярно обновлять портал, наполнять его новыми страницами и контентом.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine