Leroy Merlin («Леруа Мерлен») — міжнародна мережа будівельних гіпермаркетів, яка спеціалізується на товарах для будівництва, ремонту та облаштування будинку. Заснована в 1923 році у Франції. Займає 1-е місце в Європі і 3-є в світі за об’ємами роздрібних продажів в сегменті DIY (Do It Yourself). На кінець 2019 року налічує більше 460 фізичних магазинів по всьому світу.

Цілі проєкту

Перед командою Webpromo стояли завдання зробити редизайн сайту leroymerlin.ua, а також поліпшити його юзабіліті. При цьому було важливо зберегти brand DNA (ДНК компанії), тобто систему абстрактних критеріїв і стилістичних особливостей, що гарантують традиційну впізнаваність бренду. Кінцевою метою цих змін повинні були стати підвищення конверсії та зростання інтернет-продажів.

Мал. 2. Приклад інтерфейсу старого сайту.

Новий дизайн мав відповідати таким вимогам:

бути зручним як для постійних клієнтів, які звикли до поточного сайту, так і для нових, які вперше на нього зайшли;
мати вищу конверсію за покупку, тобто приносити більше продажів при тому ж бюджеті на рекламу;
підвищити віддачу від SEO-просування за рахунок оновлення структури сайту, поліпшення посадкових сторінок і поведінкових характеристик;
посилити бренд Leroy Merlin в інтернеті;
відображувати brand DNA, показати переконання та цінності компанії.

Занурення у brand DNA

Одним з ключових завдань було зберегти через інтерфейс сайту brand DNA та візуальну ідентичність Leroy Merlin. Одночасно з цим ми повинні були врахувати особливості українського досвіду онлайну-купівель.

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

Також відбулося близько 10 зустрічей з представниками департаменту маркетингу та керівництвом компанії, на яких ми дійшли до загального бачення редизайну сайту.

Забігаючи наперед, відзначимо, що в результаті такої злагодженої взаємодії в затвердженому дизайні сайту нам вдалося поєднали візуальну ідентичність компанії із звичним українському покупцеві інтерфейсом інтернету-магазину. Те, що у нас це вийшло щонайкраще, підтвердив і генеральний директор «Леруа Мерлен Україна» Седрік Броссе.

Аналіз та проєктування

Аудит старого сайту

Спочатку ми розпочали роботу над аналізом «слабких місць» сайту. Щоб їх знайти, було вивчено всі ключові сторінки інтернету-магазину та переглянуто більше 40 годин відеозаписів сесій відвідувачів. В результаті ми знайшли більше 100 помилок в юзабіліті та критичних бар’єрів на шляху користувача до купівлі.

Аналіз E-commerce сайтів конкурентів

Фундаментальний закон Usability, закон Якоба Нільсена, говорить, що

більше частину часу користувачі проводять на інших сайтах.

Тому при побудові будь-якої стратегії із CRO чи Usability важливо проводити аналіз конкурентів.

Проаналізувавши сайти конкурентів і найпопулярніших інтернетів-магазинів України з високим трафіком, ми виявили ряд сталих та повторюваних патернів у структурі елементів:

зручне розкрите меню категорій товарів на головній сторінці;
великий та помітний рядок пошуку в шапці сайту;
великий слайдер з акціями на головній сторінці;
велика фотографія на сторінці опису товару;
розкрита інформація про доставку, оплату та гарантії в картці товару;
pop-up при додаванні товару в корзину з можливістю одразу перейти до оформлення замовлення.

Розробка прототипів

Коли відвідувач потрапляє на сайт, у нього немає інструкції. Сайт — це завжди інструмент для самонавчання. Користувач повинен зрозуміти, як взаємодіяти з новим для нього сайтом самостійно. Чим швидше він розбереться в цьому, тим краще для конверсії.

Тому звичність та очікуваність — фундаментальні принципи Usability сайту продажів. Чим більше схожих і звичних рішень відвідувач бачить, тим швидше він розуміє, як взаємодіяти з сайтом. Чим вірніше збуваються очікування відвідувача, тим більше він відчуває контроль над предметом вивчення, тобто вашим сайтом. І тим більше ваш сайт подобатиметься та викликатиме довіру, а, отже, й викликати бажання на ньому знаходитися.

З урахуванням проведеного маркетингового дослідження та виявлення критичних помилок на старому сайті «Леруа Мерлен», ми розробили більше 200 прототипів всіх сторінок майбутнього сайту.

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

Першу частину прототипів ми промальовували в Axure.

Мал. 3. Прототип головної сторінки сайту.

Мал. 4. Прототип сторінки категорії 1-го рівня.

Мал. 5. Прототип картки товару.

Одночасно із затвердженням перших прототипів ми приступили до відмалювання UI-дизайну. Далі прототипи сторінок промальовувалися в Figma.

Підпишись на гарячі

Маркетинг-новини

МАРКЕТОЛОГ 2.0 >

Підпишись на щомісячний

Дайджест новин

Цей процес включав промальовування кожного стану кожного інтерактивного елементу та поп-апів для того, щоб врахувати всі сценарії поведінки користувачів на сайті, а також щоб програмістам не доводилося додумувати їх самим.

Були розроблені окремі макети як для десктопной версії сайту, так і для мобільної.

Мал. 6. Прототип сторінки каталогу товарів.

Мал. 7. Прототип корзини.

Мал. 8. Прототип сторінки оформлення замовлення. Різні стани

Розробка дизайну

