Контекст
Проект для внутренней команды продаж, которая долгое время пользовалась устаревшей системой. Требовалось полностью переработать интерфейс, упростить работу с данными и снизить количество ошибок
Срок на реализацию проекта: 3 месяца.
Старая система (написана на С++)
Архитектура новой версии
Ключевые элементы архитектуры
Работу над проектом начал с интервью с руководителями и менеджерами.
Разобрался, с какими сущностями они чаще всего работают, и на основе этого определил ключевые элементы архитектуры новой системы.
Интервью также помогли выявить несколько давних проблем в командных процессах.
Проблемы в командных процессах
В компании отсутствовала культура таск-трекинга.
Не было налаженной коммуникации между менеджерами и руководителями.
Реализация
Вариантивные компоненты
Иван Тарасов
Сотрудник команды
Чтобы уложиться в сроки при большом количестве экранов, сделал упор на вариативные компоненты.
Например, мой любимый компонент «капсула» за счёт комбинации разных параметров может принимать вид любого элемента, которого требует контекст.
Дашборд
Домашняя вкладка
Основу навигации составляют сайдбар и вкладки.
Сайдбар содержит ключевые разделы системы: базу клиентов, почту, запросы, уведомления, справочник и настройки. Вкладки позволяют держать открытыми несколько рабочих контекстов (например, карточки разных клиентов).
На домашней вкладке основной фокус на задачи. Справа расположен быстрый доступ к функционалу звонков и созданию запросов.
Оверлей запросов
Запрос от руководителя
Список контактов
Почтовое приложение
Экран почты
Почтовое приложение построено на знакомых паттернах почтовых клиентов, но переписка отображается в более дружелюбном формате чата. Вложения легко просматривать прямо в диалоге, а важные сообщения можно сохранять.
Окно переписки
База клиентов
Таблица клиентов с интерактивными полями контактов
База клиентов — основной рабочий инструмент менеджера. Таблица поддерживает поиск, фильтрацию и сортировку, позволяя быстро находить нужные компании.
Контактные данные оформлены как интерактивные элементы (на основе капсулы), позволяющие выполнять действия прямо из таблицы без перехода в карточку клиента.
Карточка клиента
Вкладка «Информация»
Карточка клиента построена модульно: каждая вкладка содержит две колонки модулей с разными типами информации. Такой подход позволяет быстро ориентироваться в данных и не перегружает интерфейс. Изначально предполагалась возможность настраивать колонки, однако в MVP эта функция не вошла.
Прототип настройки колонок
Вкладка «Контакты»
Вкладка «Коммуникации»
Вкладка «Документы»
Оверлей звонка
Экраны руководителя
Если менеджеры работают с клиентами и задачами, то руководителям важно управлять инфраструктурой самой системы. Поэтому для них был выделен отдельный набор экранов, где руководители могут:
- управлять организационной структурой компании
- настраивать роли и права доступа сотрудников
- редактировать реквизиты и справочные данные
- поддерживать внутреннюю базу инструкций и обучающих материалов
Список инструкций
Редактирование списка инструкций
Редактирование записи в справочнике
Управление реквизитами
Управление доступами ролей
Управление подразделениями
Фрагменты дизайн-системы
Несколько фрагментов библиотеки компонентов, на которых построен интерфейс системы.
Набор инпутов
Набор модулей клиента
Набор иконок
Таблица стилей (да, есть светлая тема)
