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