Green Chef: створення сервісного дизайну за RSR підходом

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

Цілі проєкту: ні бутіковості, ЦА прагне зручності та користі

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

Яна Стрєльцова, власниця бренду Green Chef., звернулась до UX/UI та CRO-агенції Турум-бурум для оцінки стану інтерфейсу інтернет-магазина та його оптимізації. Адже поточний сайт не вирішував задачі бізнесу, до того ж платформа не давала змоги масштабуватися та розвиватися так, як планувала замовниця. ‍

Задача: Розробити ефективний інструмент для продажів з потенціалом масштабування, який дозволить зробити великий boost та вийти на новий рівень розвитку бізнесу.

‍Вхідні вимоги: Сайт має бути простим, цікавим та доступним, як розмова з хорошим та близьким другом. 

UX аудит: сайт потребує кардинальних змін

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

Тож було вирішено здійснювати редизайн сайту за RSR (Revolutionary Site Redesign) підходом. Він полягає в масштабному оновлені стилістики сайту, перегляді його функціоналу та покращенні юзабіліті, тобто — повному редизайні інтернет-магазину.

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

Ітерації та пошук потрібного вайбу дизайну сайту 

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

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

• Складно підтримувати обрану стилістику сайту.

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

• Перевантаження деталями.

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

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

Від концепції до реалізації: створення UI/UX дизайну ключових сторінок сайту

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

Головна сторінка: UI & UX дизайн з візуально виділеними та структурованими блоками інформації

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

1. Фокус на цінностях та перевагах бренду

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

На другому екрані розмістили блок з інформацією про раціони, оскільки це основний напрямок бізнесу. У цьому блоці для кожного типу раціону додали яскраві фотографії ключових страв та структурували найважливішу інформацію про самі програми: ціна на день, калорійність на день, приклад меню та call-to-action, щоб провести користувача далі по воронці — до сторінок раціонів.

2. Гейміфікація та турбота про користувача

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

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

3. Акцент на особистому бренді

Яна Стрєльцова, власниця Green Chef, — інфлюенсер з 28 тис. підписників, є амбасадором здорового харчування. Живучи за принципами, які транслює її бізнес, Яна формує довірливе ставлення поціновувачів правильного харчування до свого бренду. Тому ми додали на сайт блоки з її фотографіями, які підкреслюють особистий бренд, ще раз інформують про переваги компанії та зміцнюють лояльність та довіру клієнтів. За статистикою 78% споживачів стверджують, що більш охоче купують продукцію компаній, яких вони знають і яким довіряють.

4. Блок Instagram

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

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

Категорії меню: дбаємо про зручну навігацію сайтом

Результати аналітики показали, що на сайт заходило близько 85% нових користувачів, а середня тривалість сесії складала 1,5 хвилини. Однак при цьому користувачі майже не конвертувались. Отже, щось заважало відвідувачам рухатися далі по воронці. І саме UX аудит допоміг нам виявити ці слабкі місця на сайті та перетворити їх у зони росту.

1. Уникнення двозначностей та зручна навігація

У минулій версії сайту частина навігації була прихована, через що користувач міг не побачити інші товари або це потребувало зайвих кроків. Також розділ меню «Магазин» збивав відвідувачів з пантелику, адже вони могли подумати, що це адреси магазинів і не звернути уваги на цей пункт навігації. 

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

2. Закріплення блоку меню на сайті

Під час аудиту ми з’ясували, що шапка сайту не фіксована – це особливо критично для mobile версії. Через це користувачі, а передусім нові, не мали змоги швидко перейти до іншої категорії або кошику, що негативно впливало на глибину перегляду сайту та конверсію бізнесу. 

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

Сторінка товару: забезпечуємо якісну презентацію товарів

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

Для розв'язання цієї проблеми збільшили розмір зображень товарів до понад 50% від площі сторінки та замінили іконку «+» на більш інтуїтивно зрозумілий елемент — лупу. Це сприятиме покращенню сприйняття товарів та збільшенню кількості додавань товарів у кошик.

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

‍

Для підвищення конверсії та покращення користувацького досвіду були також інтегровані upsell та cross-sale блоки, як «Схожі товари», «Хіти продажів» та блок з персоналізацією — «Історія перегляду».

‍

Сторінка раціону: допомагаємо користувачам прийняти рішення про покупку

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

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

Чекаут: скорочення і спрощення шляху користувача

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

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

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

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

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

Програма лояльності: демонструємо переваги для ефективного утримання клієнтів

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

Сторінка блогу: створюємо додаткову цінність для клієнтів

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

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

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

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

Результати створення сервісного дизайну для Green Chef.

Завдяки комплексному підходу команди та тісній співпраці з замовницею нам вдалося розробити красивий клієнтоорієнтований дизайн, який:

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

Після запуску нового сайту Яна Стрєльцова, власниця Green Chef, сказала наступне:

«Коли ми познайомились із командою, я зрозуміла, що це 100% професіонали. Ми, звісно, сперечалися у процесі, але саме це і народжувало істину. 

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

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

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

В результаті порівняння даних аналітики за 2 тижні до та відповідно після запуску сайту: 

• мікроконверсія переходу з видачі товарів на сторінку товару для продуктів зросла на 23%, а для раціонів - на 19%;
• залученість користувачів на головній сторінці зросла на 49,65%
• середня тривалість сеансу по сайту зросла на 13,17%.

P.S. Більш довготривалі результати додамо згодом (coming soon…)

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

Кейс Green Chef є найкращим доказом того, що UX/UI дизайн – це більше, ніж просто зовнішній вигляд. Адже насправді якісний дизайн вирішує ряд задач, зокрема враховує реальний користувацький досвід, сприяє побудові довірливих стосунків з клієнтом, розв'язує задачі бізнесу та оптимізує конверсію. Усе це ми врахували під час роботи над створенням сайту для Green Chef.

‍