Редизайн личного кабинета Exmail

Exmail — логистическая компания с собственным личным кабинетом для частных и корпоративных клиентов.
Продукту на момент старта редизайна — около 10 лет.

Личный кабинет использовался одновременно:

• B2C-клиентами
• B2B-компаниями
• операторами
• пользователями с разными ролями и уровнями доступа

Система работала стабильно, но:

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

При этом backend был:

• построен на старой архитектуре
• без документации
• с большим количеством legacy-логики

Задача — полностью переработать UX/UI личного кабинета и интегрировать новый интерфейс в существующую backend-систему без её переписывания.

Это был не «косметический апдейт», а полноценная переработка интерфейсной логики.

• полный редизайн личного кабинета
• около 30 экранов
• desktop + мобильная версия
• несколько ролей пользователей
• разграничение прав доступа
• сложные таблицы с фильтрами
• массовые действия
• работа с финансовыми данными
• статусы, расчёты, логика отправлений

Основные цели:

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

Метрик до/после нет, но разница в удобстве и читаемости стала очевидной уже на этапе тестирования.

Аудит. Поскольку UX-исследования не проводились, работа началась с глубокой ревизии текущего интерфейса:

• анализ пользовательских сценариев
• выявление точек перегруза
• анализ логики ролей и прав
• разбор таблиц и фильтрации
• карта навигации

Главная проблема — не визуал, а архитектура взаимодействия.

UX-проектирование. Что мы сделали:

• переработали информационную архитектуру
• упростили структуру меню
• выстроили иерархию данных
• пересобрали логику таблиц
• переработали сценарии массовых действий
• привели интерфейс к единым паттернам

Ключевой принцип — пользователь должен понимать систему без инструкции.

UI-дизайн. Был создан новый визуальный слой:

• современная типографика
• четкая иерархия акцентов
• системная цветовая модель
• единые состояния элементов (hover / active / disabled)
• визуальное разделение ролей и статусов

Интерфейс стал спокойным, структурированным и предсказуемым.

Frontend реализован на ванильном JavaScript.

Backend не переписывался.
Новый интерфейс был интегрирован в существующую систему.

Основные сложности:

• отсутствие документации
• устаревшая архитектура
• нестабильная логика старого API
• необходимость сохранить всю бизнес-логику
• невозможность остановки сервиса

Работа велась аккуратно — без изменения серверной части, только интеграция.

Таблицы. В системе было много:

• сложных фильтров
• сортировок
• массовых действий
• статусов
• финансовых расчётов

Нужно было упростить интерфейс, не упрощая саму логику.

Интеграция со старым API. Из-за отсутствия документации:

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

Согласование. Редизайн затрагивал ключевой инструмент работы клиентов.
Любое изменение требовало аккуратного согласования и аргументации.

До:

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

После:

• логичная структура
• предсказуемое поведение интерфейса
• упрощённые сценарии
• понятные статусы и действия
• современный визуальный язык

Проект стал примером того, как можно модернизировать 10-летнюю систему без кардинальной перестройки архитектуры.

• полностью обновлён UX/UI личного кабинета
• около 30 экранов переработано
• реализована адаптивная версия
• интеграция в legacy-backend без его переписывания
• продукт готов к масштабированию

Это не просто редизайн.

Это:

• переработка логики сложного B2B/B2C-инструмента
• модернизация интерфейса в условиях legacy
• работа с ролями, правами и сложными таблицами
• интеграция нового фронтенда в старую архитектуру

Мы не переписали систему. Мы сделали её понятной.