Header
Planado — Система управления выездными сотрудниками | Кейс

Planado — система управления выездными сотрудниками

Редизайн веб и мобильного интерфейса для оптимизации полевых работ

Planado Dashboard
Продукт
SaaS платформа FSM
Роль
Senior Product Designer
Команда
2 дизайнера, 8 разработчиков
Период
6 месяцев
Год
2023

О продукте

Что такое Planado

Planado — облачная система для управления мобильными сотрудниками (FSM). Продукт помогает компаниям с выездным обслуживанием координировать работу команды, назначать заказы, отслеживать выполнение и оптимизировать маршруты.

Кто использует

  • Сервисные центры по ремонту техники
  • Компании по установке оборудования
  • Клининговые службы
  • Курьерские и логистические сервисы

Задача и контекст

Бизнес-цели

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

Проблемы старого интерфейса

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

Ожидания клиентов

Современный UI/UX, быстрая работа, интуитивная навигация, мобильная версия, кастомизация под процессы компании

Исследование

Методы исследования

  • Интервью с 15 клиентами разных отраслей
  • Анализ конкурентов (ServiceMax, Jobber, FieldAware)
  • Аудит текущего интерфейса
  • Анализ метрик использования (Google Analytics, Hotjar)
  • Сессии с внутренней командой поддержки

Ключевые находки

  • 80% времени пользователи работают с 20% функций
  • Диспетчеры проводят в системе 6-8 часов в день
  • Мобильные сотрудники открывают приложение 15-20 раз за смену
  • Главная боль — медленная работа с большим объёмом заказов
  • Запросы на кастомизацию под специфику бизнеса

Ключевые пользователи

Диспетчер

Главный пользователь веб-версии

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

  • Быстрое назначение заказов
  • Контроль статусов в реальном времени
  • Оптимизация маршрутов

Мобильный сотрудник

Пользователь мобильного приложения

Получает заказы, навигирует к месту, выполняет работу, заполняет отчёты. Работает в полевых условиях, часто в движении.

  • Быстрый доступ к заказам
  • Навигация и карты
  • Простое заполнение форм

Руководитель

Анализирует данные

Смотрит аналитику, KPI команды, эффективность работы. Принимает управленческие решения на основе данных из системы.

  • Дашборды с метриками
  • Отчёты и аналитика
  • Контроль команды

Концепция решения

Ключевые принципы нового дизайна

Мы решили не делать революцию, а провести эволюцию интерфейса. Главные принципы: сохранить привычные паттерны, убрать лишнее, добавить воздуха, ускорить работу.

1

Фокус на скорости

Сократить количество кликов для частых действий. Автоматизировать рутинные операции. Добавить горячие клавиши.

2

Информационная иерархия

Выделить главное, скрыть второстепенное. Использовать визуальные акценты для критичной информации.

3

Адаптивность и кастомизация

Пользователь может настроить интерфейс под свои задачи. Сохранение фильтров, кастомные поля, настраиваемые виджеты.

4

Единый дизайн-язык

Создать систему компонентов, которая работает и в вебе, и в мобильном приложении. Консистентность на всех платформах.

Ключевые функции

1

Канбан-доска для заказов

Визуальное управление заказами по статусам. Перетаскивание карточек, массовые операции, фильтры по множеству параметров.

2

Умное назначение

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

3

Карта в реальном времени

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

4

Мобильное приложение

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

5

Аналитика и отчёты

Дашборды с ключевыми метриками, конструктор отчётов, экспорт данных, автоматические email-дайджесты.

6

Интеграции

API для связи с CRM, ERP, бухгалтерией. Webhook'и для автоматизации. Готовые интеграции с популярными сервисами.

Примеры интерфейса

Мобильное приложение

Особенности мобильной версии

Приложение для iOS и Android. Работа в оффлайн-режиме с синхронизацией. Адаптировано под работу одной рукой. Крупные элементы управления.

