1200+ экранов интерфейса и сотни таблиц – прокачка SRM Петровича

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

Существовали две основные проблемы: первая — отсутствие в SRM дизайн-системы, существовали лишь отдельные компоненты — наброски UI-kit, которые не были объединены логически. И вторая – некоторые сценарии процессов были сложными, а в каких-то и вовсе не хватало информации. Вся работа над задачей выполнялась в три этапа.

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

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

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

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

4. Провели usability-тестирование на кликабельном прототипе. Отследили какие ошибки поставщик допускает при заполнении номенклатуры и подсветили некорректные данные, а следом выводились советы по их исправлению.

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

Подстроили визуал, взяв за основу готовый UI-kit. Вместе с разработчиками клиента подстраивали систему на готовую бесплатную систему компонентов Ant Design. Так разработчикам не надо было пилить новую логику, а только стилизовать визуал под определенные критерии и значительно увеличить скорость разработки.

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

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

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

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

С помощью сервиса Hotjar посмотрели, как ведет себя пользователь в новом интерфейсе. Поставщикам стало легче ориентироваться в системе, а на подачу КП у них стало уходить в районе 7 минут.

Задача уменьшения нагрузки на службу проверки тоже была решена. КП стали согласовывать на 6 дней быстрее, а скорость обработки сообщений увеличилась в 10 раз.

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