MY.UAСтатьи
Был пресный сайт и не кликабельные кнопки. Как мы изменили дизайн интернет-магазина и увеличили чек в 1,7 раза
Был пресный сайт и не кликабельные кнопки. Как мы изменили дизайн интернет-магазина и увеличили чек в 1,7 раза

Был пресный сайт и не кликабельные кнопки. Как мы изменили дизайн интернет-магазина и увеличили чек в 1,7 раза

Как новый дизайн сайта может снизить процент отказов на 24% и увеличить средний чек в 1,7 раза? В этой статье расскажу о процессе редизайна сайта Lamour, как изменить UX/UI дизайн и какие методы использовать для улучшения показателей и повышения конверсии интернет-магазина.

Курс
Frontend-програміст
Знаєш, чим відрізняється Frontend від Backend? Ми тобі розповімо, як заробляти на цьому
Хочу в IT!

О проекте и задачах

Lamour Amour Beauty Company (Lamour.ua ) – импортер профессиональной итальянской косметики для волос. Бренд обратился к нам за редизайном сайта. Цель была – повысить конверсию и эффективность сайта. 

Клиентами Lamour Beauty Company являются B2B и B2C, но главной задачей было улучшение взаимодействия именно с сегментом B2C. А также интерес новых клиентов и удержание уже существующих.

Как мы повысили конверсию интернет-магазина

Процесс редизайна сайта разделили на несколько этапов. Сначала мы провели аудит UX как первый шаг оптимизации конверсии интернет-магазина. Процесс анализа охватывал следующие пункты:

  • Настройка инструментов и отслеживание поведения пользователей с помощью карт кликов, карт скрола, тепловых карт;
  • Курс
    PM в IT
    Тебе навчатимуть найкращі
    Хочу на курс
  • Анализ данных для создания гипотез о том, как улучшить интерфейс и увеличить конверсию;
  • Предоставление детального отчета с гипотезами и описанием проблем, сопровождающихся скриншотами и рекомендациями;
  • Определение приоритетности выявленных проблем и предложения по их устранению в зависимости от уровня критичности.

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

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

Все работы мы разделили на три спринта:

  1. Оптимизация главной страницы, навигации, страниц товаров, а также стилистики сайта в целом.
  2. Разработка списка товаров, корзины, оформление заказа и стилистики сайта.
  3. Устранение ошибок личного кабинета, поиск по сайту, ответвление для PRO клиентов и доработка стилистики сайта.
  4. UI/UX Design
    Якщо душа лежить до прекрасного, але й заробляти хочеться багато – тобі сюди

    Ану, покажіть

Далее расскажу подробнее о процессе выполнения работ по первому спринту. Пока мы перешли к выполнению работ по второму спринту, так что продолжение следует. 

Стилистика сайта и главная страница

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

Проблема: стилистика проекта была не выражена, не формировала ощущение бренда.

Некоторые элементы, например кнопки, не выглядели кликабельными. Дизайн отдельных блоков был слишком минималистичен, сер и пресен, без акцентов. Это отрицательно влияло на показатели вовлечённости пользователей, а также было причиной аномально высокого показателя отказов – 63%.

Так выглядела главная страница бренда до редизайна

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

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

Кнопки с более акцентированным цветом, при наведении на кликабельные элементы меняется значок курсора и цвет элемента

Блоки позиционирования компании. Продемонстрировали преимущества компании, добавили более привлекательные баннеры, адаптированные под мобильные гаджеты.

Блок преимуществ компании

Блоки с товарами (сквозные). Добавили блоки топ товаров, акций и скидок, новинки и предложения брендов, чтобы увеличить количество точек входа, ознакомить пользователя с тематикой сайта, привлечь пользователя идти дальше по воронке.

Блок с самыми популярными товарами интернет-магазина с возможностью сразу добавить товар в корзину, перейти на страницу товара или просмотреть товары категории

Блок с акционными товарами

Отзывы и цены топ товаров. Чтобы заинтересовать B2C пользователей покупать чаще, добавили социальное доказательство, чтобы поднять уровень доверия и помочь принять решение.

