Сайт на CMS 1С-Битрикс

Кейс переделки маркетплейса электротранспорта

Сайт на CMS 1С-Битрикс

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

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

Подробнее о преимуществах и ограничениях в работе системы мы рассказали в статье «CMS Битрикс: что умеет и для каких сайтов подойдет»

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

Проект

Tarantasik.ru — первый специализированный маркетплейс электротранспорта

Проблема

У сайта неудобный интерфейс, он плохо оптимизирован, долго загружается

Задача

Ускорить загрузку страниц сайта и улучшить пользовательский опыт

Результаты

- Оптимизировали сайт

- Улучшили UX/UI-дизайн

- Переделали интеграцию с amoCRM

Компания зарабатывает на продаже электротранспорта

Сайт tarantasik.ru — это маркетплейс, на котором производители электротранспорта размещают свои товары: электросамокаты, квадрокоптеры, гольф-кары и другие.

Сайт изначально создан на Битриксе. Это вполне оправданный выбор, ведь CMS хорошо подходит для масштабных, высоконагруженных проектов с множеством видов интеграции: информационных платформ, корпоративных порталов, маркетплейсов. Однако у сайта накопилось множество проблем. Заказчик обратился в OrbitSoft за их решением.

Сайт компании тормозит

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

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

Обновлением занималась команда из трех full-stack-разработчиков и проджект-менеджера. На отдельные задачи привлекались другие специалисты OrbitSoft: девопс, веб-дизайнер, маркетологи и тестировщики. Когда все специалисты из одной команды и умеют слаженно работать, на проект уходит гораздо меньше времени.

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

Оптимизировали сайт

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

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

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

Улучшили UX/UI сайта

  • В интернет-магазине важно, чтобы пользователь мог быстро найти нужный товар, поэтому прежде всего мы поработали над функцией поиска. Переделали фильтр: он стал легче и мощнее.

Слева — старая страница каталога: фильтр избыточен, описания товаров в карточках сливаются друг с другом и с фоном. Справа — новый дизайн: фильтр компактный, информативный и находится в привычном для пользователей месте, товары четко разделены
Слева — старая страница каталога: фильтр избыточен, описания товаров в карточках сливаются друг с другом и с фоном. Справа — новый дизайн: фильтр компактный, информативный и находится в привычном для пользователей месте, товары четко разделены
  • Доработали механизм рекомендаций: сайт предлагает товары, похожие по цене и мощности. Когда посетитель заходит на сайт, система анализирует, какие товары он смотрит, и предлагает похожие товары из той же категории: с ценой +/− 10% и мощностью +/− 100 W от текущего товара. Если такие товары не найдены, поиск расширяется до +/− 20% по цене и +/− 200 W по мощности и так далее.

  • Улучшили отображение отзывов. Раньше в карточках были доступны только видеообзоры товара, а отзывы на магазин можно было почитать в отдельном разделе сайта. Теперь в каждой карточке доступны видеообзоры и видеоотзывы, а отзывы с Яндекса подтягиваются автоматически. Также мы добавили возможность оставлять отзывы на самом сайте к любому товару.
<p>Новые отзывы с Яндекса сразу появляются на сайте</p>

Новые отзывы с Яндекса сразу появляются на сайте

О значении дизайна цифровых продуктов мы рассказали в статье «Как UX/UI увеличивает прибыль»

Переделали интеграцию с amoCRM

Раньше для интеграции использовался небольшой скрипт от amoCRM. Новым покупателям предлагалось заполнить форму. Контакты из нее передавались в CRM-систему. Как и любое универсальное решение, скрипт нельзя было настраивать. Например, нельзя было добавить опрос или возможность выбрать менеджера, который перезвонит.

Разработчики OrbitSoft написали свой компонент для 1C-Битрикса, использующий API от amoCRM и их же php-библиотеку. Он позволяет кастомизировать внешний вид форм и структурирует все заявки в файлы-логи: в любой момент можно посмотреть список заявок с начала работы логирования. Если при отправке формы у посетителя возникает ошибка, система отправляет письмо разработчикам, чтобы они оперативно решили возникшую проблему.

Проект на финальной стадии

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

Кейс маркетплейса tarantasik.ru показывает, что какой бы функциональной ни была CMS, это только инструмент. Чтобы сайт был привлекательным и удобным для пользователей, нужно его оптимизировать, продумать структуру, проработать UX/UI-дизайн — иначе со временем проект придется переделывать. Опытные разработчики могут исправить чужие ошибки или разработать сайт на Битриксе с нуля, используя весь потенциал CMS.

ТЕХНИЧЕСКИЙ БЛОК

Фреймворки:

Back-end: Bitrix Framework

Web front-end: Bitrix Framework

Языки программирования:

Back-end: PHP 8.0—8.1

Web front-end: Bitrix Framework / jQuery / vue.js / SCSS

Базы данных:

MySQL

Redis

Memcached

Платформы и стороннее ПО:

Docker, Docker Compose, Composer, Bitrix Environment на базе CentOS 7

1
Начать дискуссию