Редизайн сайта 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 одобрили идею уже сейчас раскрыть детали этого яркого кейса. Продолжение следует…