Контекст
Crocodealer – это единая CRM‑платформа для интернет‑магазинов, которая автоматизирует и объединяет в одном интерфейсе управление заказами, складскими помещениями, доставкой, CMS, аналитикой, ассортиментом и т.д.
На текущем этапе требуется:
Страница авторизации: простая, безопасная, с минимумом шагов.
Страница заказов: функциональная таблица с фильтрацией, сортировкой, массовыми действиями и интеграцией данных.
Цели
Разработать интуитивно понятный интерфейс, который ускоряет выполнение рутинных операций и минимизирует время, затрачиваемое на управление заказами
Оптимизировать процесс регистрации и авторизации для быстрого и безопасного доступа к платформе, устраняя барьеры на пути к началу работы с системой.
Автоматизировать ключевые этапы обработки заказов для значительного повышения эффективности и снижения вероятности ошибок.
Заложить основу дизайн‑системы для масштабирования продукта.
Задачи
Продумать и разработать логику взаимодействия с CRM-системой на основе информации от заказчика
Снизить порог входа и первых впечатлений у новых пользователей
Оптимизировать процесс ввода данных, внедрить гибкую систему безопасности
Разработать страницу заказов с гибкими инструментами управления (фильтры, сортировка, импорт/экспорт)
Автоматизировать рутину
Спроектировать UI-kit
Процесс
Первое, с чего начинаю — открываю Google и погружаюсь в тему.
Моя задача — понять, как вообще устроен процесс обработки заказов в интернет-магазинах. Какие этапы проходит заказ? Кто с ним работает? Где возникают сложности? Почему менеджеры теряют время, и как это влияет на бизнес?
Проанализировала 5 конкурентов (Retail CRM, InSales, Bitrix24, WireCRM, S2). Смотрю, как работают другие CRM-системы, какие интерфейсные паттерны повторяются, что вызывает вопросы с точки зрения удобства. Фиксирую удачные решения и боли в интерфейсах, собираю скриншоты, делаю галерею для визуального анализа.
Выводы и идеи:
Интерфейс должен быть интуитивно понятным, лаконичным и логично организованным, с минималистичным дизайном, исключающим избыточные элементы.
Функционал должен работать на сохранение времени пользователей: гибкие фильтры, кастомные таблицы, групповые действия in-line редактирование и т.д.
Нужно избегать “лишней универсальности”. Лучше сфокусироваться на простых, но мощных сценариях: фильтровать, находить, редактировать, отслеживать.
Чтобы понять, для кого именно я проектирую, выделяю несколько ключевых сегментов пользователей. У каждого свои задачи, мотивации и уровень подготовки.
Менеджеры интернет-магазинов (нуждаются в производительности и минимализме: быстрые действия, минимум кликов)
Операционные директора, управляющие, владельцы бизнеса (нуждаются в визуализации и аналитике)
Самозанятые, владельцы малого бизнеса (требуется упрощённый поток, стартовый гайд
интуитивный интерфейс, стартовая страница)Новички (максимально зависим от качества онбординга и обучающих материалов)
JTBD
Сформулировала ключевые “работы” пользователей, чтобы понять, какие сценарии для них важны.
Когда я получаю много заказов, я хочу быстро отфильтровать их по статусу, чтобы обработать приоритетные в первую очередь.
Когда заказ оплачен, я хочу быстро изменить его статус и передать в доставку, чтобы ускорить отгрузку.
Когда приходит возврат, я хочу найти заказ по клиенту или номеру, чтобы не тратить время на поиски.
Когда работаю с таблицей заказов, я хочу менять статусы и суммы прямо в таблице, чтобы не открывать карточку.
Когда настраиваю систему, я хочу сохранить свои фильтры и вид таблицы, чтобы не тратить время каждый день.
Когда добавляю заказы вручную, я хочу делать это за 1–2 шага, без лишних полей.
Когда заказов много, я хочу массово выделить их и применить действия (отгрузить, отменить, изменить статус).
Когда только начинаю пользоваться CRM, я хочу видеть подсказки и краткий гайд, чтобы быстро разобраться.Эти сценарии напрямую легли в требования к страницам регистрации и заказов, а также к функционалу фильтров, inline‑редактирования и массовых операций.
Эти сценарии напрямую легли в требования к страницам регистрации и заказов, а также к функционалу фильтров, inline‑редактирования и массовых операций.
5. Проектирование
Дизайн-система
Для проекта я создала базовый UI‑kit, в который вошли основные компоненты интерфейса: поля ввода, кнопки, иконки статусов, чекбоксы, теги, системные цвета и т.д. UI‑kit будет развиваться по мере появления новых страниц и функциональности.
Страница входа
Компактная форма для ввода email и пароля с мгновенной проверкой данных и подсказками при ошибках.
Страница регистрации
Подтверждение почты
После отправки регистрационной формы пользователь попадает на экран ввода одноразового кода, отправленного на почту.
Код вводится в единое поле с автофокусом и пошаговой индикацией ввода.
Предусмотрен таймер повторной отправки кода и возможность сразу запросить новое письмо, если код не пришёл.
Базовые данные о бизнесе для первичной настройки CRM
Короткая анкета с данными о магазине, тематиками, числом сотрудников и интеграциями для автоматической настройки системы.
Страница заказов
Основной рабочий экран с таблицей заказов, фильтрами и быстрыми действиями.
Боковое меню скрыто
Таблица заказов не заполнена
Добавление нового заказа
Форма для быстрого создания заказа с минимально необходимыми полями. Если таблица уже заполнена, в форме отображаются только те пункты, которые есть в таблице.
Фильтры
Панель с расширенными фильтрами для поиска и сегментации заказов. Пользователь может самостоятельно настраивать фильтры: добавлять новые поля, изменять их порядок и сохранять готовые наборы для повторного использования. Это позволяет быстро переключаться между нужными сценариями поиска без необходимости заново заполнять условия.
Выбор полей фильтрации
Фильтры не выбраны
Работа с таблицей
Таблица поддерживает групповую работу через чекбоксы для массового выделения строк. После выбора заказов доступны быстрые действия: удаление, изменение ответственного менеджера и статуса заказа. Реализовано inline-редактирование полей без перехода на отдельные страницы. Пользователь может настраивать отображение таблицы под свои задачи: выбирать нужные столбцы и менять их порядок.
In-line-редактирование
Настройка таблицы
Экспорт таблицы
Экран экспорта включает в себя выбор необходимых параметров данных и выбор типа файла для скачивания.
Импорт заказов
Страница импорта заказов предлагает два основных способа загрузки файлов: "Загрузить свой файл" и "Использование шаблона". В первом случае пользователь может выбрать файл на своем устройстве, после чего отображается статус загрузки с прогресс-баром и уведомлением о результате (успешная загрузка или ошибка).
Загрузка файла
Файл загружен
Во втором случае пользователь может скачать шаблон, заполнить его и загрузить обратно в систему. При загрузке готового файла также отображается прогресс, и после завершения процесса система сообщает об успешном импорте или ошибке.
Провела ресерч процессов обработки заказов и анализ 5 конкурентов, на основе которого выделила сегменты пользователей и их JTBD для формулирования требований к интерфейсу.
Спроектировала страницы входа и регистрации с короткой анкетой о бизнесе, чтобы с нуля запускать CRM и сразу адаптировать её под магазин.
Сделала страницу заказов основным рабочим инструментом: настраиваемая таблица, фильтры, inline‑редактирование и массовые операции закрывают ключевые сценарии менеджеров.
Проработала импорт и экспорт заказов
Создала базовый UI‑kit, заложив фундамент для дальнейшего масштабирования CRM без потери консистентности.