Студенников Денис
Керівник 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%.
Крім результату, вираженого в цифрах, ми змогли вирішити всі три ключові завдання компанії і допомогли закріпити в бізнесі омніканальний підхід, при якому клієнт отримує однаково якісний сервіс як в магазинах мережі, так і в онлайн.
