Редизайн сервиса ЕПК
ЕПК - действующий сервис для компании, управляющей торговыми сетями. Сервис служит для настройки, рассылки и аналитики отправленных коммуникаций.
Редизайн сервиса ЕПК
ЕПК - действующий сервис для компании, управляющей торговыми сетями. Сервис служит для настройки, рассылки и аналитики отправленных коммуникаций.
  • Задачи
    Сделать редизайн для существующего проекта.
    В частности для страницы Дашборды необходимо нарисовать красивые и в то же время информативные графики.
    "UX на проекте нормально настроен", но предложения по доработке приветствуются.
    Для презентации бизнесу и тестирования - собрать интерактивный макет.
    Собрать дизайн систему с использованием токенов.
  • Сделал
    Карту проекта
    Новый дизайн
    Полезные фишки
    Улучшил UX
    Интерактивный прототип
    Дизайн систему
  • Команда
    Проект менеджер
    Арт директор
    Frontend разработчик
    Backend разработчик
    Я в роли UX/UI дизайнера
    Сторона заказчика
01 / 06
Информационная структура
Сперва я разработал информационную структуру сервиса, на этом этапе стало понятно например сколько страниц можно сделать в формате попапов, а далее мы шли по ней отмечая прогресс разработки.

Сервис состоит из 6 основных разделов, так же добавились 2 новых, Личный кабинет и Документация.
02 / 06
Раздел Дашборд
Первой задачей было сделать дизайн страницы Дашборда с интересным вариантом отображения графиков и выделить основные показатели.

Одна из моих идей - быстрый выбор периода. Если зажать клавишу мыши и потянуть в сторону, тогда у выделенной области на графике появится кнопка “Показать период”.

При нажатии на кнопку график меняется, отображая выбранный период с максимальным значением для него.

В случае, когда доставлено очень много коммуникаций и среди них на графике не будет видно маленькие потери предложил добавить вкладку “Не доставлено”, где берутся только значения потерь.

03 / 06
Раздел Статистика
Это один из сложных разделов с множеством таблиц и вложенностью.
Общая статистика
Есть 3 таблицы, в которые необходимо добавить несколько столбцов и возможно этих столбцов будет ещё больше.

Информации становится очень много для одного экрана, пришлось упрощать.

Во первых я решил не показывать сразу 3 таблицы а сфокусировать внимание пользователя на одной, спрятав остальные во вкладки. Затем предложил 2 варианта решения.
В первом варианте с таблицей я добавил цветовые маркеры и убрал все новые столбцы в попап со списком чекбоксов.
Во втором варианте я попытался переосмыслить подачу информации и представить в формате графиков, для этого названия столбцов переместил в строки с разворачивающимися списками, а бывшие строки превратил в вертикальные карточки. Это похоже на механику сравнения характеристик товара в интернет магазинах.
Статистика по клиентам
Для таблицы статистики по клиентам применил только косметические изменения с цветными маркерами статуса.
Логика маркеров статуса: цвет относится к статусу "всего, отправлено, доставлено". Так как нам важно видеть ошибки - я выделил их сделав заполненными.
Ещё к строке поиска была текстовая подсказка, но она была написана сложным языком, сделал попап с новым текстом и примерами.
Когда проект менеджер демонстрировал работу сервиса и пытался на ноутбуке без мыши выбрать период, то эта задача оказалось непростой.

Заметив это я предложил переделать стандартный дейтпикер, увеличил размер кнопок и добавил список из часто выбираемых значений.
Скучные текстовые списки
В разделе была огромная куча скучных текстовых вложенностей с бесконечными скроллами. Вместе с проект менеджером сгруппировали информацию по смыслу и переделал эти списки в формат плиток.
Динамичную информацию убрал в нижнюю часть в сворачиваемые списки.
04 / 06
Раздел Юзеры
В разделе юзеры была больше декоративная работа, одна из которых - аватары пользователей.

Пользователи вряд ли будут устанавливать себе свои аватарки, а дубляж стандартной иконки в аватарах наводит скуку.

Добавление небольшой вариативности делает дизайн интересней и позволяет отличать одного пользователя от другого.
Вариативность иконок состоит из случайной генерации цвета + фона иконки. Фронтендер предложил подставлять на фон лого подразделения.
Аватары генерировал плагином для фигмы.
05 / 06
Матрица правил для рассылки
Сложный раздел с огромной матрицей правил для рассылки (таблица). С этой таблицей есть две проблемы.

1 - большие шапки (боковая и верхняя), отнимаю огромную часть экрана.

2 - отсутствие закрепа у этих шапок, при скроле в другой конец матрицы, теряется информация о значении ячеек.

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

В результате полезная область с контентом увеличилась на 33%.
Добавил полезную фишку с множественным выбором ячеек.
Текст подсказки по работе с матрицей был большим и написан сложным языком, поэтому я поправил текст, сделал содержание и поясняющие иллюстрации.
06 / 06
Дизайн система
Мой первый опыт работы с токенами и первый опыт когда UI kit перерос в дизайн систему.

Получилась небольшая система из атомов, молекул, организмов и страниц (некоторые шаблоны я поместил в раздел организмов).
Компоненты с вариантами старался строить по принципу тупого и умного компонента.

Старался во всем соблюдать привязку к 8px. Например если размер иконки 16px (с безопасной зоной), то высота текстовой строки тоже 16px, а расстояние между иконкой и текстом 8px и так далее согласно принципу внешнего и внутреннего.
В системе предусмотрено два стандарта для иконок 16x16px заполненные и 24x24px линейные, иллюстрации так же рисуются линейными.
Вывод
По положительной обратной связи со стороны заказчика, проект менеджера и разработчиков пришел к выводу что мне удалось справится с поставленными задачами.

Сделать редизайн для существующего проекта.

Нарисовать красивые и в то же время информативные графики.

Доработать местами UX.

Презентовать и протестировать сервис благодаря интерактивному макету.

Создать дизайн систему с использованием токенов.