За 2022 год онлайн-продажи в России увеличились почти в полтора раза, а второе место по объему заняли мебель и товары для дома (17,7%). Однако, в связи с уходом иностранных компаний, открылись возможности для отечественных производителей и интернет-магазинов занять свободную нишу и расширить свой бизнес.
Компания «Мебельград» поставила цель на 2022 выстроить онлайн продажи мебели розничным покупателям в ЦФО, а также оказать поддержку традиционным каналам продаж компании. С этим запросом компания и обратилась в наше digital-агентство «Веб-Центр».
Эту большую задачу мы разделили на несколько частей:
• Расширенный анализ сайта: UI/UX-дизайн, адаптивность, аналитика маркетинговых показателей
• Создание стратегии и плана работ по улучшению юзабилити сайта
• SEO-аудит сайта (анализ позиций сайта в поисковых системах и создание плана по продвижению)
• Оптимизация контекстной рекламы для увеличения эффективности
В этом кейсе мы рассмотрим 1 и 2 части: работы по обновлению интернет-магазина.
Задача:
• Улучшить юзабилити сайта
• Доработать мобильную версию сайта
• Улучшить оформление главной, каталога, контактов
• Оперативно решить критические проблемы с текущим сайтом: снизить количество отказов (BR (bounce rate), увеличить глубину просмотра
• Повысить CR / конверсию в покупку
Подготовительный этап. Анализ старого сайта клиента
Чтобы выстроить стратегию по работе с сайтом, сначала провели анализ существующего сайта и анализ основного конкурента.
По текущему сайту совместно с SEO специалистами проанализировали, что имеем:
⟶ Устаревший дизайн
Старый сайт клиента имел много ярких элементов, от которых у пользователя разбегались глаза.
В 2022 году современные интернет-магазины стараются придерживаться минимализма на своих сайтах. Размещают информацию важную информацию не отвлекая внимание клиента лишними деталями.
⟶ Технические проблемы
На десктопной и мобильной версиях в первом же пункте меню каталога пункт «Акции» ведет на страницу без товаров, отображается только серая кнопка, при клике на которую обновляется страница и больше ничего не происходит.
Почему важно, чтобы первый экран не был пуст? В первую очередь человек видит то, что умещается в экран его устройства. Именно здесь он решает, остаться на странице или идти дальше. На это решение уходит всего несколько секунд. Если за это время клиент увидел, что ему предлагают решение его проблемы, то остается изучать страницу дальше, если нет – уходит к конкурентам.
«Веб-Центр»
1. Некорректная работа раздела «Контакты»
При переключении города – карта не подтягивает данные по выбранному городу, а выводит общий список магазинов по всем регионам.
2. Слайдеры на главной странице
При нажатии на некоторые из них, сайт выдает ошибки – пользователя ведет на несуществующие страницы.
Один из слайдеров перебрасывает пользователя на другой сайт. Таким образом, у него уже нет возможности дальнейшего изучения каталога. Также есть слайдер с ссылкой на главную. При клике на него страница обновляется и больше ничего не происходит.
Слайдеры не имеют единого стиля оформления, что влияет на визуальное восприятие сайта пользователем.
Когда клиент заходит на ваш сайт из поисковых систем, у вас есть всего 3 секунды зацепить внимание пользователя, чтобы он остался на сайте. Рекламные баннеры помогают расширить аудиторию и привлечь новых пользователей на сайт. Кроме того, они помогают улучшить имидж компании, предоставляя информацию о новых продуктах и услугах.Баннеры в слайдере на сайте играют важную роль не только в продвижении товаров и услуг. Они помогают увеличить конверсию и улучшить взаимодействие с клиентами,а также привлекают внимание пользователей.
«Веб-центр»
3. Мобильная версия плохо адаптировалась
Большая часть трафика на старый сайт шла с мобильных устройств. Поэтому большой проблемой была его плохая адаптивность под мобильные устройства. Например, на странице «Контакты» номера телефонов переносятся на вторую строку.
4. Навигация в мобильной версии
При работе с каталогом товары появлялись только на втором экране. 85% пространства занимает меню, логотип и пусты места. Чтобы увидеть сами товары, пользователю приходилось скролить экран.
Вывод: анализ показал, что сайт морально устарел в плане дизайна, юзабилити и в технической части. Новым пользователям, которые попадают на сайт, трудно разобраться в разделах, часто видят ошибки в виде 404 страниц. Сайт не конкурентоспособен на фоне других сайтов этой тематики.
Подготовительный этап разработки нового сайта
Проанализировали сайт основного конкурента
Отметим минималистичный дизайн: нет лишних элементов, которые отвлекают пользователя от основной информации. Сайт выполнен белом цвете, рекламные баннеры – в спокойных нюдовых цветах, однако отлично привлекают внимание пользователя, добавляют «уюта».
На главной странице расположены акционные баннеры, спецпредложения. Которые сразу «цепляют» потенциального покупателя.
Хорошо проработаны страницы списков товаров и детальная карточек товаров: есть информация о доставке, отзывы, рейтинг товара и т.д.
Вывод по анализу конкурентов: на сайтах конкурентов просто ориентироваться, можно быстро и удобно подобрать подходящий товар и оформить заказ. Сделано все для того, чтобы пользователь сделал заказ на несколько товаров или заказал доп. аксессуары (подушки к кроватям, чехол на матрас и т.д.)
Результат сравнения сайта клиента с сайтами конкурентов:
Неудобная навигация по сайту, неинформативная главная страница, агрессивный дизайн по сравнению с прямыми конкурентами. Старый сайт отталкивал потенциальных покупателей от покупки в интернет-магазине. Клиенты предпочитали посещать офлайн точки. Сайт не подходит для решения поставленных клиентом задач: занять нишу ушедших компаний.
Составили план работ (карта внедрения) по сайту
Описали каждый этап разработки, который нашим специалистам предстояло выполнить:
Реализация проекта
1. Определили платформу для разработки. Старый сайт был сделан на 1С-Битрикс и на древнем модуле alexkova.market2. Однако платформа не обновлялась и не обслуживалась с 2020 года. Для интернет-магазинов не обновляться даже полгода критично и может повлечь за собой ряд проблем: поломка сайта, перестанет работать один из важных модулей и т.д.
Решили остаться на 1С-Битрикс + АСПРО: Максимум. Эта связка решит проблемы с адаптивностью сайта под разные устройства, пользовательским опытом и решит критические ошибки сайта:
• Невозможно оставить отзыв в карточке товара
• Из карточек товаров удалялись изображения
• Ошибка предоплаты заказа
• Ошибки резервного копирования и т.д.
2. Сделали копию сайта, развернули на сервере клиента на тестовом домене. Так как сайт клиента действующий и приносит заявки, он должен работать. Поэтому дальнейшую разработку и все последующие доработки мы делали на этой тестовой копии сайта.
Таким образом у нас был старый действующий сайт и тестовый сайт на новом решении, на котором мы делали все работы.
3. Обновили систему управления 1С-Битрикс до актуальной версии, установили платформу Аспро и перенесли все страницы, которые были на старом сайте. Важно отметить, что все URL мы сохранили, чтобы не потерять позиции сайта в поисковых системах (и не делать редиректы)
4. Собрали страницы
Разработали главную страницу, добавили необходимые рекламные блоки. Заполнили страницу «О компании», «Контакты» и тд). Вместе с контент-менеджером со стороны клиента сделали совместную работу по добавлению магазинов. Наполнили каталог товаров.
5. Настроили мультиязычность (перевод сайта на 6 языков).
Компания «Мебельград» стремится расширить свое присутствие на рынке корпусной и мягкой мебели, поэтому активно развивает экспортное направление в другие страны. Поэтому мы настроили автоматический перевод сайта на английский, немецкий, китайский и др. языки.
6. Настроили мультирегиональность.
Мультирегиональность дает возможность пользователю сайта выбрать свой округ, регион, город и увидеть не только актуальные контакты для их местоположения, но и остатки, цены и даже каталоги.
7. Чтобы на сайте была представлена актуальная информация по остаткам и ценам, нужно было создать связь между 1С и товарами на сайте.
Для этого мы написали скрипт, чтобы из обычных товаров создавались товары с торговыми предложениями. А клиент сопоставил внешние коды торговых предложений на сайте с такими же товарами в 1С.
Начали реализацию доработок
• Гиф в карточке товара
Позволяет оценить характеристики товара (длина, ширина).
• Добавили форму «Мебель под заказ»
На страницу добавили форму, которая позволяет клиентам заказывать изготовление мебели по индивидуальным размерам и требованиям. Преимущества такой формы в том, что покупатели могут получить мебель, которая идеально подходит для их конкретных потребностей и желаний, а не только выбирать из того, что доступно в каталоге.
• Вынесли характеристики на карточки товара
• Переключение торговых предложений без перезагрузки страницы
При первой встрече клиент рассказал нам о своих идеях и вместе мы разработали функционал в карточке товара, чтобы при смене торговых предложений страница не перезагружалась. Пришлось писать скрипт, чтобы из обычных товаров создать товары с торговыми.
Эта доработка дает возможность пользователю быстро и легко просмотреть все торговые предложения в карточке товара, не теряя времени на ожидание загрузки страницы. Такой функционал повышает удобство использования сайта.
На сайтах конкурентов нет такого функционала, что делает нашу доработку уникальной и привлекательной для пользователей.
• Торговые предложения и комплекты в карточке товара
В карточке товара реализовали не только вывод торговых предложений, но и вывод комплектов. Покупатель может собрать индивидуальный комплект под свое жилище.
• Дополнительные опции к кроватям
При выборе кровати пользователь может положить в корзину дополнительные товары. Например: подушку, матрас, чехол и т.д. То есть все необходимые дополнительные опции найдутся прямо в карточке товара, чтобы клиенты могли легко и быстро заказать все необходимое для спальни.
• Поменяли поведение основного меню
В мобильной версии сделали кликабельными названия разделов, где есть выпадающий список.
При нажатии на заголовок раздела должно перенаправлять в раздел, а при нажатии на стрелочку выпадать список подразделов.
• Изменили отображение разделов каталога в мобильной версии
• Модерация отзывов
Реализовали функционал с уведомлениями администратору о новом отзыве, который оставлен к товару, то есть пока модератор его не проверит и не одобрит, отзыв на товаре не отображается.
• Авторизация по СМС для пользователей
Подключили авторизацию по SMS для пользователей.
Авторизация в через СМС необходима для защиты личных данных покупателей при совершении онлайн-покупок. Пользователь получает на свой мобильный телефон уникальный код, который нужно ввести для доступа к личному кабинету или для совершения покупки. Также СМС-авторизация позволяет избежать использования одного и того же пароля для различных сервисов, что делает аккаунт личного кабинета более защищенным.
Для самого интернет-магазина авторизация по СМС позволяет получить базу номеров своих клиентов, чтобы более эффективно настраивать рекламу или делиться скидками и промокодами для постоянных покупателей.
• Специально для нового сайта изменили структуру каталога
Для создания новой структуры нужно было перенести на копию товары, которые были созданы на бою за время разработки нового сайта.
Все это время клиент на тестовой копии сайта объединял разные варианты исполнения товаров (на старом сайте – это были разные товары) в один товар с торговыми предложениями, заполнял свойства и добавлял картинки товаров.
• Наполнение сайта контентом
• Реализовали маркетинговую компанию по увеличению LTV клиента
На завершающем этапе доработок внедрили и настроили возможность покупки товаров в рассрочку для покупателей интернет-магазина.
Перенос нового сайта с тестового домена на основной
Перед переносом нового сайта нужно было обновить Аспро и проверить, что новая версия платформы «дружила» с нашими доработками. Дело в том, что разработка сайта длилась около 6-ти месяцев. За это время Аспро успели выпустить несколько обновлений для интернет-магазина «Максимум».
Затем нужно было перенести каталог товаров с тестового сайта на основной.
На этом этапе при импорте возникали ошибки из-за битых картинок в товарах и разделах, а также одинаковых внешних кодов у свойств. Написали скрип, чтобы удалить битые картинки и заменили внешние коды у свойств.
Столкнулись с проблемами панели сервера при выпуске SSL-сертификатов.
Изначально, другими подрядчиками был неправильно создан сайт на сервере (через симлинк). Из-за этого панель управления сервера выдавала ошибки при выпуске SSL-сертификатов.
После переноса сайта с тестового домена на основной URL у товаров изменились. Все товары при переходе в карточку выдавали 404 ошибку. Поэтому в срочном порядке наши SEO-специалисты делали склейку.
Тестирование
Сделали финальную миграцию на боевой сайт.
При тестировании исправили ошибки в работе компонентов, проверили корректность работы мобильной версии, системы оплаты, отправку почтовых уведомлений (в целом корректность работы оформления заказа), чтобы работали все доработки
Проверка SEO-настроек, чтобы новый сайт не потерял позиции
Далее необходимо было вернуть сайту позиции в поисковой системе после переезда.
Наши SEO-специалисты сделали работы:
1. Подготовили подробный файл склейки с учетом торговых предложений.
2. Перенесли и восстановили метаданные со старого сайта.
3. Перенесли и отредактировали заголовки
4. Заново настроили и отредактировали карты сайта как для основного домена, так и для поддоменов
5. Настроили и отредактировали файл robots.txt
6. Провели подробный SEO аудит и тестирование сайта, чтобы убедиться в отсутствии ошибок
Эти работы помогли нам не потерять позиции сайта в поисковой выдаче. В настоящее время наши SEO-специалисты продолжают вести работы по оптимизации интернет-магазина для улучшения выдачи.
Запустили новый сайт в эксплуатацию
Итак, мы разработали новый сайт, сделали его более удобным для пользователей.
Провели тщательное исследование и выявили слабые места сайта клиента по сравнению с конкурентами, которые негативно влияли на пользовательский опыт потенциальных покупателей.
Улучшили мобильную версию сайта, изменили оформление главной страницы, каталога и контактной информации, чтобы сделать сайт более привлекательным и легким для использования. За счет этого повысили CR (конверсию в покупку).
Кроме того, мы оперативно смогли решить все критические проблемы старого сайта, чтобы обеспечить бесперебойную работу интернет-магазина: пользователи могут заказывать товары в любое время, клиент – не теряет деньги.
Также мы получили положительный отзыв клиента о нашей работе и продолжаем с ним работу по направлениям: поддержка сайта, SEO, контекстная и таргетированная реклама.
Мораль: Регулярная работа над улучшением удобства сайта и своевременное обновление платформ позволят улучшить поведенческие факторы пользователя (процент отказов, глубина просмотра). Сайт должен, в первую очередь, быстро и качественно решать задачи посетителей (получение подробной информации о товаре, адаптивность под разные устройства, удобство заказа).
Отдел разработки «Веб-Центр»
Если вас не устраивает конверсия/количество заказов с вашего сайта, мы поможем увеличить продажи.
Проведем бесплатный аудит продающих свойств сайта.
Результат - вы получите экспертную оценку юзабилити вашего сайта.
Что мы сделаем?
• Проверим данные в системах аналитики в «Яндекс.Метрике»
• Проанализируем путь пользователя на сайте: где и почему возникают барьеры, как их преодолеть
• Проведем конкурентный анализ
Заказать аудит сайта по ссылке
