Megahab

Megahab   

О клиенте: «Мегахаб» — проект, цель которого стать одним из ведущих дистрибьюторов ресторанных принадлежностей и оборудования. Компания доставляет расходные материалы для отелей, ресторанов и кафе (сегмент HoReCa). Обеспечивает всем необходимым для приготовления блюд, их подачи, доставки и хранения.

На момент обращения в студию сайт клиента был сделан на основе шаблона и выглядел так:

06b6fdbb4ae28f31793b44aeec86875a.png

«Мы будем агрегировать огромное количество клиентов, производителей и поставщиков, а также склады, пункты выдачи заказов и водителей с собственным грузовым транспортом по всей России».

«Мегахаб» строит бизнес, полагаясь на IT-решения и системный подход. Главным преимуществом считает низкую торговую наценку на товары. Сохранить конкурентную стоимость позволит тотальная автоматизация большинства бизнес-процессов: маршрутизации водителей, работы с поставщиками, распределительной логистики между хабами-складами.

  • 50 000 артикулов ассортимента
  • 15 регионов страны
  • 1 000 импортеров и поставщиков
  • 100 000 клиентов
  • 1 млн посетителей сайта в месяц

Особенности проекта: У «Мегахаба» нет офлайн-точек продаж, поэтому сайт выступит единственным источником заказов и стартом всех бизнес-процессов компании. Главная задача интерфейса — снизить нагрузку на кол-центр и перевести продажи в онлайн, исключив при этом телефонную коммуникацию. Важно сохранить принцип интернет-витрины, предоставить детальный контент о каждом товаре и обеспечить удобство использования сервиса с любого устройства. Стартуем Работа над проектом началась со страницы товара. Это связано с осторожностью заказчика, у которого в прошлом был негативный опыт с разработкой и масса нереализованных попыток сделать удобные интерфейсы.

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

8a7853d3bfe5c0bedb170c7332c677eb.png

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

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

395744ce5f7764e976a1385db3e5480e.png

Первый прототип страницы и итоговый вариант с ценовым модулем

Презентация прототипа прошла успешно, и мы начали работу над всем проектом. Нам предстояло проделать большую работу: исследовать рынок, более подробно изучить бизнес-процессы компании и конкурентную среду; создать информационную архитектуру сайта, прототипы и дизайн.

eb33f53e14aca0fd965e5b77e3f547d9.png

Собираем требования 

Нам очень повезло с клиентом. Он с самого начала понимал важность двусторонней работы над проектом и показал нам собственное видение через наброски структуры страниц. Там же он отметил ключевые проблемы, которые требовали решения.a8aaca3832e6f2cb81cd2ab5159c6247.jpg

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

3a9931f28f686b1bef4f7192d266616e.jpg

Проектируем 

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

Мы выделили основные сценарии взаимодействия пользователя с ресурсом, прописали каждый из них и начали проектировать главную страницу. Ее задача — маршрутизация трафика. Мы спроектировали три вида навигации, разместили в простом горизонтальном меню девять основных разделов каталога. Умышленно отказались от меню-бургера, чтобы сэкономить один клик пользователю.3ee2425faab142ccaa5694678d948364.pngДополнительно сделали раскрывающееся мегаменю со списком всех категорий товара. Им удобно пользоваться с любой внутренней страницы сайта.

Помимо основной навигации на главной странице расположен удобный рубрикатор для быстрого доступа к конкретным подкатегориям.d24cb8db48f5904b933b303be2479038.png8ded8ad5d73b99b8d8d03e494cfd5957.jpg

Итоговый прототип главной страницы

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

476d0fca57047ef66ee0b13df6d8316c.jpg

Одним из инструментов для увеличения среднего чека стал модуль «Связанные категории» на странице товара, который перемещается по мере прокрутки страницы и всегда под рукой, — это помогает не забыть о недостающих принадлежностях. Еще одно решение — «Товарные комплекты»: экономит деньги клиента и избавляет от необходимости искать все товары по отдельности. Также мы добавили блок с бонусами за покупку от трех товаров как часть программы лояльности.

17a85f21b11f11e7a57b414afd96bc6b.jpg

1476a487b298838daf07c3785db07d8b.jpg

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

Тут пришлось перепробовать массу вариантов.

5f54e701354d40e90d885bd136eea22a.jpg

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

Клиент настаивал, что все элементы важны и должны присутствовать в мини-карточке товара, поэтому мы не могли их сократить. При этом удалось организовать информацию вполне логично:

Прототипы внутренних страниц: 24274ce7b0e5f8096a341c2a457b01a1.jpg

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

Оплачивая заказ, пользователь сможет увидеть, когда привезут товар, даже если его еще нет на складе. Он может запланировать две доставки: быструю (товары в наличии) и отложенную (до момента пополнения товара на складе).

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

beb6794b82433959a59ff443d9e9b38f.jpg

Дизайним 

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

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

0e514ed5dabf65b03dfa1666bb3d60c2.jpg

Учитывая сжатые сроки на реализацию дизайна, над макетами внутренних страниц и адаптациями работали три дизайнера одновременно под руководством арт-директора Константина Ершова.

795fad7fc897897c5ea54b64a5caf79a.jpg

Итоги:

— 11 прототипов основных страниц;  

— 24 макета для desktop-версии;  

— 46 макета для mobile-версии;  

— больше 450 часов работы.

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

Все это поможет разгрузить кол-центр и сократить расходы на его содержание.

После запуска сайта планируем заняться развитием проекта: веб-аналитикой, генерацией и проверкой гипотез, а/б-тестированием и дизайн-поддержкой. Таким образом, шаг за шагом эффективность сайта будет постоянно расти.

Хотим поблагодарить «Мегахаб» за возможность реализовать интересный проект и активное участие в процессе.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine