Интернет-магазин техники Бигам. Новые технологии и дизайн

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

Бигам — федеральная сеть Центров инструмента и техники, один из крупнейших поставщиков профессионального рабочего оборудования на отечественном рынке.

За время существования интернет-магазин Бигам накопил ряд технических проблем. Клиент выделили три основные:

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

Отслеживать состояние кода было проблематично. Интернет-магазин поддерживали несколько подрядчиков и правки в одном интерфейсе влияли на соседний, версионность не велась.

Интернет-магазин был написан на устаревших технологиях.
Технический аудит наших специалистов подсветил и другие проблемы:
— некорректная настройка резервного копирования;
— ошибки в структуре баз данных;
— некорректная настройка кэширования;
— некорректная работа почтовой системы;
— низкая работоспособность;
— угрозы безопасности;
— неиспользуемые строки кода;
— визуальные ошибки.

Наши команды — Бигам и Ареал — приняли решение отказаться от старого сайта и создать новый интернет-магазин.

Как проект изменил жизнь пользователей

Сейчас сайт работает стабильно. По данным сервиса pr-cy скорость загрузки HTML — 0.35 сек — быстрее чем 78% проверенных сайтов. Первая отрисовка контента занимает 0,6 сек.

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

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

ОБНОВЛЯЕМ ДИЗАЙН

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

Дизайнер выбрал:

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

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

ОПТИМИЗАЦИЯ ФУНКЦИЙ ПОД SEO

Интернет-магазин Бигам — современный проект по стандартам рынка. Адаптивность, умный поиск, сравнение, избранное, личный кабинет, возможность заказать доставку DPD или CDEK, эквайринг, онлайн-касса — все на своем месте.
Компания большое внимание уделяет seo. Это основной способ привлечения аудитории. Помимо интеграции с сервисами Mindbox, AdvCake, Admitad команды Ареал и Бигам продумали ряд особенностей, благодаря которым поисковики видят информацию по всем категориям каталога и разделам карточки товара.

Категории каталога

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

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

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

Карточка товара

По-умолчанию заголовок карточки товара — его название, например «Бензиновый триммер Энергомаш БТ-43 в Ярославле». При переходе между табами «Характеристики», «Рейтинги», «Где купить» заголовки меняются. «Характеристики бензиновый триммер Энергомаш БТ-43 в Ярославле», «Отзывы бензиновый триммер Энергомаш БТ-43 в Ярославле». Благодаря такой смене индексируется абсолютно вся информация по товару.

Правильная SEO-оптимизация — важный аспект работы для нового сайта Оптимизаторы со стороны Бигам были инициаторами задач. Мы со своей стороны предлагали технологические и функциональные решения. После запуска нового сайта восстановлены все seo-показатели.

Значительную часть каталога Бигам составляют одинаковые товары с разными характеристиками. Например, дрели разных мощностей. С точки зрения бэка — это отдельные позиции, с отдельными карточками. Чтобы пользователь видел весь ассортимент товара и не фильтровал каталог по новой, мы реализовали переключатели по характеристикам. Технически при переходе между параметрами пользователь или поисковик при индексации переходят на карточку другого товара, однако в восприятии потребителя такого перехода не случается.

Крафт (мастерство), реализация, технические детали

Приоритет нового интернет-магазина: скорость загрузки и фильтрации. В каталоге Бигам более 40 000 sku, большинство — одинаковые товары с разными характеристиками. В ситуации с большим каталогом технологический стек лучше утверждать через технический прототип — проработанный бэкенд каталога с простым дизайном и загруженными товарами.

Мы остановились на связке 1С-Битрикс с Elasticsearch. Такая связка обеспечивает поиск по товарам и удобную административную часть. Внутри 1С-Битрикс комфортно создавать поля для товаров. Elasticsearch при работе с фильтрами быстро отдает данные. Тестирование прототипа показало хорошие результаты.

Frontend интернет-магазина работает на Nuxt js. Nuxt — фреймворк на основе Vue.js для создания универсальных приложений. Он предлагает принципиально другой подход к работе с frontend-ом сайта. Nuxt поддерживает SSR, server side rendering. Эта технология рендеринга сайта увеличила скорость загрузки и позволила поисковикам корректно индексировать страницы. С Битриксом Nuxt общается через rest api.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

ОБЕСПЕЧИВАЕМ БЕЗОПАСТНОСТЬ

Закончив разработку, мы взяли на сопровождение серверное окружение и инцидентную поддержку при аварийных ситуациях. В качестве сервиса-мониторинга работает Zabbix. Если обнаружена ошибка, то менеджеру и клиенту приходят оповещения в Телеграм.

Настроены стандартные метрики:
— проверка потребления процессора, памяти, диска;
— мониторинг сетевых узлов через ICMP ping;
— проверка работы Apache, Nginx и MySQL (отвечают за сервер и базу данных).

Нестандартные проверки:
— работа сервиса Elasticsearch;
— загрузка страниц разных типов (список товаров, карточка, раздел промо, бренды, поиск и т.д.);
— работа резервной копии;
— программа для защиты сервера от атак с фиксацией количества заблокированных пользователей;
— загрузка всех элементов главной страницы.

Метрика «загрузка всех элементов главной страницы» отслеживает скорость отдачи главной. Бигам обратили внимание, что в разное время суток страница открывается с разной скоростью. Сбор данных поможет определить, когда начинается торможение: ночью во время резервного копирования, выгрузки или в течение дня, когда есть покупательская активность. На основе статистики понятными станут причина и её решение.

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

нет

Скриншоты