Ніхто не розумів, що ми продаємо Apple: як ми поміняли дизайн сайту і збільшили продажі

 

 

 

Студенников Денис
Керівник UX / UI відділу компанії Турум-бурум

Наше агентство «Турум-бурум» і «Техно Їжак» співпрацюють давно. У 2017 році ми допомагали хлопцям з адаптивною версією сайту. Тоді як раз різко збільшилася частка mobile-користувачів на ринку, крім того компанія росла, веб-сайт не дотягував і не відповідав її позиціонуванню. Він був простим, застарілим, з дизайном під невелику роздільну здатність, без функціоналу особистого кабінету і інших сучасних функцій.

Дизайн попереднього сайту «Техно YOжа»

 

Проектуючи новий інтерфейс від mobile-first, ми поставили перед собою такі завдання:

1. Зробити акцент на продажу техніки Apple

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

 

2. Підкреслити головну перевагу – рівень сервісу

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

Компанія не раз отримувала нагороди за кращий сервіс і в номінації «Вибір споживача». Нам треба було зробити процес оформлення покупки на сайті таким же зручним, як в реальному житті.

 

3. Зробити інтерфейс максимально орієнтованим на людину

«Техно Їжак» – компанія з людським обличчям. З тобою розмовляють твоєю мовою, ти свій серед них. Цю думку потрібно було донести через інтерфейс. Сайт повинен передавати принципи такої комунікації і служити провідником в спілкуванні двох людей.

Як ми вирішили ці завдання

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


Читати також: Збільшення CR на 13% для Zlato.ua: особливості UX / UI для ювелірної ніші


 

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

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

До складу команди ми вибрали фахівців, у яких був найбільший досвід в дизайні інтерфейсів інтернет-магазинів електроніки та відповідний характер. Наприклад, Макс, наш UX дизайнер, який проектував інтерфейс, обожнює «Рік і Морті», «Зоряні війни», і зберігає вдома 4 покоління приставок Sony Playstation.

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

Наш UI-дизайнер Юра, занурений в атмосферу «Техно YOжв», тестує сервіс в польових умовах

 

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

Ми продумали все мікровзаімовідносини  і  анімації. Після того як все було затверджено, ми передали проект нашим партнерам з WebHome, які давно співпрацювали з «Техно YOжом». Вони реалізували всі наші задумки в розробці і ось, що з цього вийшло :.

1. Apple – в центрі уваги

 

Дизайн головної сторінки був спроектований так, щоб було якомога більше точок входу на сторінки з технікою Apple: від нового iPhone до «Mac на будь-який смак».

Скріншот декількох блоків головної сторінки

 

Стилістика сайту створена в трьох основних кольорах: білий, чорний, сірий, які перегукуються зі стилістикою сайту Apple. А синій колір підкреслює індивідуальність бренду «Техно Їжак».

Плитка з популярних гаджетів, топ-10 товарів місяця,  анонс нового iPhone – всі ці месиджі цікаві цільовій аудиторії і занурюють вглиб сайту.

В результаті, не дивлячись на те, що головна сторінка в новому дизайні займає 4,5 екрану, її доскроліивають до кінця 63% користувачів. Показник відмов з головної сторінки при цьому також зменшився на 46%. Це говорить про те, що користувачі дійсно з цікавістю розглядають виведені на головну розділи.

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

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

 

 

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

2. Сервіс – ключова перевага

 

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

 

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

 

 

Кнопка «Купити» і ціна при скроллі в мобайл

 

Після редизайну ми досліджували різні сценарії додавання товару в корзину на кожному з пристроїв.

 

В результаті з телефону товарів в кошик стали додавати на 25% користувачів більше, а в desktop – на 53%.

 

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

Спочатку користувач бачить виїжджає вікно з cross-selling-елементами, як ремінці до годинника і бездротові пристрої, а далі вже бачить основну покупку в кошику – Apple Watch

 

Так, користувачам пропонуються товари з єдиної екосистеми Apple, що передає основну ідею Стіва Джобса.

Оформлення замовлення ми постаралися зробити таким же комфортним, як і в магазинах «Техно Їжак», на сайті є:

  • Автоматична реєстрація нового користувача при оформленні замовлення;

 

  • Авторизація за допомогою соцмереж;

 

  • Очевидний  опис помилок при заповненні форми;

 

  • Підключення геолокації для визначення міста користувача;

 

  • Створення маски телефону;

 

  • Підключення списку міст;

 

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

 

  • Перегляд відділень  Нової Пошти на карті і ін.

 

 

Сторінка оформлення замовлення стала зручною для користувача як в desktop, так і в mobile.

На відміну від попереднього сайту, в новому дизайні у користувачів також з’явився свій  простір – особистий кабінет, який ми забезпечили таким функціоналом:

 

  • Відстеження замовлень;

 

  • Відстеження зміни ціни;

 

  • Списки обраного;

 

  • Управління розсилками;

 

  • Збереження даних для повторних замовлень.

 

  • Особистий кабінет користувача в mobile

 

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

3. Люди – головна цінність

 

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

 

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

Ось засновник компанії, який двічі зійшов на Ельбрус, і молода директор Анна, яка в свої роки вже керівник.

 

Навіть в картці товару  не стокові фото, а реальних людей з команди «Техно Їжака», які зателефонують, якщо залишиш номер.

 

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

Результати зміни дизайну

 

 

 

 

 

 

 

У порівнянні з періодом один місяць до релізу нового сайту і періодом після:

  • Кількість користувачів, що додали товар в корзину, зросла на 41%;
  • Кількість користувачів, що перейшли до оформлення замовлення, збільшилася на 31%;
  • Коефіцієнт конверсії виріс на 41,94%.

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

banda.media

Обязательно подпишитесь на наш Telegram канал

ПОДПИСЫВАЮСЬ
ПОТОМ