Какие особенности 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 в десктопе
Новый дизайн главной страницы сайта Gemini в мобайле
  • Страница выдачи категории.

У нас уже был опыт работы с кофейными магазинами, поэтому команда была знакома с паттернами поведения пользователей. Эту экспертизу использовали в проекте Gemini, чтобы составить последовательность шагов, которые люди проходят в процессе выбора кофе.  

Согласно этой информации, на странице выдачи проработали и приоритизировали фильтры, чтобы пользователь мог быстро и легко найти нужный кофе или чай по определенным параметрам.

Страница выдачи интернет-магазина до редизайна
Страница выдачи после редизайна выглядит более привлекательной, а фильтры более наглядные и понятные. Дополнительные UX/UI элементы не только привлекают внимание, но и подчеркивают нишу
Страница выдачи в адаптиве
  • Карточка товара.

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

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

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

До редизайна на карточке товара было очень много текстовой неструктурированной информации
Вид карточки товара после редизайна сайта. Структурировали и разместили всю необходимую для принятия решения информацию о товаре
Вид карточки товара в мобильной версии сайта Gemini
  • Демонстрация выгоды для постоянных клиентов и партнеров.

Для того чтобы поощрить пользователей регистрироваться на сайте, реализовали следующие UX/UI решения:

  • При авторизации выдается информация о стоимости товара для партнеров;
  • Проработали все тексты и сообщения во время валидации;
  • Добавили инструменты для отслеживания заказа, быстрого повтора заказа, а для B2B клиентов проработали инструмент для удобного оформления большого заказа.
  • Удобный и понятный чекаут.

Сделали страницу оформления заказа максимально простой и понятной, с минимальным количеством полей.

Чекаут до редизайна сайта
Страница оформления розничного заказа после редизайна сайта
  • Дополнительные услуги.

Проработали страницы дополнительных услуг, например "Школа бариста", заказ и/или аренда оборудования. На этих страницах продемонстрировали все преимущества сотрудничества с компанией как для B2C, так и B2B клиентов.

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

На странице "Аренда оборудования" компании могут выбрать тип кофемашин согласно бюджету и требованиям бизнеса — от небольших киосков до крупных кофеен

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

  • Может рассмотреть кофейную машину и узнать о ее особенностях;
  • Может выбрать сорт или несколько сортов кофе и объемы кофе необходимые именно ему;
  • Узнать цену на аренду с учетом заказанного кофе;
  • Получить подробную информацию и пошаговую инструкцию о том, как работает услуга;
  • Имеет возможность просмотреть альтернативные предложения, если что-то не устраивает;
  • Узнает о партнерах и их впечатлениях от сотрудничества с компанией Gemini.
Страница оборудования с демонстрацией всех преимуществ для B2B сегмента в мобильной версии сайта

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

Задачей компания Турум-бурум было объединить все каналы взаимодействия с клиентами в одну удобную для пользователей платформу. Т.е. создать мультитул, который будет удовлетворять потребности различных аудиторий, таких как розничные и оптовые покупатели, дистрибьюторы и прочие.

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

  • Проектирование макета веб-сайта;
  • Создание кастомных иллюстраций в стиле компании;
  • Смещение фокуса на идентичность бренда благодаря различным UX/UI элементам;
  • Проработка функциональности для удовлетворения новых бизнес-задач.

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

Результатом редизайна стал адаптивный дизайн сайта и персонализированный интернет-магазин, который учитывает потребности пользователей и позволяет удобно управлять бизнес-процессами из одной точки. Кроме того, новый дизайн сайта оптимизирован для SEO задач, содержит четкие призывы к действию и отображает миссию бренда. Сейчас дизайн передан разработчикам и на этапе внедрения. К сожалению из-за военных действий в Украине сроки реализации сдвинулись, но представители компании Gemini одобрили идею уже сейчас раскрыть детали этого яркого кейса. Продолжение следует…

Поделиться постом в:

Также читайте

1
/
1

Больше кейсов от турум-бурум?

Ознакомьтесь с нашим портфолио из различных сфер бизнеса.

Смотреть портфолио

Оставьте заявку и наш UX−специалист свяжется с вами

Ваше сообщение было отправлено! Мы свяжемся с вами как можно скорее

Отправить ещё одну заявку
Doublecheck your form data please