Как объединить сайты онлайн-магазина в один и упростить интерфейс

Исходные данные

Компания «ТБМ» — крупный оптовый продавец комплектующих для окон, дверей и мебели.

Задача — объединить два сайта для опта и розницы в один, сделать его адаптивным, упростить интерфейсы и сделать их понятными для целевой аудитории.

Исследование

Мы провели интервью с пользователями и бизнесом и выявили проблемы покупателей. Самые интересные кейсы были у оптовиков: они оформляли заказы для разных клиентов и одновременно работали с несколькими корзинами заказов.

В статье подробно рассказываем, с какими проблемами сталкивались разные группы пользователей и как мы их решили.

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

Пользовательские сценарии

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

1. Менеджер по закупкам

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

2. Производитель корпусной мебели

У Владимира есть своё ИП и штат сотрудников. Владимир производит корпусную и кухонную мебель, которую продаёт розничным клиентам онлайн и в магазины. Есть своя линейка товаров, которая продаётся через сайт. Периодически вводятся и выводятся разные модели в зависимости от спроса.

3. Частный мастер по ремонту

Алексей — мастер по ремонту окон, обычно ремонтирует окна у частных клиентов, также подрабатывает установщиком в фирме и выполняет мелкие заказы типа починки дверей и установки межкомнатные замков. Для частных заказов сам занимается закупкой материалов.

4. Частный клиент

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

Сбор заказа

Было

Для оформления заказа пользователь клал товар в корзину и потом перекладывал в заявку. Он открывал две вкладки в браузере, в одной находил нужный товар и копировал артикул, а в другой — добавлял артикул в заявку. Всё делалось вручную. Напрямую добавить товар в заявку было нельзя.

Старая версия сайта

Стало

Товар добавляется сразу в заявку. Предусмотрели возможность выбора конкретной заявки из справочника. Чтобы не путаться в заявках и не просматривать состав каждой из них, предложили давать заявкам осмысленное название, например, «Завод Шпунтик_ноябрь_2019».

На карточке заявки понятно, в какую заявку кладётся товар, выбор можно изменить.

Фрагмент экрана с интерфейсами добавления товара в заявку с карточки товара.

Нереализованная идея

Для оптовиков хотели обойтись вообще без корзины: сразу добавлять товары в заявки. Решили оставить, потому что у розничных клиентов заявки единичные. Розничным клиентам не нужно больше одной корзины — чтобы их не путать, оставили стандартную корзину. Так проще «пробрасывать» клиентов из неавторизованной зоны в авторизованную с сохранением корзины и оформлением заказа через неё.

Когда товара нет в наличии

Было

У каждого товара отображалось наличие на складе. После оформления заказа всё могло измениться, — некоторые товары всё-таки отсутствовали или были в дефиците. Приходилось ждать дольше чем планировалось. Заказов «с дефицитом» было 10%.

Заказ условно делился на две части: на товары «в наличии» выставляли счёт, остальные выводились в отдельной вкладке «Дефицит».

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

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

Старая версия сайта

Сначала надо понять, что такое «Дефицит».

Старая версия сайта

Затем надо подтвердить, что вот эти позиции действительно надо купить.

Стало

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

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

«Фишка» решения в том, что нам удалось договориться с клиентом, а клиенту — со своими внутренними подразделениями. Мы убедили клиента в правильности такого решения и обошли исторически сложившиеся трудности раздела «Дефицит».

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

Личный кабинет оптовых покупателей

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

Старая версия сайта

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

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

Было: Изменение цен → Подгрузка файлов в Excel.
Стало: Расширенные возможности → Настройка загрузки из Excel.

Было: Почтовые уведомления → Отправка счетов в электронном виде.
Стало: Расширенные возможности → Автоматическая обработка счетов и накладных.

Было: Почтовые уведомления → Обработка заявок с почты.
Стало: Расширенные возможности → Отправка заявок по email.

Некоторые разделы вынесли: «Список купленных товаров» — в основное меню, переписку с менеджером — в шапку. Сообщения вынесли из раздела, «Настройки калькуляторов» перенесли в «Калькуляторы», раздел «Изменение цен» дублировал одну из возможностей раздела «Прайс-листы» — его убрали совсем.

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

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

Мы разнесли все связанные настройки в соответствующие разделы сайта: настройки калькуляторов — в калькуляторы, выгрузку прайс-листа — в каталог, настройку автоматической загрузки счетов — в раздел «Счета» 1С и так далее.

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

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

Было

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

Стало

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

Промышленные калькуляторы

Для оптовых клиентов «ТБМ» разработали пять калькуляторов: створки, ящики, дверная фурнитура, лакокрасочные материалы, мебельные фасады.

Было

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

Старая версия сайта

Стало

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

Розница

Проблема

Люди не понимают, что они покупают, как установить комплектующие и что для этого нужно.

Решение

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

Фрагмент экрана с рекомендациями по монтажу и сопутствующим комплектующим

Итог работы

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

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

Что на данный момент.

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

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

• У всех пользователей теперь единый вход на сайт.

• Разработали адаптивную версию.

• Упростили калькуляторы и сделали более быстрым набор большого количества товаров. Калькуляторы стали доступны также в каталоге в неавторизованной зоне.

• Разобрали невостребованную далеко спрятанную функциональность и вынесли в более понятные места полезные для бизнеса и пользователя функции.

• Упростили интерфейс заявки, положив все товары в один список.

• Добавили ряд подсказок для розничных клиентов, не разбирающихся в ассортименте.

Однако все гипотезы мы сможем проверить только после запуска сплит-тестирования и сравнения статистики.

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.