Редизайн сайту Lumier: створення клієнтоорієнтованого інтерфейсу, що збільшує продажі бізнесу

Як дати е-коммерс друге життя та підвищити конверсію бізнесу після тривалого періоду стагнації? Яку роль відіграє UX-аудит у розробці клієнтоорієнтованого інтерфейсу? На прикладі компанії Lumier у цій статті ми розглянемо поширені недоліки сайтів та з’ясуємо як перетворити їх на точки росту конверсії вашого онлайн магазину.

Про проєкт

Lumier — норвезька компанія, яка пропонує електрообладнання преміальної якості за доступними цінами. Магазин має широку цільову аудиторію і надає свої послуги для споживачів B2B і B2C сегментів.

Це відносно молодий сімейний бізнес, однак стартапом його точно не назвеш. Засновник компанії Пер Норман Нільсен вже є власником кількох відомих брендів, пов'язаних з електронікою і має понад 40 років досвіду підприємницької діяльності. Тепер він разом із сином працює над розвитком нового бізнес-проєкту — магазином Lumier.

Власники бізнесу звернулися до Турум-бурум з наступними запитами:

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

UX-аудит: визначення стратегії редизайну та потенційних точок росту CR

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

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

Для редизайну ми обрали стратегію ESR (Evolutionary Site Redesign), розроблену Турум-бурум, що полягає у виявленні недоліків інтерфейсу за допомогою аналітики та їх подальшому поетапному усуненні. 

Для цього кейсу це було оптимальним рішенням адже:

• платформа Lumier відносно молода і має невелику відвідуваність;

• веб-сайт функціонував добре, але в інтерфейсі були деякі недоліки, які негативно впливали на користувацький досвід;

• деякі аспекти веб-сайту потребували вдосконалення для збільшення його конкурентоспроможності.

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

Покращення юзабіліті сайту: найкритичніші проблеми та способи їх усунення

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

1. Демотивуюча головна сторінка

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

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

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

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

2. Проблеми з навігацією: незручне меню, що відволікає від головного

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

Крім цього, UX-аудит виявив юзабіліті недоліки навігації й у мобільній версії сайту Lumier.

Зазвичай, коли користувачі переглядають список товарів і хочуть перейти до іншого розділу, вони використовують кнопку «Назад». Але у випадку з Lumier після цієї дії клієнти потрапляли не на попередню сторінку, а у бургер-меню. Якщо ж вони знову натискали кнопку «Назад», то потрапляли на сторінку списку товарів у категорії, яку раніше навіть не переглядали. Такі речі можуть дратувати відвідувачів і змусити їх покинути сайт.

Рішення: Для меню в десктопній версії ми рекомендували зробити категорії 2-го і 3-го рівнів відкритими за замовчуванням і розмістити їх у межах доступної ширини екрана.

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

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

3. Каталог товарів: незручні фільтри

Проблема: Під час UX-аудиту ми виявили наступні проблеми з каталогом сайту:

1. Довгий список фільтрів, деякі з яких використовувалися рідко: Користувачам доводилося довго прокручувати сторінку, щоб знайти потрібний фільтр;

2. Відсутність списку застосованих фільтрів: Потенційні клієнти не бачили, чи обрали вони всі необхідні параметри;

3. Відсутність кнопки для очищення обраних фільтрів: Користувачам доводилося переглядати всі опції у списку та вимикати кожну окремо.

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

Рішення: Для зручного та ефективного пошуку ми рекомендували залишити лише 5-7 найпопулярніших фільтрів, щоб не перевантажувати сторінку. Решту параметрів ми запропонували презентувати у вигляді бургер-меню. 

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

Практична порада: Більше не завжди = краще. Довгий список фільтрів пошуку – це лише додатковий елемент, який відволікає користувачів від цільової дії і збільшує bounce rate. Тому варто дослідити аналітику взаємодії користувачів із вашою платформою й залишити лише найпопулярніші фільтри, щоб полегшити та пришвидшити пошук релевантних пропозицій.

4. Список товарів: відсутність елементів, що заохочують до покупки

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

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

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

5. Картка товару: відсутність інформації про умови доставки

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

Рішення: Додати візуально виокремлений блок з інформацією про способи доставки та її оплати. Краще виділити цю інформацію яскравими іконками або податицей розділ у вигляді списку.

Практична порада: майже 50% споживачів готові чекати на доставку до двох днів і близько 30% не проти почекати 3-4 дні. Це означає, що забезпечивши швидку доставку, ви можете значно збільшити дохід компанії та конверсію е-коммерс.

6. Неструктурований і перевантажений інформацією кошик

Проблема: Кошик не мав чітких акцентів і був незручним для користування. Кнопки вибору кількості товару у мобільній версії були маленькими і складними для натискання. Крім того, головним акцентом на сторінці була іконка «видалити». Таким чином, замість того, щоб закликати користувачів до взаємодії та оформлення замовлення, сторінка сайту ніби заохочувала видаляти обрані товари. Як наслідок, UX-аудит показав високий рівень виходів на сторінці кошику. 

Рішення: Ми рекомендували збільшити кнопки вибору кількості, змістити акцент з іконки видалення товарів, зрівняти за розміром блоки ціни та кількості й зменшити відстань між назвою товару та його ціною/кількістю у десктопній так мобільній версії е-коммерс.

Практична порада: 86% онлайн-покупців після додавання товару в кошик так і не переходять до сторінки оформлення замовлення — останнього етапу здійснення покупки. Тож для онлайн-магазину високий рівень покинутих кошиків фактично означає втрачені можливості і прибуток.

Причини такої поведінки можуть бути різними і вам потрібно врахувати всі можливі проблеми.

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

Редизайн сайту Lumier: досягнуті результати 

У цьому кейсі ми висвітлили лише невелику частину виконаної нами роботи. Після UX-аудиту команда Турум-бурум сформувала список з майже 60 рекомендацій норвезькою мовою для оптимізації конверсії Lumier. 

Завдяки якісному UX аудиту та ефективній співпраці з клієнтом, ми:

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

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