Такие решения позволили установить приоритет элементов на страницах и усилить упор на важных блоках интерфейса.

Навигация по сайту

Проблема: основная цель навигации – ускорить поиск необходимого товара или информации, даже если пользователь оказался на сайте впервые, но до редизайна навигация Lamour Beauty не достаточно выполняла свои функции.

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

Курс
Продюсування артпроєктів
Наведемо лад у цьому творчому безладі?
Та-а-ак

До редизайна был структурирован каталог товаров, что препятствовало быстрому поиску необходимого товара.

Вид каталога до редизайна

Категории меню для волос не помещались на одном экране, из-за чего пользователи могли не найти нужную им категорию товаров.

Вид категорий до редизайна

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

Вид каталога в мобильной версии интернет-магазина до редизайна сайта

В адаптивном дизайне сайта значок «бургер меню» был необычен и не акцентен, поэтому игнорировался пользователями, что влияло на exit и bounce rate.

Неочевидная иконка меню в мобильной версии сайта интернет-магазина Lamour.ua

Для оптимизации навигации по сайту было введено следующее. Мы закрепили навигационное меню вверху страницы и отображаем меню при скроле вверх.

Закреплена навигация при скроле вверх

Закреплена навигация в скролах вверх в десктопной версии

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

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

Отображаем категории второго уровня при щелчке на всю область, чтобы сократить навигацию и поиск.

Каталог после редизайна

Настроили поиск в Google Analytics, чтобы лучше понимать, что именно ищут, чтобы упростить процесс навигации по воронке. Сделали значок «бургер меню» привычным для пользователя, состоящим из трех линий.

Страница товара

На странице товара информация была не структурированной, не были расставлены приоритеты, а также не выделены основные элементы – название товара, блок покупки, разделы описания и характеристик.

В то же время акцентны были код товара, кнопки «Купить», «В избранное», «Сравнить». Пользователям трудно было ориентироваться и найти нужную информацию. Это усложняло подбор товара и тормозило принятие решения.

На карте товара из категории Pro была кнопка «Только Pro» вместо «Купить», потому что эти товары могут приобрести только мастера. Но это правило не было очевидно для пользователя. Он не понимал, почему не может положить продукцию в корзину.

Карта товара до редизайна

Мы приоритезировали информацию, выделили название товара, кнопку покупки, заголовки разделов и описания. Чтобы пользователям было понятнее, что означает кнопка «Только Pro», добавили пояснительную информацию на страницу товара.

Вид карты товара после внедрения рекомендаций по оптимизации интерфейса

Результаты первого спринта и выводы

Все наши дизайнерские решения внедряли наши партнеры ShopExspress. Вот чего удалось добиться в результате оптимизации и изменений в UX/UI дизайне:

  • Процент отказов для десктопной версии сайта снизился на 24%;
  • Привлечение на страницы выросло почти на 100% на сессию и на 100% времени на сайте для десктопной версии сайта;
  • Увеличение количества товаров под заказ увеличилось на 43%;
  • Средний чек увеличился в 1.7 раза;
  • Показатели привлечения пользователей выросли почти на +92% страниц за сеанс и на +79% времени, потраченного на сайте для десктопной версии сайта.

Итак, даже небольшие изменения в UX/UI дизайне могут оказать значительное влияние на количество покупателей и конверсию в целом. Оптимизация сайта Lamour.ua не стала исключением.

Курс
Excel для бізнесу
Навчимо вас шаманити в тій страшній табличці. Українською
Хочу

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

