Показываем изнутри: закрытый сервис Emex DWC, который 7 лет ждал обновлений

Сначала мы спроектировали систему за 5 недель, а потом разработали фронтенд и запустились через 6 месяцев после начала разработки. В кейсе показываем, как всё теперь работает.

Показываем изнутри: закрытый сервис Emex DWC, который 7 лет ждал обновлений

Немного о задаче

Компания Emex DWC занимается продажей запчастей и оборудования для автомобилей. Клиенты – представители B2B-сектора на рынке Среднего Востока, Америки и Европы.

Seller Drive — это система Emex DWC для работы с поставщиками – их личный кабинет. Он выступает своеобразным мостиком между поставщиком автозапчастей и их заказчиком.

Показываем изнутри: закрытый сервис Emex DWC, который 7 лет ждал обновлений

Старая версия Seller Drive существовала в компании последние 10 лет и никак не обновлялась 7 из них. Мы договорились о процессе взаимодействия команд fuse8 и Emex для разработки новой версии системы. Получилось подстроить Seller Drive под актуальные бизнес-процессы и технологическую экосистему Emex DWC.

Разработку фронтенд-части Seller Drive мы начали после проектирования системы. Этот этап длился 5 недель и стал основой для разработки.

Нашей ответственностью была фронтенд-часть, а коллеги из Emex занимались бекендом и координацией команд. Через 6 месяцев после начала совместной разработки система была готова к эксплуатации.

Как устроена работа в системе Seller Drive

Стартовая страница содержит общую информацию о возможностях системы. Это единственная индексируемая общедоступная страница Seller Drive – здесь мы настроили SEO-оптимизацию.

Взаимодействие поставщиков с системой начинается со входа или регистрации.

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

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

Как работает настройка отображения загружаемого прайса.

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

Показываем изнутри: закрытый сервис Emex DWC, который 7 лет ждал обновлений
Включение и отключение отображения прайсов.

Товары из загруженных в Seller Drive прайс-листов попадают на маркетплейс, где покупатели могут их заказывать. Заказы после оформления отображаются в ЛК поставщика. Там их можно обрабатывать и процессить. Чем быстрее поставщик обрабатывает заказы, тем выше становится его рейтинг, который видят покупатели.

Показываем изнутри: закрытый сервис Emex DWC, который 7 лет ждал обновлений

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

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

Показываем изнутри: закрытый сервис Emex DWC, который 7 лет ждал обновлений

Когда товары отгружены, поставка переходит в категорию исполняющихся (pending). Дойдя до склада, она проверяется складскими работниками. Они работают в одной из связанных с Seller Drive систем и отмечают приход товара, а также недочеты, выявленные на стадии приёмки.

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

Немного о процессах

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

Разрабатывали сервис в тандеме с бекенд-командой Emex. Также над проектом работали технический директор Emex Дмитрий Шнипов и менеджер продукта Александр Крашенин. Первые несколько недель плотно взаимодействовали и с руководителем фронтенд-направления Emex. Сверяли архитектурные паттерны и закрепляли их. После в созданной архитектуре продолжили автономную разработку, проводя еженедельные демо и сессии планирования.

Требования мы получали от Emex в Notion, потом переводили их для дальнейшей работы в Azure DevOps.

Технологический стек

Стек технологий Seller Drive согласован со стеком российского подразделения Emex, чтобы поддерживать и дорабатывать системы одной командой. Вот какие технологии мы использовали для разработки фронтенд-части:

React

TypeScript

State management: Redux, Redux Sagas

Testing: Jest, React Testing Library

WebpackCSS: Styled Components

Ещё один важный момент – консистентная дизайн-система Emex. Обновлённый продукт мы подстраивали под заданные визуальные паттерны – опять же, чтобы остаться верными экосистеме, в которой продукт будет существовать.

Требования к архитектурной структуре Seller Drive были продиктованы экосистемой программных продуктов Emex. Нужно было, чтобы разработчики из внутренней команды заказчика могли быстро переключаться между ними без долгого онбординга.

Результаты

Через 6 месяцев после начала разработки новая версия Seller Drive вошла в эксплуатацию, после чего стала непрерывно совершенствоваться.

Мы продолжаем работать над Seller Drive и сейчас, дополняя функциональность системы, чтобы пользователям было ещё удобнее взаимодействовать с кабинетом поставщика.

1515
2 комментария
Комментарий удалён модератором

нейросетями балуетесь?! ))

Ответить