Як зробити сайт зручніше для мобільних користувачів: Кейс про сервіс доставки їжі 966.ua

UX-аудит, тестування на фокус-групах і проєктування інтерфейсу від mobile-first. Про переваги цих процесів читайте на прикладі кейса про створення інтерфейсу для служби доставки їжі.

Проблема клієнта 

966 — це онлайн служба доставки паназіатської кухні. Понад 5 років компанія продає суші та локшину в Дніпрі, Харкові та Одесі. 

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

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

UX-аудит і виявлення помилок

Ми почали свою роботу з UX-аудиту - комплексного аналізу інтерфейсу на предмет помилок. 

Такий аналіз юзабіліті складався з наступних етапів:

• Занурення в бізнес-процеси
• Аналіз ринку та конкурентів
• Вивчення аналітики
• Аналіз шляхів користувачів
• Вивчення зворотного зв'язку кол-центру
• Аналіз теплових карт і записів вебвізора
• Виявлення проблемних зон сайту

В результаті ми склали список основних проблем і сформували гіпотези:

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

Усі ці та інші висунуті нами гіпотези ми вирішили перевірити за допомогою тестування на фокус-групі.

Складаємо портрет цільової аудиторії

Перед тим як зібрати фокус-групу, ми склали максимально детальний портрет цільової аудиторії:

Виходячи з даних аналітики, кол-центру та інтерв'ю з представником бізнесу, у 70% випадків це були дівчата віком 22-28 років, які роблять замовлення з мобільних пристроїв. Частіше за все це користувачі iPhone. При цьому в покупку входить 1 суші-сет і напій.

Користувацьке тестування 

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

Короткий опис одного зі сценаріїв виглядав так:

Ви повертаєтеся додому після роботи. П’ятниця. Дома нічого їсти. Ви вирішуєте замовити їжу з доставкою. 966 вам рекомендували на роботі. 

Завдання 1. Вибрати будь-який сет і будь-який напій

Завдання 2. Знайти умови доставки та оплати 

Завдання 3. Замовити обрану їжу

Завдання 4. Знайти номер телефону, щоб зателефонувати в службу самостійно

Результат користувацького тестування:

• 75% користувачів не змогли знайти меню з першої спроби. 
• 50% користувачів не знайшли потрібну інформацію про товар - вага та склад набору. А це ключові фактори, які впливають на додавання товару в кошик.
• 80% фокус-групи не зрозуміли всіх функцій сайту, зокрема, що таке розширене замовлення і як до нього перейти.
• 62% опитаних не знали, що робити після того, як додали товар у кошик, тому не змогли самостійно завершити замовлення.

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

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

Ці висновки ми врахували при розробці нового інтерфейсу.

Визначаємося з концептом

Тепер нам потрібно було вибрати концепт, який би зміг покрити всі виявлені проблеми. Ми проаналізували та оцінили кілька варіантів:

• Створення нової структури сайту від mobile first;
• Створення мобільної версії сайту;
• Створення застосунку на Бітрікс;
• Створення окремих додатків для Android та iOS.

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

Створюємо динамічний прототип основних сторінок  

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

Ці прототипи ми завантажили в Invision і перелінкували, щоб можна було провести тестування на фокус-групі та перевірити, чи вирішили ми задачу користувачів.

Тестуємо прототип на фокус-групі

Ми провели нове тестування на фокус-групі, яка підходила під портрет цільової аудиторії.

Тестування показало позитивні результати:

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

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

Створюємо прототипи всіх сторінок сайту

Утвердивши ключові сторінки, ми почали проєктування всіх сторінок, рухаючись від роздільної здатності 320px до 1920px.

В результаті ми отримали схему прототипів з 238 екранів, 76 сторінок і 162 станів.

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

Як змінився інтерфейс інтернет-магазина 966.ua

1. Нативна навігація iOS у меню

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

Кнопка “Меню” не була закріплена, і відвідувачу доводилося скролити весь асортимент розділу, щоб повернутися до шапки екрана. 

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

2. Кошик як сквозний елемент

В десктопній версії старого сайту посилання на “Кошик” розташовувалося в правому верхньому куті й відображало лише кількість доданих товарів та загальну вартість.

Таке рішення мало негативний feedback, адже не відображало, який конкретно товар додали в кошик і що з ним робити далі. 

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

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

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

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

3. Доступність інформації про товар

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

Тому в новому варіанті ми спроєктували картку товару так, щоб вся інформація про продукт була доступна.

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

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

4. Оформлення замовлення  

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

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

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

5. Мотиваційна система для допродаж

В старій версії сайту не використовувалися інструменти cross sale. Ми попрацювали в цьому напрямку і зробили процес додавання супутніх товарів на новому сайті простим, зрозумілим і залучаючим.

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

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

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

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

6. Особистий кабінет

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

Часто купуючи одне й те саме, користувачі повторюють замовлення через кабінет. Тому в процесі редизайну ми забезпечили юзера особистим простором з можливістю відстеження статусу замовлень, кількості бонусів, наявності нових промокодів, історії замовлень, будь-яке з яких можна повторити в один клік. 

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

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

Результат проєктування від mobile-first

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

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

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