Как мы обновили дизайн личного кабинета b2b сервиса PartScanner с помощью Mosaic Admin UI

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

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

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

Первая версия PartScanner была на теме Nifty Admin (bootstrap3) имела ряд значительных недостатков: дублирование функций, однотипный интерфейс и плохую адаптацию к различным устройствам. Для административного интерфейса она подходит отлично, но для клиентского UI не очень. Путем тщательного опроса пользователей, мы выявили наиболее актуальные проблемы сервиса.

Главная страница

Стартовый экран PartScanner изначально предлагал слишком много информации, включая:

• Баланс на счете

• Количество оплаченных дней

• Обновления позиций и товаров

Слева от экрана располагались четыре дополнительных элемента меню: «Ассортимент», «Проекты», «Поставщики», «Подключение». Эти разделы также вызывали определенные трудности у пользователей. Многие показатели вообще были не нужны такие как статистика баланса и количество оплаченных дней.

Раздел «Ассортимент»

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

• Устанавливать названия и срок актуальности

• Добавлять поставщиков

• Выбирать валюту и источники

• Загружать различные файлы

• Определять периодичность обновления данных

Редактор также позволял просматривать все товары в рамках одного проекта и применять к ним:

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

• Фильтры: помогали отфильтровать большой ассортимент по ключевому слову, например, сформировать каталог по слову «джинсы».

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

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

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

Блок «Проекты»

Этот раздел почти не использовался, так как пользователи не понимали его влияния на структуру товарного ассортимента. Например, проект для недвижимости имел несколько колонок для загрузки прайс-листов, что отличало его от проекта для одежды.

Блок «Поставщики»

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

Блок «Подключения»

Этот раздел представлял собой справочник по интеграции поставщиков через FTP, email и МойСклад, но пользователи практически им не пользовались. На практике, клиенты чаще создавали подключения через раздел «Ассортимент», где можно было выбирать те же источники и дополнительные варианты загрузки через веб-поставщика, форму и HTTP-ссылку.

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

Для нового интерфейса мы не стали разрабатывать его с нуля, а просмотрели варианты готовых Admin UI интерфейсов. Все они были более менее похоже, но Mosaic Admin UI нам запомнился больше всего так как был отлично адаптирован под мобильные, плюс он был написан на Tailwind.css и работал на js фраймворке Alpine.js что визуально работало намного быстрее из-за способа рендеринга интерфейса.

Далее, мы разделили всех пользователей на целевые группы по функционалу:

- парсинг сайтов,

- выгрузка на маркетплейсы,

- загрузка прайс-листов,

- изменение номенклатуры.

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

Например, конечное событие выгрузки товаров на маркетплейс это – "Товар выгружен", далее думаем что нужно чтобы произошло данное событие, это действие "Выгрузить товар" и информация для этого действия: товар, настройка соответствия выгрузки, какой товар в какой раздел выгружать и тд. Далее мы добавляем событие "Соответствия настроены", и думаем какое нужно событие чтобы это произошло, например "Учетные данные маркетплейса настроены" и т.д. В идеале все события приходят к начальной точке приложения Авторизация пользователя или его регистрация.

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

Итак, у нас сформировался список "Вариантов использования" для каждой группы пользователей с набором интерфейсов.

Далее подключили программистов для интеграции новой темы.

Главная страница

Редизайн личного кабинета предоставил пользователям более актуальную информацию об их действиях:

• График объема прайс-листов с указанием поставщиков, размера ассортимента и дат ключевых изменений.

• Диаграмму с количеством товарных позиций по каждому поставщику.

• Список просроченных прайс-листов.

• Данные о последних выгрузках (наименование ассортимента, количество позиций, дата операции и т.д.).

• Актуальные курсы валют для будущих конвертаций.

• Информацию по работе с сервисом, например, о порядке подключения веб-поставщика и выгрузке ассортимента на OZON.

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

Раздел «Прайс-листы»

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

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

На этом этапе необходимо выбрать валюту и источник данных. Как и прежде, сервис предлагает шесть вариантов: форма, email, FTP-сервер, HTTP-ссылка, МойСклад и веб-поставщик.

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

Разметка прайс-листа также претерпела значительные улучшения. Теперь колонки можно формировать по таким параметрам, как «Производитель», «Артикул товара», «Ссылка на товар», «Раздел каталога», «Цена» и другим характеристикам.

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

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

Среди приятных бонусов можно отметить всплывающие модальные окна и улучшенную мобильную версию сервиса.

Раздел «Группы»

Этот раздел позволяет более детально сгруппировать ассортимент проекта, являясь усовершенствованной версией старого раздела «Ассортимент».

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

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

Для более точной сегментации можно добавить дополнительный фильтр, например, «Адрес страницы содержит название города».

Каждый новый фильтр добавляется с условием «И», включая все предыдущие сортировки. Количество фильтров для одного проекта практически не ограничено.

Группу можно также модифицировать. Для этого выберите опцию «Добавить замену» и в поле замены укажите один из представленных параметров, например, «Цена продажи». Затем, в графе «Фильтрация» выберите «Наценка на процент» и укажите нужное число. После этого, в разделе каталога «Цена продажи» стоимость товара будет отображаться с установленной наценкой.

В новой версии сервиса также появились две ключевые функции:

• Перевод текста с иностранных языков

• Конвертация валюты

Все эти изменения автоматически отражаются в каждой созданной группе.

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

Выгрузка

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

Каждая отправка имеет свои уникальные настройки. Например, при выборе варианта «Отправка на сайт по API» нужно заполнить поля «CMS сайта», «Подключение» и «Раздел каталога».

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

Отчеты

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

• Анализ продаж: Отслеживание количества посещений страниц товаров, числа продаж и других показателей.

• Анализ изменения цен: Мониторинг роста и падения цен на товары, сравнение показателей и многое другое.

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

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

Обновленный личный кабинет PartScanner предлагает расширенные возможности для пользователей. Теперь здесь можно:

• Настроить логотип профиля.

• Внести данные об организации (юридический адрес, ИНН, расчетный счет и т.д.).

• Настроить порядок получения уведомлений сервиса.

• Менять тарифный план и уточнять стоимость использования сервиса за месяц или день.

• Просматривать виды предоставленных услуг и историю транзакций.

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

• Просматривать курсы валют.

• Обращаться в техническую поддержку.

• Изучать документацию и список обновлений PartScanner.

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

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

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

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