Привлекаем на новый сайт клиентов нового уровня

Теги:

Полный цикл разработки

Инструменты:

Предполетный бриф

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

Особенности проекта

Наше сотрудничество с магазином началось еще пять лет назад. Мы занимались SEO-продвижением и техподдержкой сайта.

Поскольку синхронизация сайта с 1С невозможна, пользователь не может:

• увидеть фиксированную цену;
• добавить товар в избранное или корзину;
• выбрать дату и способ доставки;
• оплатить покупку онлайн.

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

Зачем «Славянке» нужен новый сайт?

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

Чем же был так плох старый сайт?

1. Нелогичная структура

Чтобы найти нужный товар в каталоге, клиент делал от 6 до 10 кликов. Дорабатывать текущую версию было бы бессмысленно — разумнее создать новую понятную структуру.

2. Минимум информации на детальных страницах

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

3. Устаревший дизайн

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

Сетка сайта была узкая — 1100 px — контент смотрелся слипшимся и мелким, фотографии товара было сложно разглядеть.

Взлет

Почему нет корзины?

На slavameb.ru обычный порядок покупки товара в интернет-магазине невозможен из-за отсутствия синхронизации с базой 1С. Без привычного алгоритма «увидеть цену — добавить в корзину — сделать заказ» конверсии могут ощутимо упасть.

На странице «Почему у нас нет корзины» пользователь:

• узнает торговые преимущества магазина;

• знакомится с условиями индивидуального сотрудничества;

• направляется на форму отправки заявки.

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

1. Оптовикам

Гибкая система скидок, расширенный каталог и самовывоз на следующий день после оплаты. Ради этих условий клиент будет возвращаться снова и снова.

2. Госучреждениям

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

3. Дизайнерам

Бесплатный 3D дизайн-проект и программа лояльности — архитекторам и дизайнерам интерьера будет выгодно сотрудничать и воплощать в жизнь любые проекты.

Начинаем путь к актуальному дизайну

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

Над редизайном сайта работали эксперт по UX/UI и дизайнер. Наша команда создала несколько вариантов главной страницы, основываясь на своем опыте, анализе конкурентов, вкусах и взглядах клиента. Мы изучили преимущества всех версий и выбрали лучшую.

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

Юлия

Дизайн

Клиент доверился нам на все 100, и мы не хотели его подвести. В итоге отрисовали более 20 страниц со всеми адаптивными версиями. На дизайн ушло много часов — но результат того стоил.

Новый сайт — новая структура

Наша команда проделала большую работу:

• заложила и проработала детальные страницы каталога и товаров;
• создала концепт удобной галереи в реализованных проектах;
• переработала всю структуру каталога, по плану — добавить много новых страниц;
• сделала акцент на выгодных условиях доставки и проектирования;
• разработала блоки «Отзывы», «Готовые проекты», «Бесплатный дизайн проекта».

Создаем универсальный визуал

Согласно данным метрики, slavameb.ru довольно часто посещали с ПК — это одна из отличительных особенностей проекта.

Это значит, что сайту нужны:

• широкая сетка на 1600 пикселей;
• фото в высоком разрешении;
• масштабные элементы интерфейса.

У «Славянки» разнообразная клиентская база. Все страницы сайта должны смотреться круто и на огромном экране компьютера руководителя, и на стандартном мониторе госслужащего, и в 4К формате, который используют дизайнеры.

Работаем с коммерческими факторами сайта

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

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

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

Офис «Headhunter», автосалон «Дон Моторс» или актовый зал городской администрации — здесь каждый потенциальный клиент найдет примеры из своей отрасли.

Елизавета

SEO и маркетинг, руководство

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

Верстаем сайт на обновлённой CMS

Старый сайт был собран на 1С-Битрикс. С годами код много раз переписывали и адаптировали под новые потребности. Обновления CMS стерли бы эти изменения. Поэтому несколько лет на slavameb.ru не устанавливали обновления.

В работе с новым сайтом разработчики решили не менять CMS и сверстали интернет-магазин на последней версии 1С-Битрикс.

Что заполнили наши программисты?

1. Добавили отдельные предметы мебели в коллекцию — теперь в карточке товара можно рассмотреть каждую тумбочку или стол в любом цвете.
2. Создали детальные карточки товара с полным описанием, размерами и вариантами расцветок.
3. Настроили ресайз изображений. Теперь они отображаются на сайте в оптимальном сжатом размере. Рассмотреть фото в высоком качестве клиент может после клика.
4. Ускорили загрузку сайта. Сжатые фото позволили увеличить скорость появления контента в несколько раз.

В ходе работы программисты оптимизировали код: убрали неиспользуемые стили и скрипты. На финальной стадии они протестировали адаптивные версии сайта на всех типах устройств и браузеров.

Благодаря нашей работе посетитель сайта:

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

Егор

Программирование

Разработка сайта с нуля — приятная задача. Можно не исправлять чужие ошибки в коде, а сделать правильно и качественно с первого раза. На мой взгляд, именно так у нас и получилось.

Что получил клиент?

• современный и удобный сайт;

• упорядоченный каталог товаров;

• удобную систему управления;

• актуальную презентацию бренда;

• понятную для аудитории позицию на рынке.

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