Поделиться
Поделиться сюжетом
Источник материала
Святковий wishlist популярних українських візажисток
Elle
2024-12-23T15:03:48Z
Образ дня: Мадонна показує, як носити трендову шубу від українського бренду
Elle
2024-12-23T14:51:58Z
Таню Муіньо підкорює світ
Elle
2024-12-23T12:36:41Z
Хто такий Рафал Лемкін та чому його імʼям назвали вулицю у Львові
Photo Lviv
2024-12-23T06:04:06Z
Чому варто завітати до київського ресторану БАВОВНА
Elle
2024-12-22T10:01:04Z
Валерій Залужний написав свою першу книгу мемуарів - видання вже побачило світ
Ukraine Art News
2024-12-20T19:09:38Z
Директорку музичного лейбла підозрюють у несплаті 1,5 млн грн роялті. За даними ЗМІ, потерпіла - вдова Кузьми Скрябіна
Ukraine Art News
2024-12-20T14:09:41Z
Нові обрії: «ELLE Україна» презентує новий номер з Таню Муіньо на обкладинці
Elle
2024-12-18T09:48:45Z
СолоХа обурилась, що не пройшла на Нацвідбір, і заявила, що треба заборонити артистам брати участь удруге
Ukraine Art News
2024-12-16T11:45:51Z
Виставка Сипняка відкрилась у Львівській філармонії
Photo Lviv
2024-12-25T06:07:03Z
Вибір ELLE: небанальні подарунки для оселі й дозвілля
Elle
2024-12-24T11:51:53Z
Різдво та Новий рік 2025 в Києві: гід найцікавішими заходами
Хмарочос
2024-12-24T11:31:12Z
У Києві проведуть благодійну Маланку
Хмарочос
2024-12-24T11:25:02Z
Українські книжки передали Національній бібліотеці Азербайджану
Ukraine Art News
2024-12-24T11:22:06Z
Подорож у минуле: історія металевої сумки Paco Rabanne 1969
Elle
2024-12-24T10:12:59Z
В Івано-Франківську провели конкурс на найкращий підлітковий урбан-проєкт. Перемогли школярі з Вінниці
Хмарочос
2024-12-24T10:10:36Z
Харківський оркестр Prime Orchestra розпочав турне Туреччиною
Ukraine Art News
2024-12-24T10:10:20Z
Фонд Нормана Фостера оголосив результати конкурсу на відновлення будівлі Харківської ОДА. Що з ними не так?
Хмарочос
2024-12-24T09:37:12Z
Твій watch-list на канікули, подарунки на Титрі і добра справа на свята
Cineast
2024-12-25T00:40:10Z
Як ми осмислювали «10 років триденної війни, яка триває три сторіччя»: підсумки 21 Мандрівного Docudays UA
Cineast
2024-12-25T00:32:25Z
Доктор, леді Віслдаун та динозаври зустрічаються у фрагменті різдвяної серії «Доктора Кто»
KinoFilms
2024-12-24T12:42:29Z
Вийшов трейлер серіалу "Нульовий день", в якому Роберт Де Ніро грає експрезидента США
Ukraine Art News
2024-12-24T12:30:47Z
Убивство українки Гатчінс: прокуратура припинила кримінальну справу Алека Болдвіна
Ukraine Art News
2024-12-24T11:45:56Z
Universal Pictures розкрила подробиці про новий фільм Нолана
Ukraine Art News
2024-12-24T10:30:48Z
🌟RIBBON та Decentralized Pictures оголошують Повний Короткий: конкурс проєктів короткометражних фільмів для підтримки українських кінематографістів!
Cineast
2024-12-24T00:42:51Z
Режисерка фільму «Все, що ми уявляємо як світло» Паял Кападія задонатила свій грошовий приз на потреби організації «Бульдозер», що доправляє загиблих військових додому
Cineast
2024-12-24T00:31:19Z
Пітчинг Української Кіношколи: молоді кінематографісти представили відомим продюсерам свої проєкти
Cineast
2024-12-24T00:28:05Z
Лісовий будинок із вініловим програвачем і бібліотека з гамаками: під Києвом будують глемпінг на 100 номерів
Хмарочос
2024-12-23T09:46:55Z
Реконструкція Орбана: Будапешт зводить репліки на місці втрачених історичних будівель
Хмарочос
2024-12-23T06:34:01Z
На ВДНГ відкрили теплу спортивну локацію
Хмарочос
2024-12-22T10:51:44Z
В Парижі зменшили швидкість на кільцевій з 70 до 50 км/год. Тепер в місті менше аварій, заторів, шуму та забруднення
Хмарочос
2024-12-19T13:57:49Z
Як саудівський мегапроєкт у пустелі витісняє місцевих жителів: їх виганяють під дулами автоматів
Хмарочос
2024-12-19T07:04:38Z
Місто, засноване попри логіку
Photo Lviv
2024-12-19T06:12:26Z
У Канаді відкрили нову «Українську книжкову поличку»
Ukraine Art News
2024-12-18T11:54:53Z
Польща допоможе з відновленням унікальної вілли у Львові після вересневого обстрілу
Хмарочос
2024-12-18T08:21:48Z
Площа у місті Лодзь отримала звання кращого громадського простору Польщі 2024 року
Хмарочос
2024-12-17T12:39:50Z
До студії каналу Еспресо принесли Вифлеємський вогонь миру
Ukraine Art News
2024-12-25T06:15:58Z
Як святкували Різдво у Львові з часів заснування міста
Photo Lviv
2024-12-25T06:12:45Z
В області вшановували пам’ять членів ОУН Василя Біласа та Дмитра Данилишина
Photo Lviv
2024-12-25T06:00:46Z
Чому сонцезахисний крем необхідний щодня?
Photo Lviv
2024-12-25T05:57:31Z
Уряд пропонує позбавити державного захисту російську та білоруську мови
Ukraine Art News
2024-12-24T20:31:00Z
15 beauty-подарунків на будь-який бюджет до Нового року — 2025
Elle
2024-12-24T20:15:44Z
Неформат, або "Дєвочкі на культурку"
Ukraine Art News
2024-12-24T19:01:04Z
Із ходою й колядою: у Львові встановили традиційний чотириметровий дідух
Ukraine Art News
2024-12-24T17:15:41Z
Різдвяно-новорічний wishlist українських захисниць
Elle
2024-12-24T17:15:40Z
Огляд слота Tiki Reward
Cineast
2024-12-25T00:47:46Z
Чого старше покоління може повчитися в «тупих дітей»
Ukraine Art News
2024-12-22T17:00:53Z
«Еталон» зробив перший електробус на основі дизельної моделі
Хмарочос
2024-12-21T08:48:59Z
Ілон Маск заявив, що може сполучити США та Британію тунелем під океаном
Хмарочос
2024-12-20T10:25:09Z
Де купувати книжки: сервіс MEGOGO запускає онлайн-книгарню
Elle
2024-12-17T13:33:50Z
«Укрзалізниця» відремонтує два «Тарпани» за 245 мільйони гривень
Хмарочос
2024-12-17T08:40:09Z
В Україні створять національну мережу зарядних станцій для електромобілів
Хмарочос
2024-12-15T10:24:53Z
Одещина отримала новий візуальний стиль. Депутати спершу нічого не зрозуміли
Хмарочос
2024-12-14T07:13:05Z
Рецепт ідеального узвару: корисний для імунітету напій, без якого неможливо уявити різдвяну вечерю
Elle
2024-12-24T10:45:44Z
Різдвяне меню: штолен, який виходить у всіх
Elle
2024-12-20T20:24:35Z
Королівський пляцок-пиріг: смачно через віки
Ukraine Art News
2024-11-15T09:30:48Z
Секрети приготування смачного бургера в домашніх умовах
Photo Lviv
2024-10-24T04:57:29Z
Дуже смачна лазанья з козячим сиром
Elle
2024-09-23T13:39:47Z
Сезонний десерт: хрустка та ароматна сливова галета
Elle
2024-09-19T07:32:19Z
Ідеальний соус до будь-яких страв: чатні з помідорів
Elle
2024-09-17T16:04:06Z
Від Бенедикта до шакшуки: 7 смачних способів приготування яєць
Elle
2024-09-13T11:13:30Z
Фетучіні зі шпинатом і сиром горгондзола
Elle
2024-08-30T13:09:44Z