Як особливості проектування інтернет-магазину впливають на ключові показники сайта? Керівник UX/UI відділу компанії “Турум-бурум” Денис Студенников розповість деталі інтерфейса парфумерної В2В компанії Perfumer.
Про компанію Perfumer та завданнях бізнесу
Компанія Perfumer – офіційний дилер парфумерної продукції ТМ Reni та великий постачальник флаконів в Україні. Бренд створює оригінальні запахи, аналогічні відомим брендам.
Компанія на ринку з 2000року,та відноситься до В2В сегменту, тобто орієнтована на оптові продажі.
Власники були занепокоєні низькими показниками ефективності поточного сайту та звернулися до нас, як експертів з питань дизайну та покращення юзабіліті сайта.
Перед нами стояло завдання створити інтернет-магазин, в якому:
- буде зручно оформити оптове замовлення;
- користувач зможе швидко відстежити своє замовлення;
- буде можливість повторити раніше зроблене замовлення;
- кожна сторінка буде заохочувати користувача зробити покупку онлайн на сайті, а не по телефону, що дозволить розвантажити кол центр;
- сайт буде відповідати позиціонування бренда, як відомого, перевіреного, надійного бізнес партнера з якісною оригінальною продукцією.
Пошук вектора руху
Ніша парфумерії – це був новий досвід для нас. Хоча раніше ми працювали із суміжною тематикою – косметичною нішею та нішею fashion, але нам було важливо дізнатися більш тонкі деталі бізнесу. Тому вивчення та поринання в деталі бізнесу складалося із декількох етапів:
- юзабіліті аудит сайта
- інтерв’ювання представників бізнесу
В результаті аналізу даних аналітики, записів Hotjar, карт кліків, виявили безліч нюансів та проблемних місць. Попередній сайт компанії застарів, величезна кількість погано структурованого контенту приводила до того, що користувачі часто не знаходили потрібну інформацію: не доскролювали до ключових моментів, не розуміли як оформити замовлення, не могли розібратися в особливостях товарів.
Ми склали список критичних помилок інтерфейсу, які негативно впливали на ключові метрики. Більш за все проблем було виявлено в адаптивній версії. Тому було вирішено провести редизайн сайта, керуючись при цьому принципом mobile-first.
Створення концепції проекту
Так як проект відноситься до В2В сегменту, сайт потрібно було зробити простим та мінімалістичним. Окрім функцій продажу, він повинен виконувати роль каталогу, для того, щоб користувач міг оперативно отримати інформацію про товар. Тобто головне на сайті – це контент.
Візуальне уявлення концепції майбутнього сайта
В якості основних кольорів були обрані приглушені відтінки зеленого, синього та оранжевого
Щоб підкреслити обраний вектор мінімалістичності, ми використали в інтерфейсі багато кастомних графічних елементів.
Ми підготували макет головної сторінки та після погодження продовжили роботу
Зі сторони компанії Perfumer була максимальна залученість, активну участь в прийнятті рішень та погодженні концепції приймали менеджери та власник компанії Олексій. Тому швидко перешли до етапу реалізації.
Ми створили дизайн макети всіх сторінок, а компанія WebHome успішно реалізувала їх в розробці.
Рішення, які були прийняті в інтерфейсі
Пройдемося по ключовим сторінкам інтернет-магазина Perfumer та ще раз переконаємося в тому, як виправлення, здавалося б дрібних помилок інтерфейса впливає на взаємодію користувачів з інтерфейсом, а значить і на ключові показники сайта.
Головна сторінка: заманливі точки входу та структурування за допомогою кастомних елементів
Найбільш критичними помилками, над якими ми розпочали роботу в першу чергу, були наступні:
- Шапка занадто велика займає 1/3 екрана.
- В бургері знаходяться тільки інформаційні елементи, немає входу в особистий кабінет. Категорії, які повинні бути доступними з будь якої частини сторінки, доступні тільки на головному екрані.
- Різні під-категорії в каталозі та на сторінці видачі.
- Незвичне розташування елементів на сторінці: каталогу, фільтрів та сортування, пошуку.
- Відсутність переглянутих та збережених товарів
Так виглядала стара версія основної сторінки
Вирішення:
Пропрацювали структуру головної сторінки, посилили точки входу, дали можливість бізнесу комунікувати з користувачем в надшапочному банері: з перших секунд взаємодії повідомляти про різні акції, щоб мотивувати їх піти далі.
Головна сторінка сайта Perfumer після редизайна
Оптимізували розміри шапки, розташували в ній всі необхідні ключові елементи: іконки “Переглянуте” та “Вибране”, доступ до особистого кабінету, можливість швидко відслідкувати замовлення, акцентний ящик.
Центрували лого, так як ніша наближена до fashion тематики. Таким чином, ми звертаємо увагу користувача на значущість та історію бренда – на ринку більше 20-ти років.
Навігацію оформили у вигляді горизонтального меню на десктопі та у вигляді бургера в адаптиві. Переглянули пріоритизацію блоків, візуально виділили розділ з акціями. За допомогою кастомних іконок підкреслили зовнішній вигляд флаконів для розливної продукції, так як їх дизайн розробляється спеціально для компанії Perfumer студією Arriba.
Графічні елементи допомагають створити унікальну атмосферу сайта, підкреслюють загальну стилістику, роблять її запамятованою
Ми задали стилістику банерів та створили спеціальний гайд для їх правильного ведення. Тепер команда маркетологів інтернет-магазина може самостійно оновлювати зміст банерів, не порушуючи загальну стилістику сайту.
Цей маленький, але важливий нюанс дозволяє підтримувати сайт свіжим та стильним.
Затягуємо користувача точками входу з яскравими, емоційними фотографіями та показуємо товар “обличчям”, щоб люди бачили реальну інформацію.
При наведенні на іконку користувач бачить альтернативний аромат.
Також Perfumer пропонує спеціальні пакетні пропозиції з стартовими наборами продукції для тих, хто хоче розпочати співробітництво з брендом. Ми вивчили особливість кожного пакета, за аналогами з попередніх пунктів меню, подали інформацію структуровано, з використанням ілюстрацій, для кращого сприйняття.
Особливу увагу приділили роботі пошуку. Продумали зручний повнотекстовий пошук, який дозволяє шукати товари за частковим співпадінням найменування товару і артикуля.
В результаті пошуку користувач одразу басить повне найменування альтернативу аромата, а також актуальну ціну.
Гнучка система полегшує та пришвидшує процес покупки.
Сторінка видачі: пріоритизація фільтрів та раціональне використання простору
Після головної сторінки почали рухатися далі за воронкою. На сторінці видачі ми знайшли такі основні проблеми:
- некоректна робота інструмента сортування;
- нераціональне використання простору в мобайл, демонстрація по одній плитці товару в рядку, хоча є вільне місце;
- фільтри знаходяться на другому екрані, що обмежує доступ до них.
Так виглядала стара версія сторінки видачі сайта
Вирішення:
Так як ми мали справу з великою кількістю фільтрів, ми залишили їх в боковій лівій панелі. Згідно даним аналітики та спостереженням бізнесу в пріоритет поставили опції відфільтрувати “Новинки” та “Хіти продажів”. А вже дальше ввели найменування колекцій, характеристики ароматів та аналоги брендів.
Для простої навігації в середині категорії додали вгорі спеціальний перемикач, щоб швидко проходити між серіями
В блок з фільтрами додали вгорі слот, в якому користувач одразу бачить, які фільтри застосовані та може швидко їх очистити.
В нижній частині сторінки також передбачені переходи на інші категорії, щоб людина не виходила з сторінки, якщо їй нічого не сподобалося
Таким чином ми підштовхуємо користувача не припиняти свій сеанс, а рухатися далі по навігації.
В адаптиві розмістили карточки товару по дві в рядок. Акцентували увагу на кнопці фільтрів. Панель з фільтрами відкривається в окремому вікні. Вікно згортається після натискання кнопки “Застосувати”. Також дали можливість користувачеві покласти товар в корзину безпосередньо з видачі.
Користувач з першого вікна бачить результати видачі. При натисканні на кнопку “Купити” з’являється поп-ап корзина, де одразу можна вказати необхідну кількість, не переходячи на карту товару.
Карточка товару: блокова структура з доступною вичерпною інформацією
Наступним кроком воронки є карточка товару. Ось основні помилки, які вимагали виправлення з метою оптимізації конверсії:
- в мобайлі кнопка додавання товару в корзину знаходилися занадто низько, що призводило до того, що користувач просто не доскролював до неї;
- інформація про товар, яку найчастіше дивляться користувачі знаходилася занадто низько;
- оплата та доставка не виглядали як клікабельні посилання з додатковою інформацією;
- вибір кольору флакона далеко від картинки, користувачам доводилося скролити, щоб переглянути всі можливі опції;
- користувачі не розуміли як оформити замовлення, та часто перетелефоновували в колл-центр.
Так виглядала стара версія карточки товару
Вирішення:
В новій карточці товару вивели велику фотографію товару та зображення альтернативи. Структурували ключову інформацію, візуально розбили її на блоки для кращого сприйняття. Акцентували call-to-action.
Виводимо ключову інформацію: об’єм, кількість в ящику, ціну, характеристики аромату
Тепер будь який користувач, в тому числі і посередник, який реалізує цю продукцію, може скористатися сайтом як каталогом та отримати інформацію по кожному аромату. Також додали стрілочки, які дозволяють перегортати сторінки каталогу та швидко переглядати всі аромати колекції.
Так як багато хто не знаходив інформацію про товар, з першого екрана дали користувачу посилання на опис продукту: додали пункт “Опис” з посиланням “Читати”, яка переводить користувача на ту частину сторінки, де розташована повна характеристика.
Також у вигляді посилання даємо інформацію, як зробити замовлення
Таким чином, допомагаємо користувачу рухатися далі по воронці, збільшити глибину перегляду сторінки та тривалість сеансу.
Доповнили карточку товару інструментами cross-sale и upsell: “Схожі аромати”, “Аромати в інших колекціях”, “З цим товаром купляють”.
Для сторінки з флаконами впровадили функціонал покупки не поштучно, а ящиками. Користувач може одним кліком покласти в корзину одразу ящик ємкостей.
Демонструємо вигоду при покупці великої кількості одиниць
Чекаут
Завершальний етап шляху користувача, де важливо зробити процес максимально простим та зручним, щоб нічого не завадило користувачу завершити замовлення.
Ключові помилки, які були виправлені:
- Повноцінна шапка та категорії на чекауті.
- При самовивозі не вказані адреси магазинів.
- На кроках чекаута не вказана вартість замовлення, особливо, де вказана мінімальна вартість для безкоштовної доставки.
Так виглядала стара сторінка оформлення замовлення
Вирішення:
Створили простий та зрозумілий чекаут, розбили його на смислові блоки та реалізували в 3 кроки:
- ввід персональних даних;
- доставка та оплата;
- підтвердження замовлення.
В правій частині закріпили “Корзину” з можливістю в будь який момент відредагувати замовлення. На кожному етапі оформлення замовлення користувач бачить актуальну суму замовлення та вартість доставки
На першому кроці оформлення замовлення постійні покупці авторизуються за номером телефону та паролем, а новим клієнтам необхідно вказати ім’я, телефон та e-mail.
На другому кроці користувачу потрібно обрати спосіб доставки та оплати.
Передбачили можливість оформлення замовлення як на себе, так і на іншу людину.
На кожному із кроків інформуємо користувача, що буде після натиснення тієї, чи іншої кнопки. Так на першому кроці замість кнопки “Далі” реалізували кнопку “До доставки та оплати”, на другому кроці – “До підтвердження замовлення”.
В результаті оформлення замовлення виводимо користувачу thank you page,де інформуємо клієнта. що буде відбуватися далі. Даємо посилання на особистий кабінет та нагадуємо, що там можна відслідкувати статус замовлення.
Акцентуємо увагу на кнопці “На головну”, щоб користувач продовжив вивчення сайта
Оформлення замовлення – це фінальний етап шляху користувача та важливо, щоб ніщо не заважало покупцю закінчити угоду. Тому ми максимально забрали із шапки можливі точки виходу.
Результати роботи над інтерфейсом на сайті Perfumer
В дизайні інтернет-магазина Perfumer ми запровадили багато перевірених практикою рішень:
- Сконцентрували на головній сторінці максимальну кількість точок входу на інші розділи сайту.
- Структурували інформацію в цілому на сайті.
- Налагодили коректну роботу пошуку та інструментів фільтрації і сортування.
- Впровадили cross-sell та upsell інструменти.
В результаті спільних зусиль команд дизайнерів “Турум-бурум”, розробників WebHouse та бізнесу Perfumer, ми не тільки зробили зручний для користувачів інтерфейс, але й повпливали на ключові показники роботи сайту:
Коефіцієнт транзакцій виріз в десктоп на 23.97%, а в мобайл – на 43.42%.
Це ще раз підтверджує той факт, що інтерфейс – важлива складова бізнесу, над якою потрібно постійно працювати. Якісна робота сайту забезпечить ефективну конвертацію трафіку в дохід компанії.
