- Заказчик
- Megahab — дистрибьютор ресторанных принадлежностей и оборудования.
- Задача
- Разработка нового интерфейса для единого оператора всех товаров для сегмента HoReCa по РФ.
Megahab
О клиенте: «Мегахаб» — проект, цель которого стать одним из ведущих дистрибьюторов ресторанных принадлежностей и оборудования. Компания доставляет расходные материалы для отелей, ресторанов и кафе (сегмент HoReCa). Обеспечивает всем необходимым для приготовления блюд, их подачи, доставки и хранения.
На момент обращения в студию сайт клиента был сделан на основе шаблона и выглядел так:
«Мы будем агрегировать огромное количество клиентов, производителей и поставщиков, а также склады, пункты выдачи заказов и водителей с собственным грузовым транспортом по всей России».
«Мегахаб» строит бизнес, полагаясь на IT-решения и системный подход. Главным преимуществом считает низкую торговую наценку на товары. Сохранить конкурентную стоимость позволит тотальная автоматизация большинства бизнес-процессов: маршрутизации водителей, работы с поставщиками, распределительной логистики между хабами-складами.
- 50 000 артикулов ассортимента
- 15 регионов страны
- 1 000 импортеров и поставщиков
- 100 000 клиентов
- 1 млн посетителей сайта в месяц
Особенности проекта: У «Мегахаба» нет офлайн-точек продаж, поэтому сайт выступит единственным источником заказов и стартом всех бизнес-процессов компании. Главная задача интерфейса — снизить нагрузку на кол-центр и перевести продажи в онлайн, исключив при этом телефонную коммуникацию. Важно сохранить принцип интернет-витрины, предоставить детальный контент о каждом товаре и обеспечить удобство использования сервиса с любого устройства. Стартуем Работа над проектом началась со страницы товара. Это связано с осторожностью заказчика, у которого в прошлом был негативный опыт с разработкой и масса нереализованных попыток сделать удобные интерфейсы.
Карточка товара состоит из множества элементов, характеристик и других деталей. Она должна быть информативной и учитывать обширный набор маркетинговых инструментов. Соответственно, ключевая задача — не перегрузить страницу.
В процессе проектирования и более глубокого погружения в бизнес клиента появился ряд важных деталей, требующих решения. Например, многие товары на сайте продаются поштучно, упаковками или коробками с разными ценами. Требовалось найти решение, которое позволит использовать единую структуру страницы для разных видов товаров.
Мы спроектировали удобный модуль выбора фасовки, который позволяет наглядно увидеть разницу в упаковке товара и изменение стоимости. Универсальное решение также подходит для продажи товара поштучно — в этом случае заказ коробки просто не активен.
Первый прототип страницы и итоговый вариант с ценовым модулем
Презентация прототипа прошла успешно, и мы начали работу над всем проектом. Нам предстояло проделать большую работу: исследовать рынок, более подробно изучить бизнес-процессы компании и конкурентную среду; создать информационную архитектуру сайта, прототипы и дизайн.
Собираем требования
Нам очень повезло с клиентом. Он с самого начала понимал важность двусторонней работы над проектом и показал нам собственное видение через наброски структуры страниц. Там же он отметил ключевые проблемы, которые требовали решения.
В процессе конкурентного анализа мы быстро поняли, что всех игроков рынка отличала сложнейшая навигация. Казалось, что на сайтах с огромным количеством категорий, подкатегорий и ассортимента почти невозможно ничего упростить. Казалось кому угодно, но только не нам :)
Проектируем
Целевая аудитория — предприниматели, администраторы, управляющие бизнеса. Их интересует в первую очередь быстрый поиск и покупка товаров, сравнение цен и мониторинг спецпредложений.
Мы выделили основные сценарии взаимодействия пользователя с ресурсом, прописали каждый из них и начали проектировать главную страницу. Ее задача — маршрутизация трафика. Мы спроектировали три вида навигации, разместили в простом горизонтальном меню девять основных разделов каталога. Умышленно отказались от меню-бургера, чтобы сэкономить один клик пользователю.
Дополнительно сделали раскрывающееся мегаменю со списком всех категорий товара. Им удобно пользоваться с любой внутренней страницы сайта.
Помимо основной навигации на главной странице расположен удобный рубрикатор для быстрого доступа к конкретным подкатегориям.
Итоговый прототип главной страницы
Так как основная задача — минимизировать участие сотрудников кол-центра в процессе продаж, мы спроектировали многофункциональный фильтр подбора товаров и добавили обширный блок вопросов-ответов (предварительно собрав информацию с сотрудников клиента). Кроме того, сделали подборку самой запрашиваемой информации по товарам и компании и разместили ее в сценариях, где она может понадобиться. Например, актуальные статьи из блога, отзывы по товарам, сертификаты соответствия и вся необходимая документация.
Одним из инструментов для увеличения среднего чека стал модуль «Связанные категории» на странице товара, который перемещается по мере прокрутки страницы и всегда под рукой, — это помогает не забыть о недостающих принадлежностях. Еще одно решение — «Товарные комплекты»: экономит деньги клиента и избавляет от необходимости искать все товары по отдельности. Также мы добавили блок с бонусами за покупку от трех товаров как часть программы лояльности.
Самые жаркие споры вызвало обсуждение организации вывода информации о товаре. Довольно сложно показать на карточке три цены без нагромождения.
Тут пришлось перепробовать массу вариантов.
Показ цены на ховере не позволял быстро сравнивать цены. Вариант с персонализацией физических и юридических лиц тоже не подошел, так как важно единообразие интерфейса и прозрачность ценообразования.
Клиент настаивал, что все элементы важны и должны присутствовать в мини-карточке товара, поэтому мы не могли их сократить. При этом удалось организовать информацию вполне логично:
Прототипы внутренних страниц:
Сложности возникли со страницей «Корзина». В отличие от других интернет-магазинов, где доставку согласовывает оператор после оформления заказа, «Мегахаб» планирует сразу предоставлять точную информацию о сроках поставки товара на склад и дате отгрузки клиенту благодаря точной логистике и налаженной работе с поставщиками.
Оплачивая заказ, пользователь сможет увидеть, когда привезут товар, даже если его еще нет на складе. Он может запланировать две доставки: быструю (товары в наличии) и отложенную (до момента пополнения товара на складе).
Поэтому мы решили разграничить интерфейс корзины по статусу доставки. Первая часть — в наличии и доступна сейчас, вторая — товары под заказ, будут доставлены позже. Для того чтобы пользователь понимал, по какому принципу его заказ разделили, он сначала видит общий список товаров и понимает, с чем связана разная дата доставки. Пользователь делит заказ, если часть товара нужна ему раньше, либо дожидается доставки товара целиком.
Дизайним
Логотипом компании является яркий и лаконичный шестиугольник, состоящий из множества маленьких стрелочек, символизирующих разные направления работы. Он объединяет разные структуры в единую цепочку доставки, а отсутствие лишних деталей ассоциируется с прагматичным подходом к бизнесу.
Фирменный стиль отразился в дизайне интерфейса. Страницы товаров мы сделали минималистичными и воздушными, чтобы акцентировать внимание на самом товаре, а линии и стрелки использовали как фирменный паттерн, в разных проявлениях пронизывающий весь дизайн интерфейса.
Учитывая сжатые сроки на реализацию дизайна, над макетами внутренних страниц и адаптациями работали три дизайнера одновременно под руководством арт-директора Константина Ершова.
Итоги:
- 11 прототипов основных страниц;
- 24 макета для desktop-версии;
- 46 макета для mobile-версии;
- больше 450 часов работы.
Нам удалось упаковать огромное количество бизнес-процессов, тотальную автоматизацию и логистику в простой интерфейс, тем самым облегчая жизнь пользователю. Мы собрали все частые вопросы и дали ответы на них в интерфейсе, структурировали и распределили по разным частям сайта огромные массивы данных.
Все это поможет разгрузить кол-центр и сократить расходы на его содержание.
После запуска сайта планируем заняться развитием проекта: веб-аналитикой, генерацией и проверкой гипотез, а/б-тестированием и дизайн-поддержкой. Таким образом, шаг за шагом эффективность сайта будет постоянно расти.
Хотим поблагодарить «Мегахаб» за возможность реализовать интересный проект и активное участие в процессе.