ЗарегистрироватьсяВойти
Авторизация

Забыли пароль?

Вспомнить пароль

Вернуться к авторизации

Регистрация представителя компании

Email должен относиться к одному из официальных доменов компании. Если это по тем или иным причинам невозможно - напишите нам.
На указанный Вами Email будет отправлено письмо с одноразовой ссылкой для входа в личный кабинет

Регистрация

Возможно, ваша студия/агентство уже есть в нашей базе. Чтобы не плодить дублей – введите в форме ваш домен или официальный email, и если мы найдем совпадение – форма волшебным образом сделает все за вас.

Email должен относиться к одному из официальных доменов компании. Если это по тем или иным причинам невозможно - напишите нам.
На указанный Вами Email будет отправлено письмо с одноразовой ссылкой для входа в личный кабинет

Digital-кейс дня

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

Агентство-исполнитель кейса

Everest

Everest — это мощная UX-экспертиза. Большие e-commerce проекты, сложные веб-сервисы, дашборды и личные кабинеты — то, что мы любим больше всего. Анализируем, проводим ux-исследования и тестирования, строим сценарии поведения, проектируем и дизайним интерфейсы.

1. Вводная задача от заказчика, проблематика, цели

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

На момент обращения в студию сайт клиента был сделан на основе шаблона (рис.1)

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

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

50 000 артикулов ассортимента

15 регионов страны

1 000 импортеров и поставщиков

100 000 клиентов

1 млн посетителей сайта в месяц

Особенности проекта:

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

Главная задача интерфейса — снизить нагрузку на кол-центр и перевести продажи в онлайн, исключив при этом телефонную коммуникацию.

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

Рисунок 1

Рисунок 2.

Рисунок 3

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Стартуем

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

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

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

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

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

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

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

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

Проектируем

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

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

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

Помимо основной навигации на главной странице расположен удобный рубрикатор для быстрого доступа к конкретным подкатегориям. (рис.8,9)

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

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

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

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

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

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

Прототипы внутренних страниц( рис.13)

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

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

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

Дизайним

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

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

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

Рисунок 4, 5, 6.

Рисунок 7, 8.

Рисунок 9

3. Результаты сотрудничества

Итоги

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

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

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

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

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

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

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

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

Рисунок 11, 12, 13.

Рисунок 14, 15

Рисунок 16,17

4. Заключение

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

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

Агентство-исполнитель кейса

Everest

Everest — это мощная UX-экспертиза. Большие e-commerce проекты, сложные веб-сервисы, дашборды и личные кабинеты — то, что мы любим больше всего. Анализируем, проводим ux-исследования и тестирования, строим сценарии поведения, проектируем и дизайним интерфейсы.