Редизайн портала поставщиков «Глобус» и обновление функций и Backend раздела «прайс-листы»

Новый проект — доработка внутреннего портала для поставщиков «Глобус».

Задача

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

Работа с прайсингом — большой алгоритм, по которому формируются и согласуются прайс-листы. «Глобус» обозначили три основные задачи:

• Расширить возможности раздела «Прайс-листы».
• Обновить Backend раздела «Прайс-листы».
• Обновить дизайн всей системы в соответствии с основной стилистикой компании.

Обновления раздела «Прайс-листы»

Выбор позиций для нового прайс-листа

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

• доступные позиции
• позиции в прайс-листе

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

Индикация позиций

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

Индикация потенциально сокращает количество правок от отдела закупок.

Дополнение процесса согласования прайс-листа

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

Анастасия Амосова

менеджер проектов

Интересное решение — блокировка отклонения. Если менеджер не написал причину отклонения ни к одному артикулу, не заполнил комментарий ко всему прайс-листу, портал блокирует кнопку «Отклонить» до указания причины. Таким образом мы сокращаем цепочку согласований — поставщик будет реже возвращаться за разъяснением причины отказа.

История работы с прайс-листом

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

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

Backend For Frontend

Взаимодействие между Frontend и Backend обновленного личного кабинета осуществляется по REST API с использованием промежуточного слоя Backend For Frontend — BFF.

Почему мы написали модуль BFF? Пользовательские интерфейсы формируются индивидуально для каждой роли, учитывая дополнительные не ролевые условия, которые влияют на доступные функции. «Глобус» имеет свой сервис авторизации, он отдает роли в соответствии с пользователем. Сервис сообщает только наименование роли, без параметров, по которым нужно собрать интерфейс для конкретного пользователя. Чтобы корректно формировать Frontend, мы написали модуль BFF. Он на основе роли, полученной от сервиса авторизации «Глобус», передает на Frontend перечень блоков доступных для этой роли.

Анастасия Амосова

менеджер проектов

Портал поставщиков — это совместный проект двух ИТ-партнеров «Глобус» — «Глобит» и «Ареал». Нам удалось выстроить эффективную коммуникацию в Azure клиента, работа всех участников была синхронизирована. Чтобы специалисты «Глобит» были в курсе наших задач, я дублировала frontend таски из нашего трекера в Azure, обновляла статусы и параллельно смотрела состояния backend задач. «Глобит» же в общем чате на две команды присылали ссылки на свои новые задачи.

Редизайн

Основной задачей редизайна было привести интерфейсы портала поставщиков к современной корпоративной стилистике «Глобус». Портал в старом дизайне мы использовали как прототип, а наш унифицированный UIKit «Глобус» доработали с учетом элементов для портала поставщиков.

Целью стало не только обновить визуальную часть, но и изменить элементы дизайна на более удобные.

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

1/

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

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

1/

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

Портал собран на фреймворке Quasar, что помогает облегчить и ускорить развитие проекта. Мы сразу сформировали frontend-библиотеку компонентов дизайна, на основе которой собираем новые интерфейсы портала поставщиков и в перспективе другие b2b-системы «Глобус».

Итог

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

Следующим этап развития — введение в портал функционала заполнения карточек товара по цепочке поставщик-закупщик и синхронизация с PIM.