Колонка
Спростити, щоб продати: редизайн нішевого додатка для транспортування грудного молока
7 грудня, 2021
Анастасія Солонинка
Product Designer в Excited
Стати автором

Коли продукт починає розширювати свій сервіс, часто виникає плутанина. Особливо це стосується нішових продуктів з конкретною цільовою аудиторією. Через нагромадження всього й одразу  користувачі не розуміють, як їм орієнтуватися, і кидають взаємодію з продуктом, не дійшовши до ключового етапу — чекауту. Грамотний редизайн усуває застарілу рубрикацію, фільтрування, уніфікує UI-кіт та навіть створює ілюстрованих героїв, що допомагають користувачеві отримати те, що він хоче. Анастасія Солонинка, дизайнерка агенції Excited, розповіла про кейс редизайну продукту для транспортування грудного молока, який працює з Америки по всьому світові.

Матеріал створено у партнерстві з Excited

Про продукт Milk Stork

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


Продукт існує з 2015 року, його ідея належить Кейт Торгерсен. Одного разу стоячи в аеропорту з повною сумкою грудного молока в ручній поклажі, вона вирішила, що для матерів, які працюють і мають подорожувати, повинне бути краще рішення. 2019 року Fast Company відзначили  Milk Stork однією з найінновативніших компаній у категорії подорожей. На момент коли компанія звернулася до Excited, її клієнтами вже були Pinterest, SpaceX, PayPal, SalesForce та багато інших. Також Milk Stork стали партнерами Олімпійської збірної США на Олімпійських іграх у Токіо та допомагали матерям, котрі не змогли взяти дітей з собою, з доставкою грудного молока назад у США.


Проблема

Спочатку Milk Stork мав лише один тип сервісу — контейнери та спеціальні охолоджувальні сумки для перевезення грудного молока з собою у довгих подорожах. Але з часом окрім сумок для перевезення додалась можливість відправляти грудне молоко дітям, також з’явилась міжнародна доставка.

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

Фото сторінки продуктів  ДО редизайну

Ускладнювалось все тим, що 1) сайт не був добре оптимізований під мобільні пристрої, 2) а всі продукти дуже схожі між собою на вигляд:

Мобільна версія ДО редизайну

Завдання

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

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

  • матері, що часто подорожують
  • батьки, котрі переїжджають жити на нове місце
  • батьки у довгій поїздці
  • сурогатні матері.

Стратегія

Коли Milk Stork тільки починався, в ньому був лише один тип продукту та один тип користувачів. І все базувалося на концепті покрокового візарду. Ми ж від цього відійшли: почали відштовхуватись від основних відмінностей між різними продуктами. Тобто втілили більш класичний e-commerce підхід. Основною стратегією для роботи над редизайном було:

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

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

Перше, на що ми звернули увагу, це відсутність на сайті чітких call to action та зрозумілого фільтрування продуктів. Наприклад, на всіх сторінках продуктів була доступна лише дія «закрити», до якої ще й потрібно було доскролити. Була відсутня кнопка «купити» чи «додати до кошика». Покупку можна було зробити лише зі сторінки списку продуктів натиснувши на кнопку «Next».

Здійснення покупки ДО редизайну: потрібно вибрати кількість та натиснути «NEXT»Кошик з доданими товарами ПІСЛЯ редизайну

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

Фото різних продуктів Milk Stork  ДО редизайну

Рішення:

  • Ми виділили основні відмінності між продуктами:
    1) кулери для самостійного транспортування та ті, що відправляються доставкою по США, або світом;
    2) скільки часу молоко може зберігатись в кулерах (охолоджене: до 72 годин, заморожене — до 96 годин)
  • Уніфікували наявні UI елементи: кнопки, які також розділили на головні та другорядні, інпути та лейбли, повідомлення про успішно виконану дію чи помилку,  та зробили чіткіші та зрозуміліші call to action дії.

Аналіз даних Google Analytics

Для нас стало відкриттям, що понад 60% відвідувань сайту були з мобільних девайсів, але при цьому, відсоток сесій, які закінчились покупкою, був менший ніж на десктопі (2,4%  на мобільних пристроях порівно з 7,11% успішних сесій на десктопах).

Ще один інсайт: Bounce rate (у вебаналітиці позначає процентне співвідношення кількості відвідувачів, що покинули сайт прямо зі сторінки входу або переглянули не більше однієї сторінки сайту) на мобільних девайсах був значно вищий на сторінці списку продуктів та сторінці деталей продукту, ніж на головній.

Тому редизайн мобільної версії став для нас пріоритетним завданням.

Мобільна версія ДО та ПІСЛЯ

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

Як рішення, ми помістили home address та delivery address на одну сторінку, додали більше контексту у вигляді пояснень над інпутами та перейменували лейбли у Delivery address  та End shipping address.

Кроки чекауту ДО редизайну

Кроки чекауту ПІСЛЯ редизайну

Фільтрування

До редизайну фільтрування як такого на сайті не було. Його роль виконували дві таби «охолоджене» та «заморожене».

Фільтрування продуктів ДО редизайну

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

Список товарів з фільтруванням ПІСЛЯ редизайну

Опитувальник для нових користувачів

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

Екрани опитувальника для нових користувачів, створені в Excited

Диференціація продуктів

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

Деталі продукту «до» Деталі продукту «після»

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

Рішення: виокремили два критерії (охолоджене та заморожене молоко) й позначили їх різними кольорами, додатково позначили символами (холодильник для охолодженого молока, сніжинка — для замороженого).

Також додали до продуктів теги. Наприклад, Perfect for for flight or road trip, FedEx Priority Overnight label, щоб полегшити орієнтування та навігацію між продуктами.

Картки продуктів ПІСЛЯ редизайну

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

Приклади карток продуктів з ілюстрованим персонажем

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

 


Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.

avatar
Анастасія Солонинка
Product Designer в Excited
Колонка

У нас є ще дещо для вас