Редизайн сайту Gemini: як UX/UI дизайн перетворив сайт на потужний інструмент

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

Проект Gemini: особливості та задачі

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

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

Тому, основними завданнями Турум-бурум були:

• Зацікавити та залучити B2C клієнтів за допомогою UX/UI дизайну;
• Поліпшити користувацький досвід для усіх типів користувачів;
• Оптимізувати та спростити процес купівлі та оформлення повторного замовлення як для B2C, так і B2B клієнтів;
• Розробити новий дизайн для сайту, щоб покращити показники збереження та залучення клієнтів як у сегменті B2B, так і B2C;
• Підвищити впізнаваність бренду та сформувати ідентичність бренду;
• Оптимізувати онлайн-конверсію за допомогою UX/UI дизайну сайту.

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

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

Етапи створення нового дизайну для сайту Gemini

Створення нового дизайну для сайту Gemini складалося з декількох етапів:

1. Провели інтерв'ю з власниками для заглиблення у нішу та розуміння особливостей бізнесу;
2. Зібрали всі вимоги та побажання клієнта щодо майбутнього сайту;
3. Вивчили продукт, ринок, конкурентів і цільову аудиторію;
4. Провели дослідження та UX аудит, щоб виявити особливості взаємодії B2C і B2B клієнтів з інтерфейсом, для зрозуміння, які завдання перед ними стоять, і відмінності в поведінці та цілях клієнтів різних сегментів;
5. На основі отриманих даних аналітики розробили нову структуру сайту та створили макет з урахуванням усіх процесів — UX/UI дизайн мав забезпечити юзабіліті для усіх користувачів, включаючи менеджерів Gemini та покупців усіх типів, які будуть використовувати адмінку як персональний кабінет.

Редизайн сайту Gemini: ефективні UX/UI рішення або що було зроблено

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

Для досягнення поставлених цілей, було зроблено:

• Головна сторінка.

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

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

• Сторінка видачі категорії.

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

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

• Сторінка товару.

Нова сторінка товару має стандартну структуру, яка довела свою ефективність серед користувачів. Основна інформація про товар розподілена за такими ключовими моментами:

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

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

• Демонстрація вигоди для постійних клієнтів та партнерів.

Для того, щоб заохотити користувачів реєструватися на сайті, були запровадженні наступні UX/UI рішення:

• При авторизації видається інформація про вартість товару для партнерів;
• Опрацювали всі тексти та повідомлення під час валідації;
• Додали інструменти для відстеження замовлення, швидкого повтору замовлення, а для B2B клієнтів пропрацювали інструмент для зручного оформлення великого замовлення.

• Зручний та зрозумілий чекаут.

Зробили сторінку оформлення замовлення максимально простою, з мінімальною кількістю полів.

• Додаткові послуги.

Опрацювали сторінки додаткових послуг, як-от «Школа бариста», замовлення та/або оренда обладнання. На цих сторінках продемонстрували всі переваги співпраці з компанією як для B2C, так і B2B клієнтів.

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

Перейшовши на сторінку обраного обладнання, клієнт:

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

Результати редизайну сайту Gemini

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

У ході роботи над проектом Gemini ми розробили нові UX/UI дизайн рішення, включаючи:

• Проектування макета вебсайту;
• Створення спеціальної графіки в стилі компанії;
• Впровадження ідентичності бренду завдяки різним UX/UI елементам;
• Розробка функціональності для задоволення нових бізнес-потреб та цілей.

UX/UI дизайн мав забезпечити зручність користування сайтом для усіх користувачів, включаючи менеджерів Gemini та покупців усіх типів, які будуть використовувати адмінку як персональний кабінет.

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