Дизайн-система
Цветовая палитра
Primary Dark
Основной фон приложения
Secondary Dark
Фон карточек и модулей
Success Green
Завершённые заказы, активные статусы
Warning Orange
Срочные заказы, предупреждения
Info Blue
Выделение, фокус, интерактивность
Типографика и компоненты
Instrument Sans
Выбран за отличную читаемость на маленьких размерах 
и современный вид. Поддерживает кириллицу и имеет переменные начертания
Крупные тач-таргеты (минимум 44x44px)
Высокий контраст для работы на улице
Скругления 16-24px для современного вида
Система теней для глубины интерфейса
Дизайн-система
Цветовая палитра
Primary Dark
Основной фон приложения
Secondary Dark
Фон карточек и модулей
Success Green
Завершённые заказы, активные статусы
Warning Orange
Срочные заказы, предупреждения
Info Blue
Выделение, фокус, интерактивность
Типографика
и компоненты
Instrument Sans
Выбран за отличную читаемость на маленьких размерах
и современный вид. Поддерживает кириллицу
и имеет переменные начертания
Крупные тач-таргеты (минимум 44x44px)
Высокий контраст для работы на улице
Скругления 16-24px для современного вида
Система теней для глубины интерфейса
Planado — Система управления выездными сотрудниками | Кейс

Технические решения

Фронтенд

  • React + TypeScript
  • Redux для управления состоянием
  • Material-UI как база компонентов
  • Webpack для сборки
  • Jest + React Testing Library для тестов

Производительность

  • Lazy loading для больших списков
  • Виртуализация таблиц
  • Дебаунсинг поисковых запросов
  • Кэширование данных на клиенте
  • Оптимизация рендеринга React

Результаты внедрения

40%
Рост скорости работы

Диспетчеры обрабатывают заказы на 40% быстрее

25%
Снижение ошибок

Меньше ошибок при назначении и выполнении заказов

95%
Удовлетворённость

95% пользователей довольны новым интерфейсом

Бизнес-метрики

  • Рост числа новых клиентов на 30%
  • Снижение оттока на 15%
  • Увеличение среднего чека на 20%
  • Рост NPS с 45 до 72

Отзывы клиентов

"Наконец-то система, которая не тормозит нашу работу, а помогает! Диспетчеры в восторге от новой канбан-доски. Мобильное приложение стало работать быстрее и удобнее."

Сложности и решения

Миграция данных

Проблема: Клиенты боялись потерять данные при переходе на новую версию.

Решение: Постепенный переход с возможностью откатиться. Тщательное тестирование миграции. Поддержка 24/7 в первые недели.

Работа оффлайн

Проблема: Мобильные сотрудники часто работают без интернета.

Решение: Локальное хранилище с синхронизацией. Индикация оффлайн-режима. Очередь действий для отправки при появлении сети.

Кастомизация

Проблема: Каждый клиент хотел уникальные поля и процессы.

Решение: Конструктор форм и полей. Настраиваемые статусы заказов. Гибкая система прав доступа.

Производительность

Проблема: Большие объёмы данных замедляли работу интерфейса.

Решение: Виртуализация списков. Ленивая загрузка. Пагинация. Оптимизация запросов к API.

Выводы и инсайты

1

Не меняйте всё сразу

Эволюция лучше революции. Пользователи привыкли к определённым паттернам — резкие изменения вызывают сопротивление.

2

Слушайте поддержку

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

3

Тестируйте с реальными данными

Прототипы с 10 элементами и продакшн с 1000 — это разные вещи. Всегда тестируйте на реальных объёмах.

4

Дизайн-система — основа масштабирования

Без чёткой системы компонентов и паттернов продукт быстро превращается в зоопарк решений.

5

Производительность = UX

Даже самый красивый интерфейс бесполезен, если он тормозит. Скорость работы — часть пользовательского опыта.

Made on
Tilda