Кейс Crocs: Один соток мільйонів продажів Оптимізація частина 1

Бренд Crocs є одним з найвідоміших виробників взуття у світі, "кроки" одягаються в усіх куточках світу. У 2011 році наша команда почала працювати над проектом, пов’язаним з розвитком, запуском та оптимізацією процесу продажу для Crocs. У 2012 році компанія Crocs вирішила істотно розширити свій бізнес електронної комерції, який передбачав розробку та запуск нових інтернет-магазинів в нових географічних місцях.

Більшість наявних ресурсів Crocs були розроблені на платформі електронної комерції Demandware, тому було прийнято рішення продовжити роботу і розвивати напрямок електронної комерції на цій платформі. Наші завдання включили запуск нових сайтів на Demandware для Бразилії та Японії, а також окремий ресурс CrocsAroundTheWorld, присвячений десятиріччю компанії, редизайнингу, рефінансування та оптимізації окремих елементів наявних ресурсів, а також оптимізації маршруту для збільшення переходів на сайтах Crocs, які будуть обговорюватися в статті.


Вступ
Як ми писали в нашому попередньому виданні, ефективні дизайнерські рішення дозволяють збільшити конверсії та оптимізувати продаж в проектах електронної комерції. У той же час, зміни дизайну проводяться на основі тестів, спрямованих на підвищення зручності, що дозволяють збільшити перетворення для кожного окремого ресурсу. Варто пам'ятати, що в будь-якому проекті електронної комерції ефективні рішення не можна здогадатися – вони повинні базуватися на об'єктивній оцінці, отриманій під час комплексних кількісних та якісних тестів.

Коли мова йде про пошук рішень для поліпшення конверсій, зазвичай використовуються кілька типів тестів, найпопулярніші з яких є тестування A / B і багатоваріантне тестування. Як правило, в електронних комерціях, метою їх реалізації є визначення оптимальних рішень для збільшення конверсії або оптимізації вартості онлайн просування. Розглянемо ці два типи тестування докладніше:

A/B тестування
Значення A/B тестування полягає в зміні одного елемента сторінки або банера, а потім аналіз двох версій (додатково і після зміни) в умовах перетворення. Розглянемо спрощений приклад:

Для просування нашої діяльності на популярній суспільній мережі використовуються як зображення. Один з інших відрізняється тільки зеленою рамою по всьому периметру. На перший погляд, це незначна зміна, але тест показав, що варіант з кадром двічі ефективний, оскільки без нього. Неможливим є така відмінність в кожному конкретному випадку заздалегідь, але тестування A/B поставляє все на своєму місці. Це відносно простий, але ефективний інструмент для оптимізації додатків електронної комерції. Але що якщо є багато змінних, якщо ви хочете перевірити кілька елементів і кілька конфігурацій одночасно? У цьому випадку зазвичай використовується багатоваріатний тест.

Багатоваріатний тест
Багатоваріатний тест дозволяє одночасно перевірити кілька конфігурацій сайту. У суть багатоваріатний тест є паралельним виконанням декількох тестів A / B. У операціях з великим числом замовлень на глобальному рівні оптимізація в результаті такого тестування стає архів. Варто зазначити, що в оптимізації електронної комерції є найбільш критичним для процесу замовлення (checkout), який безпосередньо впливає на перетворення і, в результаті прибутковість проекту.

Реалізація оптимізації маршруту для Crocs
Наша команда зіткнулася з проблемою великої кількості необхідних ресурсів, пов'язаних з змінами та оптимізацією в цьому розділі. Проблемою було те, що різні країни, необхідні для реалізації абсолютно іншого набору формових полів і абсолютно іншої логіки для поведінки етапів оформлення, одночасно з урахуванням можливості тестування для оптимізації перетворення. Завдання було також ускладнено тим, що в стандартних патронах платформи Demandware, в тому числі SiteGenesis – базова версія, на якій налаштовування зазвичай здійснюється для різних клієнтів – логіка даного розділу реалізована «важко». Кожен раз ви додаєте сайт для нової країни, необхідно розширити базову функціональність. В результаті логіка виїзду стала занадто складною для розуміння, і вона стала майже неможливою розширити її далі.

У випадку Crocs була розроблена нова архітектура і запропонована спеціально для платформи Demandware, що дозволило нам досягти підвищеного рівня абстракції і представляти кожен крок розшуку у вигляді «контейнера», поведінки якого, в тому числі послідовність кроків виселення, була визначена конфігураційним файлом, а зміст можна легко регулювати за допомогою збірки елементів форми в довільній послідовності. Для реалізації проекту було здійснено розширена оптимізація існуючого коду. Компанія Crocs погоджується з тим, що нова архітектура в подальшому значно заощадить ресурси для підтримки існуючої та розвинутої функціональності, а також ефективно виконувати оптимізацію та тестування для збільшення конверсії. На даний момент, виходячи з архітектури Optimized Checkout, кілька сайтів Crocs (США, Канада, Великобританія та Австралія) вже мають кілька різних конфігурацій для виїзду (five-step та трикрокові чеки, а також один-клацання) з підтримкою функцій тестування та оптимізації.

Як ми згадували в наших попередніх публікаціях, дизайні та розробці, потрібно, щоб ефективно збільшити перетворення на сайт електронної комерції. Паралельно з командою розвитку, дизайнери UX розробили безліч прототипів і зробили багато рекомендацій, щоб значно підвищити зручність використання сайтів Crocs. Наша команда дизайну цифрових факторів використовується Engage UX, онлайн-прототипування утиліта побудована на принципах CWE (колекційна робота навколишнього середовища), що дозволяє нашим клієнтам висловити побажання та коментарі щодо функціональних елементів та дизайну на ранніх стадіях розробки проекту.

Поєднання цих факторів безпосередньо впливає на перетворення і, в кінцевому підсумку, фінансовий успіх кожного проекту. У наступній пошті ми розглянемо організацію каркасу для автоматизованого тестування регресія, ключові технології та впровадження самого коду, що дозволило нам допомогти крокам досягти поставлених цілей продажів.

Автори:
Костянтин Тищенко
Віталій Тарадайко
Олександр Мамалига

Джерело: habrahabr.ru/company/astound Commerce/blog/234273/