Шипшина: мы запустили новую платформу eCommerce для ритейлера шин и сохранили его трафик

Обновление устаревшего интернет-магазина может стать вызовом для любого бизнеса. Ошибки и недоработки могут существенно навредить позициям вашей площадки в поиске, вызвать проблемы с быстродействием и ухудшить общий уровень сервиса. Как этого избежать? Мы расскажем о нашем успешном опыте работы над онлайн-магазином «Шипшина» для ведущего украинского ритейлера автомобильных шин и дисков.

С чем к нам пришел клиент

Первый магазин под брендом«Шипшина» был открыт в 1993 году. На сегодняшний день это всеукраинская сеть, объединяющая магазины для автомобилистов, станции шиномонтажа, автомойки, оптовые центры и т.д. Компания продает приблизительно 600 тысяч шин в год, предлагает продукцию топовых мировых брендов (Goodyear, Pirelli, Michelin, Nokian, Hankook и т.д.) входит в число лидеров шинного рынка Украины.

В своих продажах «Шипшина» полагается, в частности, на каналы eCommerce, предоставляющие клиентам удобства онлайн-шопинга и преимущества программы лояльности. Однако онлайн-магазин, которым ритейлер пользовался годами, на момент обращения к нам в 2020 году уже был морально устаревшим. Тот сайт страдал от проблем с быстродействием, испытывал сложности интеграции с учетной системой клиента, и к тому же нуждался в редизайне под современные стандарты. Поэтому лучшим решением для проекта была разработка новой веб-платформы с нуля.

Что нужно было разработать

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

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

В целом перед командой стояла цель создания новой веб-платформы для eCommerce, с учетом всех особенностей бизнеса клиента. Эта цель требовала решения ряда задач:

• проработка нового дизайна UI/UX;

• индивидуальная веб-разработка платформы с привлечением seo-специалистов;

• интеграция платформы с учетной системой и цифровыми инструментами клиента.

Какие технологии мы выбрали

Команда прибегла к инструментам, которыми владела в совершенстве. Это технологии, которые хорошо зарекомендовали себя наших многочисленных проектах для eCommerce. В частности, на стороне фронтенда использовалась классическая верстка HTML5/CSS3 и микрофреймворк Alpine.js. Для бэкенда была выбрана связка PHP-фреймворков Laravel и Livewire

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

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

Как мы построили работу и отчетность

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

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

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

Что мы разработали

Результатом работы нашей команды стала совершенно новая площадка для eCommerce, которая соответствует всем требованиям сети “Шипшина”. Она может похвастаться современными дизайном и актуальными фишками UX, работает быстро и стабильно, корректно интегрируется со средствами цифрового учета клиента. Приведем несколько фишек, выделяющих “Шипшину” среди конкурентов:

• Новый дизайн. Обновление дизайна было очень важным, как с точки зрения удобства платформы для пользователей, так и с точки зрения ее имиджа. Наши дизайнеры предложили “Шипшине” лаконичный интерфейс с айдентикой бренда, который в то же время отличается визуальной насыщенностью и информативностью. Пользователь может перейти в нужный ему раздел товарного каталога буквально за три клика с главной страницы.

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

• Пользовательский "Гараж". Покупатель может залогиниться на сайте и получить в личном кабинете ряд преимуществ, таких как управление программой лояльности. Однако реализованный в платформе функционал «Мой гараж» по-настоящему отличает “Шипшину” среди аналогов. Это блок, в котором пользователь может зарегистрировать одно или несколько своих авто для упрощения поиска комплектующих. Поиск через гараж предлагает только тот товар, который подходит к марке и модели конкретного авто покупателя.

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

Какие вызовы мы преодолели

На финальных этапах разработки мы интегрировали уже почти готовую платформу с учетной системой клиента, но поняли, что поисковый фильтр работает довольно медленно, с временным лагом и “тормозами”.

В чем была причина? Разработчики выяснили, что стандартные инструменты фреймворка Laravel не могут обеспечить быструю фильтрацию в огромной товарной базе данных клиента, которая насчитывала более 100 тысяч позиций. В отличие от большинства онлайн-магазинов, товарная база “Шипшины” не была разбита на сравнительно небольшие подкатегории, ограничивающие выборку во время поиска. Клиенту было важно, чтобы каталог продукции не терял единства. Ведь основной товар магазина – это шины. Они могли быть летними и зимними, отличаться для разных дисков и разных авто, но все равно должны были оставаться в одной категории. С технической точки зрения это означало, что каждый поисковый запрос, каждая фильтрация в каталоге нуждалась в проверке всей сотни тысяч записей в базе данных. Именно это и вредило быстродействию.

Решением проблемы стала оперативная переработка механизма фильтрации с применением поискового двигателя Elasticsearch. Мы запустили под него отдельный сервер, отвечающий за индексацию товаров и быстрый поиск. Как результат: если фильтрация со стандартными технологиями того же Laravel требовала примерно 30 секунд, то Elasticsearch выдает ответ менее чем за секунду (800–900 мс).

Преодоление неожиданных проблем немного сбило тайминг разработки, но сдвиг дедлайна был полностью контролируемым и не превышал двух недель. В общей сложности на реализацию продукта с нуля (от первого обсуждения до релиза) потребовалось 8 месяцев.

Результаты проекта

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

Ради этого разработчики очень тесно сотрудничали с seo-специалистами, которые сформировали ряд рекомендаций. Необходимо было сохранить для нового сайта старые URL и алиасы на страницах, поработать с фильтрацией, с посадочными страницами фильтров и с шаблонами автоматической прописи метатегов под эти страницы. Все эти шаги дали невероятный результат: запуск нового сайта сопровождался просадкой в ​​трафике всего в 10%, и длилась она всего месяц. При этом изначально специалисты прогнозировали просадку в 20-30% на два-три месяца. Так “Шипшина” стала одним из  самых лучших кейсов нашей seo-команды.

Релиз новой платформы состоялся в конце сентября 2021 года, а уже в конце октября она “отыграла” все свои показатели трафика и поиска – как раз под начало “высокого сезона” в шинном бизнесе. В ноябре бизнес зафиксировал ощутимый прирост трафика.

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

Результаты “Шипшины” говорят сами за себя: переход на новый сайт вовсе не обязательно должен быть стрессом и шоком для бизнеса. Опытная и профессиональная команда может обеспечить максимально безболезненную миграцию магазина на новую платформу. Для этого нужны специалисты, которые могут построить разумную стратегию перехода и подобрать оптимальные технологии.