Личный кабинет для Container-Deshevo: как мы собрали заказы, релизы, контейнеры и документы в одном интерфейсе

О клиент

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

Карточка проекта

Задача

Компания развивалась, поэтому необходимо было сделать масштабный личный кабинет для клиентов и сотрудников в текущей стилистике основного промо-сайта компании.

Цели: разработать правильный UX личного кабинета и сохранить текущую стилистику сайта.

Что это значит на практике:
 

• в логистике контейнеров много сущностей, которые связаны между собой: запрос, заявка, релиз, контейнер, коносамент, счёт, акт, депо;
• в кабинет заходят разные пользователи (клиент, его сотрудники, менеджеры компании, администратор), и у каждого свои задачи;
• кабинет должен выглядеть как продолжение сайта, а не как отдельный чужой продукт

Решение

Мы описали путь контейнера от запроса клиента до возврата и сдачи в депо и построили кабинет вокруг этого пути. Каждая сущность получила свой раздел, а связи между ними (из заявки в релиз, из релиза в контейнер, из контейнера в документы) стали переходами внутри интерфейса. Параллельно собрали дизайн-систему, чтобы такой большой кабинет оставался единым и его можно было развивать

Структура кабинета

Дизайн-система

Дизайн-система собрана для четырёх разрешений: 1920, 1440, 768 и 360. Для каждого определены стили текста: заголовки (H1–H5 и подзаголовок), текст (разные размеры и начертания, ценовой текст, акцентный), кнопки и ссылки. В библиотеку вошли:

• цветовые стили: основные (белый, основной, акцентный, синий, зелёный), оттенки серого и сервисный цвет ошибки;
• кнопки разных типов (основные тёмно-синие и жёлтые, вторичные) с состояниями: обычное, наведение, нажатие, отключено;
• элементы навигации: шапка, подвал, хлебные крошки, пагинация, стрелки с состояниями;
• иконки соцсетей и системные иконки;
• типы уведомлений: звонок, обратный звонок, сообщение, отзыв и ответ;
• шрифты Onest и Ubuntu

Сложности и как их решили

Результаты

Почему этот кейс важен для вашего проекта

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

Нужен личный кабинет для клиентов или сотрудников?

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