Під час розробки дизайну нам важливо було враховувати як зручність для мобільних користувачів, так і для тих, хто заходить на сайт зі звичайного комп’ютера. Нам також було важливо зробити зручний інтерфейс для постійних відвідувачів інтернету-магазину, які вже звикли до старого сайту.

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

Мал. 9. Відхилений макет хедера мобільної версії сайту.

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

Мал. 10. Відхилений макет швидких фільтрів.

Таким був 1-й упроваджений варіант головної сторінки інтернету-магазина:

Мал. 11. 1-й упроваджений варіант головної сторінки.

Пізніше, врахувавши досвід поведінки користувачів на цьому варіанті головної сторінки та бізнес-потреби клієнта, ми створили її 2-й варіант.

Мал. 12. 2-й упроваджений варівант головної сторінки.

Мал. 13. Католог товарів.

Мал. 14. Сторінка категорії 1-го рівня.

Мал. 15. 1-й варіант товарного тизеру.

Мал. 16. 2-й варіант товарного тизеру.

Мал. 17. Картка товару.

Технічні та маркетингові рішення

Головна сторінка

Проведений глибокий аналіз, наш досвід і накопичена експертиза й дослідження призвели до наступних рішень для головної сторінки:

відкритий каталог товарів як в десктопі, так і в мобайлі;
ключові переваги компанії «Леруа Мерлен» на першому екрані;
один великий слайдер на першому екрані та додаткові банери для вирішення бізнес-завдань клієнта;
списки товарів, що рекомендуються та були переглянуті;
власні бренди Leroy Merlin.

Мал. 18. Головна сторінка інтернет-магазину leroymerlin.ua.

Сторінка каталогу товарів

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

Наприклад, обираючи бойлер, багато хто не знає, який літраж їм потрібен. Але всі знають, скільки чоловік користуватиметься технікою. Відповідно у фільтрах ми запитуємо, скільки чоловік їм користуватиметься, а відвідувач сайту повинен просто вказати кількість. Виходячи з кількості, ми «вибираємо» (тобто показуємо у видачі) той або інший літраж замість відвідувача.

Мал. 19. Приклад сторінки каталогу товарів.

Тизери товарів отримали свої візуальні особливості аналогічно з цінниками у фізичних магазинах, щоб постійні клієнти «Леруа Мерлен» змогли екстраполювати свій досвід взаємодії з різними видами товарів з офлайна в онлайн.

Також додали hover-ефект, який розширює функціонал тизера. Якщо навести курсор, то відкривається більше фотографій та додаткових характеристик без переходу на картку товару.

Мал. 20. Приклад товарного тизеру.

Картка товару

Інтерфейс карток товару також створювався з урахуванням ряду usability-вімог. Тепер всі вони складаються з:

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

Мал. 21. Приклад картки товару.

Корзина та сторінка оформлення замовлення

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

Тому ми додали нові можливості, які це усунули. Тепер на сторінці оформлення замовлення є:

вибір частини товарів з корзини для оформлення замовлення, тоді як останні товари залишаться в корзині;
відсутність посилань, що відводять на інші розділи сайту, при переході до оформлення замовлення;
всі три послідовних кроки для оформлення замовлення;
наявність всіх можливих сценаріїв поведінки користувачів при оформленні замовлення з урахуванням обмежень в бізнес-процесах компанії. Наприклад, клієнт хоче оформити самовивезення, але не в кожному гіпермаркеті є всі товари, які він замовив. Тому ми реалізували сценарій, при якому частина з товарів він може забрати у точці продажу, а для частини — замовити доставку. Ми також додали правильні та помітні повідомлення, щоб знизити бар’єри під час купівлі;
внесення змін до замовлення без повернення в корзину;
розподіл на декілька замовлень, якщо всіх товарів немає в наявності в одному магазині.

Мал. 22. Приклад сторінки оформлення замовлення.

Результати

В результаті злагодженої кропіткої роботи команди фахівців Leroy Merlin і Webpromo були досягнуті відмінні показники. У цифрах це виглядає так:

Мал. 23. Дані Google Analytics для сайту Leroy Merlin.

Як видно, менш ніж за рік дохід від продажів через сайт збільшився на 315% при збільшенні кількості транзакцій на 361% і збільшенні їх коефіцієнта на 217%.

Для того, щоб досягти таких результатів нам знадобилося:

8 людей для створення нового дизайну сайту;
500 годин на розробку та узгодження ТЗ, маркетингове дослідження й прототипування сайту;
182 макети для реалізації вибраної концепції дизайну;
100 днів на впровадження розробниками Devatlant.

Відгук клієнта

Микола Романов, Product Owner компанії Leroy Merlin

«Наша співпраця з Webpromo відразу ж почалася з хорошого: первинний аудит фахівців виявив нові та підтвердив вже відомі нам шляхи розвитку. З точки зору нас як клієнта, майже всі вони були зрозумілі відразу, частину нам роз’яснив Влад (ред. — Владислав Сідньов, керівник відділу CRO & Analytics Webpromo) та його команда, а частину, що залишилася, ми все ще перевіряємо.

Дуже багато роботи велося з метою познайомити хлопців — і, зрозуміло, відвідувачів «Леруа Мерлен» — з нашими цінностями, прагненнями й болями. В рамках декількох стратегічних сесій та подальших операційних зустрічей їм необхідно було зрозуміти і прийняти всі наші особливості як бренду.

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

Особливо добре те, що цей процес можна сміливо назвати нескінченним. Враховуючи отриманий досвід, описаний вище, ми твердо маємо намір продовжувати збільшувати його разом».

Підпишись на гарячі

Маркетинг-новини

МАРКЕТОЛОГ 2.0 >

Підпишись на щомісячний

Дайджест новин