Проектирование интернет-магазина для b2b и b2c. Кейс Eglo

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

Немного о нас

Мы — ДзенДизайн. Разрабатываем и развиваем e-commerce проекты.

Проектировали интернет-магазины таким брендам как: ALBA, BoConcept, Williams et Oliver, Аудиомания и многим другим.

Для кого магазин?

EGLO — компания, производящая приборы декоративного интерьерного освещения, которая за всё время работы стала одним из главных игроков на международном рынке. Компания продает примерно 18 миллионов светильников в год более чем 132 странах.

Услышав фразу «популярный мебельный магазин» у многих людей во всем мире в голове возникает ассоциация с «IKEA». В Европе, когда речь заходит об освещении, аналогично вспоминается EGLO. Но в России EGLO не так известны, как в Европе. И к нам обратилось их российское представительство, чтобы исправить эту ситуацию.

Брифинг

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

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

Аудит

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

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

АрхитектураУ компании есть бумажные каталоги, которые консультанты показывают посетителям в оффлайне: «Современные светильники», «Винтажные светильники», «Stars of Light», «Professional Light». Исходя из этого разделения и строилась навигация на сайте.

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

Проанализировав ассортимент, текущий путь пользователя с использованием фильтров, сайты конкурентов, мы переработали архитектуру и предложили делить товары не по двум стилям, а по следующим параметрам.

«По типу светильника»

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

«По типу установки»

На этапе брифинга и аудита стало понятно, что не все пользователи понимают разницу между спотом и бра, торшером, светильником и лампой. Поэтому тип установки отлично решает эту проблему. «Не знаю как называется, но нужно на стену» :)

«По стилю»

Это для той части аудитории, которая знает, чем отличается Прованс от Винтажа и Арт-деко. Среди покупателей освещения их оказался немалый процент, особенно в b2b сегменте.

«По каталогу»

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

Мы спроектировали всего 16 разделов. Звучит довольно просто, согласитесь?

Но на деле это 113 прототипов. Каждый раздел прорабатывался с учетом того, что его будут использовать две аудитории: b2b и b2c. Отображались все состояния и нюансы. Их было действительно много. И всё это нужно было учесть на этапе проектирования, чтобы на последующих этапах не пришлось всё переделывать. Одна только страница оформления заказа состоит из 10 прототипов, так как есть разница: b2b или b2c, авторизован или нет, доставка или самовывоз и так далее. Ниже расскажем подробнее о ключевых разделах.

Каталог

Мы разработали 2 варианта каталога: для физических и юридических лиц. Каталог для физлиц классический для интернет-магазина.

Но версия каталога для юрлиц имеет дополнительные сущности: возможность скачать прайс-лист, который генерируется для каждого раздела, исходя из примененных пользователем фильтров, функция «Зарезервировать» в карточке. Резерв позволяет b2b аудитории собрать необходимое количество товаров в личном кабинете на определенное время, чтобы его не выкупили другие пользователи. Так как заказы у данного сегмента оптовые, эта функция помогает избежать ситуации, когда пользователь формирует свою корзину, а к моменту покупки часть товаров уже отсутствует, и ему приходится искать аналоги.

Карточка товара

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

Карточка товара также индивидуальна для физлиц и для юрлиц.

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

На этапе проектирования важно проработать состояния динамических блоков. В данном случае это блок с ценой и количеством:

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

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

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

Корзина

Для физических лиц всё сделано довольно просто:

Показано общее количество товара в наличии, возможность удалить или добавить в избранное.

Для b2b ситуация значительно отличается:

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

Также здесь отображается информация о количестве конкретной позиции в резерве и в корзине.

Учитывая оптовые поставки, для b2b пользователей доступна подробная информация о наличии товара на складе в Москве и в Венгрии. Это позволяет выбрать, к примеру, 10 штук из ближайшей поставки из Москвы и 15 из следующей поставки из Венгрии. При этом пользователь понимает, что поставка из Венгрии будет позже. Для этого мы спроектировали конфигуратор, в котором можно выбрать товары с конкретного склада или забрать энное количество товара из резерва.

Оформление заказа

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

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

Личный кабинет

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

Также в кабинете юрлица отдельно проработана функция резерва, которая резервирует выбранную группу товаров на определенный срок.

Ещё одна особенность личного кабинета юрлица — возможность генерировать прайс-лист по заданным параметрам.

Пользователь создаёт шаблон, по которому может в дальнейшем запрашивать нужный ему прайс-лист на конкретную дату.

После завершения этапа проектирования мы приступили к разработке адаптивного дизайна. Вот какие принципы мы преследовали:

– Не привязываться к визуальным решениям этапа проектирования и полностью переосмыслить визуал, сохранив логику интерфейса.

– Mobile first и высокий уровень проработки всех адаптивных версий, где каждая версия под свое устройство отдельно и тщательно прорабатывается, с учетом специфики каждого устройства.

– EGLO — австрийская компания с ярко-выраженным европейским подходом к дизайну и брендингу, поэтому дизайн интернет-магазина выполнен в стиле европейского минимализма.

– Дизайн интернет-магазина должен быть продолжением дизайна самой продукции.

– Усилить и развить удобство, продуманное на этапе проектирования через дизайн и микро-анимации.

Ознакомиться с результатами можно несколькими способами:

Видео-презентация дизайна проекта (смотреть лучше фуллскрин):

Посмотреть подачу проекта с описанием на сайте студии

Интернет-магазин EGLO в онлайне

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

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