Як покращити користувацький досвід під час масштабування бізнесу: Кейс ORNER

На прикладі кейса ORNER Денис Студенніков, СОО та Head of UX/UI department студії Турум-бурум, розповідає, як CRO та ESR підхід сприяли зростанню бізнесу впродовж років без втрати лояльності інтернет-користувачів та з мінімальними витратами.

Історія масштабування бізнесу та змін інтерфейсу

2021: знайомство та початок співпраці

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

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

Згідно з цими гіпотезами, ми створили нові дизайн-рішення й більшість цих змін було впроваджено на сайт, що посприяло збільшенню мобільних транзакцій у 1,5 раза. Надалі ми співпрацювали по принципу «Сервіс за підпискою» – тобто постійно підтримували інтерфейс, що існує, удосконалювали його відповідно до змін ринку та задач бізнесу (допрацювання лейблів, каталогу, меню, сервісних сторінок тощо).

2023: нові бізнес-цілі, новий UX аудит та нові зміни інтерфейсу

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

Тому у 2023 році ORNER знову звернулися до Турум-бурум за послугою UX аудит. Було проведено повний аналіз юзабіліті сайту та виявлено більше ніж 40 нових гіпотез та нових точок росту. 

Еволюція дизайну: елементи інтерфейсу, яким слід приділити увагу при масштабуванні бізнесу

1. Захоплива головна сторінка – обличчя бренду

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

Що робити:

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

У 2021 році, працюючи з ORNER, оновили головну сторінку, аби краще підкреслити переваги інтернет-магазину. Додали акцентні блоки, які виконували подвійну функцію: привертали увагу до унікальності бренду та слугували додатковими точками входу для користувачів.

У 2023 внесли ще декілька змін на головній сторінці:

• Стан залишеного кошику. Інтегрували блок, який нагадує користувачу про незакінчену купівлю, щоб швидко повернути його до воронки продажів;
• Оновлений UI kit. Змінили UI kit для елементів дизайну сайту (кольори та форму для лейблів, кнопок тощо), щоб зробити їх більш акцентними, привертати увагу користувачів і пришвидшити їх рух по воронці до покупки.

Еволюція головної сторінки інтернет-магазину ORNER 2022 і 2024 роки

2. Добре продуманий каталог та структуроване меню 

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

Ефективно організоване меню та каталог – це не лише комфорт для користувачів, але й реальний вплив на продажі. Спрощуючи навігацію, ви скорочуєте час на пошук і підвищуєте ймовірність покупки.

Що робити:

• Аналізуйте потреби користувачів. Досліджуйте, як вони шукають товари: які категорії популярні, де виникають труднощі.
• Структуруйте каталог. Продумайте усі підкатегорії та уніфікуйте роботу усіх категорій.
• Додайте візуальні елементи. Іконки чи зображення допоможуть зробити меню більш наочним та зрозумілим.
• Актуалізуйте меню. Змінюйте формат меню та каталогу залежно від асортименту інтернет-магазину.

У 2021 році, коли ORNER був інтернет-магазином з невеликим асортиментом товарів, зручним рішенням стало мінімалістичне горизонтальне меню, де відображалися усі головні категорії товарів з акцентом на актуальні пропозиції та акційну продукцію.

Відповідно, у 2023 році, коли асортимент став набагато більшим, то й потрібно було вносити зміни до навігації:

• Додали меню «Каталог». Це окрема кнопка зі структурованим списком категорій та підкатегорій, доповненим зображеннями для кращого залучення користувачів;
• Оновили горизонтальне меню. У десктопній версії тепер відображаються найактуальніші категорії, наприклад, нові колекції чи хіти продажів.

Зміна дизайну каталогу та меню 2022 і 2024 роки

3. Сторінка видачі товарів: все до дрібниць та зручності користувача

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

Що робити:

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

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

Після повторного аудиту, у 2023 році також було запропоновано додаткові зміни:

• Закріпити кнопки фільтрів, сортування та каталогу при прокрутці.
• Додати інтервал вибору ціни на товари, щоб користувач зручно відфільтрував товари відповідно до свого бюджету на подарунок.
• Додати вбудовані рекламні банери на видачі для інформування про товари, які також можуть зацікавити користувача.

Дизайн видачі категорії інтернет-магазину ORNER у мобільній версії 2022 і 2024 роки

4. Зручний кошик на будь-якому пристрої

Кошик – передостанній етап воронки продажів. Тому дизайн кошика має бути зручним та простим з усіма важливими деталями про замовлення, щоб користувач міг швидше прийняти рішення про купівлю. 

Що робити:

• Забезпечити інформативність. У кошику має відображатися вся важлива інформація для прийняття остаточного рішення: зручний перелік товарів, ціна, знижка, розмір, колір, загальна сума з урахуванням усіх додаткових витрат.
• Додавайте функціонал. Дозвольте користувачам редагувати товари прямо в кошику, а також надайте змогу переходити на товар по кліку на зображення та назву. Важливо, щоб це зручно було робити й в мобайл версії.
• Впроваджуйте cross-sale. Покажіть супутні товари, які можуть зацікавити клієнта.

У 2021, на основі даних аналітики, для ORNER було обрано кошик, що спливає, з деталями замовлення і простим та зрозумілим закликом до дії – реалізовані таким чином, щоб нічого не відвертало користувача від здійснення покупки.

У 2023 виділили кнопку «Оформити замовлення» яскравішим кольором, щоб вона не зливалася з іншими елементами інтерфейсу і користувач легше пересувався по воронці до покупки. Також спростили перегляд обраних товарів, зробивши фото клікабельними та змістивши акцент саме на замовлення, а не на додаткові послуги.

Зміни кошика інтернет-магазину ORNER у 2022 та 2024 роках

5. Чекаут і доставка: просто, лаконічно, зрозуміло

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

Що робити:

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

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

У 2023 році, після повторного аудиту були впроваджені наступні зміни:

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

Сторінка оформлення замовлення ORNER у 2022 та 2024 роках

І на останок: зручна мобільна версія сайту – must-have

За статистикою, 65% від усіх онлайн замовлень у 2023 році було оформлено саме через мобільні гаджети. Це чіткий сигнал для бізнесу: адаптивна версія сайту – вже не опція, а обов’язкова умова для успішної роботи.

Чому це важливо для бізнесу?

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

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

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

Приклад адаптованих сторінок сайту ORNER після другого редизайну

Підсумки та отримані результати

Вебсайт – це місток між бізнесом та користувачами. Важливо постійно вивчати свою аудиторію, слідкувати за трендами UX та вдосконалювати інтерфейс аби відповідати потребам користувачів та залишатися конкурентоспроможними.

Так внаслідок навіть невеликих змін сайту ORNER за підходом ESR вдалося створити зручний інтерфейс, який повністю задовольняє потреби користувачів та відповідає бізнес цілям на всіх етапах розвитку. 

Завдяки продуманій UX стратегії, інтернет-магазин має зручну навігацію, чіткі категорії каталогу, структуровану сторінку видачі, кошик та оформлення замовлення, що підвищує ключові KPI проєкту:

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

Після редизайну у 2024 році у результаті зменшилась кількість відмов на 30% та збільшилась мікроконверсія додавання до кошика на 16%.

І це ще не кінець. Команда Турум-бурум продовжує співпрацювати та оптимізувати інтерфейс інтернет-магазину ORNER, щоб допомагати та сприяти розвитку бізнесу. Тож далі буде…