переключайтесь между страницами кнопками
или клавишами ← и → на клавиатуре
Экосистема для полевого аудита розничных точек: мобильное приложение для аудиторов и веб-портал для менеджеров. У менеджера в подчинении десятки аудиторов, каждый день выполняющих задания по разным торговым точкам города.
Менеджер мог понять, где аудитор и как идёт его день, только по звонку или переписке. С десятками аудиторов в подчинении это не масштабируется: работа менеджера превращается в непрерывный обзвон вместо контроля. Нужно было:
Два разных интерфейса под две роли: аудитор в поле работает с мобильным приложением, видит свои задания и маршрут на день, а менеджер — с десктопа, через веб-портал с обзором сразу по всей команде.
Перед макетами поресёрчил, как обычно группируют статусы на картах, и собрал контекст от техлида: рынок, видение заказчика.
Статусов больше десяти, поэтому выбрал цвет вместо иконок: под каждую пришлось бы рисовать отдельный значок, а цвет считывается быстрее.
Делал фичу один, без дизайн-лида: всего на этом проекте я так в одиночку закрыл около 20 фич.
Собрал всех аудиторов на одной карте, чтобы менеджер видел статус каждого одним взглядом, без ручных поисков: каждый пин показывает статус цветом. Фильтры «Группа» и «Статус» вынес наверх, чтобы сузить список, не уходя с карты.
Выбрал цвет, а не иконки для статусов: их больше десяти, и под каждый пришлось бы рисовать отдельный значок. Цвет считывается быстрее.
Сделал так, чтобы клик по строке в списке и клик по пину на карте вели в одну и ту же карточку аудитора, а не в два разных интерфейса ради одного действия. Карточка показывает статус, устройство, версию приложения и свежесть данных: всё, что нужно проверить с одного взгляда.
Показал маршрут аудитора за день, чтобы менеджер видел прогресс без звонка. Время в пути между точками спрятал за клик на отрезок, а не вывел сразу: не хотел перегружать карту цифрами.
Собрал в одной карточке всё, что раньше приходилось уточнять в разных местах: статус сбора, вывеску, назначенных аудиторов, даты плана и визита. Так не нужно переключаться между системами ради одного вопроса.
Помимо полной карточки в сайдбаре сделал ещё и поп-ап с деталями, чтобы можно было глянуть точку или аудитора на лету, не уходя с карты.
Легенда карты разбита по смысловым группам, а не в один список. Например, обводка на пине отдельно показывает новую точку, чтобы та не терялась среди остальных статусов.
Менеджер видит всех аудиторов одновременно и фильтрует по группе и статусу.
Быстро находит конкретного человека через поиск и открывает одну и ту же карточку с карты или из списка.
Просматривает маршрут аудитора за день и видит время в пути между точками без звонка.
Открывает детали торговой точки одинаково с карты общего вида и с карты конкретного аудитора.
Фичу приняли, она в проде: веб-портал менеджера работает и на десктопе, и на мобильных браузерах. Задачи из ТЗ закрыты: менеджеры перестали звонить аудиторам, чтобы понять, где они и что делают, стало быстрее находить нужного человека и удобнее следить за работой в поле.