1200+ экранов интерфейса и сотни таблиц – прокачка SRM Петровича
Кто сказал, что маркетплейс должен быть удобным только для покупателей? DIY-ритейлер Петрович поставил перед нами задачу разработать новый личный кабинет для своих продавцов.
Задача – разработать новый личный кабинет для поставщиков
Существовали две основные проблемы: первая — отсутствие в SRM дизайн-системы, существовали лишь отдельные компоненты — наброски UI-kit, которые не были объединены логически. И вторая – некоторые сценарии процессов были сложными, а в каких-то и вовсе не хватало информации. Вся работа над задачей выполнялась в три этапа.
Первый этап — проведение UX-исследования и тестирование пользователей
Во время первого этапа выявили проблемы, построили карту пути пользователя и провели юзабилити-тестирование. Немного подробнее о том, что было сделано:
- Запросили данные внутренних исследований. В компании был перегружен отдел, проверяющий номенклатуры КП. Поставщики часто совершали ошибки в заполнении файлов, из-за чего документы приходилось возвращать на доработку.
Выставили гипотезу по разгрузке проверяющего отдела. Изначально после подачи КП поставщик ждал, когда сотрудник Петровича проверит заполнение, а в случае ошибок — вернет на доработку. Было решено подсвечивать ошибки сразу во время заполнения номенклатуры товаров в интерфейсе, чтобы часть данных проверялась системой, а не человеком.
Изучили существующий личный кабинет. Элементам и всей системе не хватало единообразия, поэтому у пользователя не сформировался паттерн взаимодействия. Каждый раз ему было необходимо искать действие в разделе, запоминать новую логику, на это уходило время, особенно, если это новый пользователь.
Провели usability-тестирование на кликабельном прототипе. Отследили какие ошибки поставщик допускает при заполнении номенклатуры и подсветили некорректные данные, а следом выводились советы по их исправлению.
Второй этап – разработка дизайн-концепции
На основе данных исследования подготовили дизайн-концепцию новой версии SRM кабинета. В ней учли результаты тестирования и проработали негативные сценарии взаимодействия.
Подстроили визуал, взяв за основу готовый UI-kit. Вместе с разработчиками клиента подстраивали систему на готовую бесплатную систему компонентов Ant Design. Так разработчикам не надо было пилить новую логику, а только стилизовать визуал под определенные критерии и значительно увеличить скорость разработки.
Помимо сборки UI-kit, продумали систему компоновки интерактивных элементов в интерфейсе. Она затронули меню, шапку страницы, навигацию и панели действий. В процессе разработки выделили часто повторяющиеся компоненты интерфейса и со временем UI-kit масштабировался в дизайн-систему.
В результате все важные элементы в структуре кабинета — навигацию, кнопки и шрифты, иконки функций оказались оформлены в едином стиле. Благодаря дизайн-системе всех кабинеты — партнеров, поставщиков, агентов, сотрудников, стали единообразны и теперь не нужно создавать новую логику для схожих элементов, что значительно ускорит разработку новых фич.
Третий этап – проработка дизайна макетов и usability-тестирование
Почти все макеты представляли собой таблицы, в конце в кабинете появились новые разделы управления заказами и ценами, а также возможность отслеживания отгрузок. Некоторые цепочки процессов стали проще, а работа пользователя в системе легче.
В результат было создано 1200 экранов, а каждый сценарий взаимодействия пользователя с системой был разложен на процесс. Обычно в него входили от 5 до 25 экранов, в каждом из них были нарисованы варианты изменений, чтобы наглядно понимать, какие действия в разделе на что влияют.
Результаты — уменьшили нагрузку на службу проверки в 10 раз, а поставщики стали лучше ориентироваться в системе
С помощью сервиса Hotjar посмотрели, как ведет себя пользователь в новом интерфейсе. Поставщикам стало легче ориентироваться в системе, а на подачу КП у них стало уходить в районе 7 минут.
Задача уменьшения нагрузки на службу проверки тоже была решена. КП стали согласовывать на 6 дней быстрее, а скорость обработки сообщений увеличилась в 10 раз.
Исследования и полное погружение в бизнес-процессы помогли упростить и ускорить работу пользователя с системой. Подача коммерческих предложений, заведение новых поставщиков в системе и ввод товаров в продажу стали проще. А с гибкой настройкой компонентов новые фичи теперь создаются в короткие сроки.
Класс! А есть скрины старого кабинета?)