Шипшина: ми запустили нову платформу 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 року, а вже наприкінці жовтня вона відновила всі свої показники трафіку та пошуку — якраз під початок «високого сезону» в шинному бізнесі. В листопаді компанія зафіксувала відчутний приріст трафіку.

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

Результати «Шипшини» говорять самі за себе: перехід на новий сайт зовсім не обов’язково має бути стресом і шоком для бізнесу. Досвідчена та професійна команда може забезпечити максимально безболісну міграцію магазину на нову платформу. Для цього потрібні фахівці, які можуть побудувати розумну стратегію переходу та підібрати найкращі технології.