Обновление дизайна сервиса «Корпоративный помощник» для TN Life
ТЕХНОНИКОЛЬ развивает TN Life — внутреннее приложение для сотрудников, которое объединяет рабочие сервисы компании в одном пространстве.
Это большая корпоративная платформа, где пользователи общаются в чатах, работают с базой знаний, оформляют отпуска и командировки, подают заявки и решают ежедневные задачи через единый интерфейс. Мы стали частью команды клиента и подключились к работе над проектом. Вместе мы обновили дизайн сервиса «Корпоративный помощник»: изменили его структуру, модернизировали UI и подготовили к дальнейшему масштабированию.
Изначально сервис носил название «Финансовый помощник» и создавался как MVP для оформления заявок, командировок и авансовых отчётов. Со временем в нём появились новые процессы и дополнительные сценарии работы. Небольшой инструмент вырос в полноценный сервис «Корпоративный помощник», который объединил кадровые, финансовые и внутренние процессы компании.
Клиент
«ТЕХНОНИКОЛЬ» — российская компания-производитель строительных материалов и систем, которая входит в топ-5 крупнейших европейских производителей гидроизоляционных материалов.
Задача
Прежний интерфейс не был рассчитан на постоянное расширение. Добавлять новые сценарии становилось всё труднее.
Главная страница была перегружена таблицами и второстепенными данными. Пользователям стало сложнее ориентироваться внутри сервиса и находить нужную информацию. Перед командой стояли следующие задачи:
- обновить структуру главной страницы;
-
сохранить привычные для пользователей сценарии и ключевые блоки;
-
сделать структуру гибкой для добавления нового функционала;
-
добавить новые модули: календарь, информацию об отсутствиях и остатке отпуска, внутренние сервисы;
-
решить проблему с перегруженными таблицами;
-
адаптировать страницу под разные устройства;
-
разработать страницу каталога заявок.
Решение
Работу начали с изучения обратной связи от сотрудников. Узнали, как они взаимодействуют с сервисом, оформляют заявки, какие функции используют чаще всего. Это помогло зафиксировать основные сложности и ожидания пользователей.
Далее перешли к анализу конкурентов. Изучили 10 сервисов с похожими сценариями: корпоративные порталы, личные кабинеты и внутренние системы для сотрудников.
Собрали удачные решения, проанализировали наполнение разделов и структуру, нашли подходы, которые можно адаптировать под наши задачи.
В результате общения с сотрудниками выяснили, что блок с заявками — ключевой элемент интерфейса. С ним пользователи чаще всего взаимодействуют. Блок состоит из карточек с разными типами заявок — по клику сотрудник сразу переходит к нужной форме.
В старом интерфейсе он был перегружен: содержал большое количество карточек, занимал много места, утяжелял восприятие.
Мы сделали блок компактнее — сократили его высоту и закрепили в верхней части страницы. На первый план вынесли самые востребованные заявки, чтобы их было проще найти и быстрее выбрать нужную. Для остальных добавили кнопку «Все заявки» с переходом в каталог.
Блок «Требует внимания» показывает все заявки, которые ожидают действия.
В старом интерфейсе он был оформлен как длинная таблица и содержал много лишней и второстепенной информации, которая не нужна для работы.
Для упрощения восприятия мы заменили таблицы на компактный блок.
Заявки разделили по категориям и добавили счётчики, чтобы пользователь сразу видел, сколько задач требуют его внимания.
Блок адаптировали под разные роли. Руководитель видит свои заявки и обращения сотрудников, а сотрудник — заявки, которые нужно подписать или доработать. Оставили только важную информацию без лишних деталей.
Добавили новый блок с информацией об отпуске. Теперь сотрудник сразу видит остаток дней и может перейти к оформлению заявки.
Для блока продумали разные состояния. Учли сценарии для сотрудников, которые давно не были в отпуске или недавно вернулись к работе.
Отдельно проработали редкие сценарии и учли технические ограничения. Например, для сотрудников из других стран система не всегда может отображать остаток отпускных дней, поэтому интерфейс адаптируется под доступные данные.
Добавили блок с календарём отсутствий, где отображаются все события сотрудника с подробной информацией. Ниже разместили раздел с занятостью коллег, чтобы сотрудники и руководители могли учитывать загрузку команды при планировании отпусков, встреч и постановке задач.
Добавили блок с полезными сервисами, чтобы сотрудники могли быстро переходить к внутренним инструментам прямо с главной страницы.
В процессе общения с пользователями узнали, с каких устройств они заходят
в сервис и как работают. Большая часть сотрудников использует ноутбуки с небольшими экранами, а также системный масштаб.
Поэтому продумали адаптацию под разрешения 1536 и 1366, чтобы главная страница стабильно и корректно отображалась в реальных сценариях использования.
Боковое меню по умолчанию свернули. Оно открывается поверх контента —это освобождает место для основной информации. Сама страница не перестраивается, интерфейс ведёт себя предсказуемо и не «скачет».
В мобильной версии основной акцент сделали на блоке с популярными заявками — с ним чаще всего взаимодействуют, оформляют отчёты и справки со смартфона. Его не стали сокращать: на экране отображаются все 6 заявок.
В пределах одного экрана также оставили блок «Требуют внимания», чтобы пользователь сразу видел задачи, которые ожидают действий.
Отдельно разработали страницу каталога заявок. На неё можно попасть из блока «Популярные заявки» или через кнопку «Создать заявку» на главной странице.
При проектировании учитывали дальнейший рост сервиса: каталог должен оставаться понятным даже при увеличении количества заявок. Важно было
не перегружать страницу и сократить путь до нужного шага — без лишних прокруток и переходов.
Все заявки сгруппировали по жизненным ситуациям: отсутствия и отдых, финансы и платежи, рабочее время, социальные выплаты, справки. Упростили формулировки и добавили короткие пояснения в карточках категорий. В верхней части разместили поиск и блок с популярными заявками для быстрого доступа. Внутри крупных разделов добавили подкатегории с иконками, чтобы быстрее ориентироваться.
Продумали удобное взаимодействие с каталогом в мобильной версии. Увеличили область нажатия до 48px, упростили навигацию и добавили кнопку возврата в верхнюю часть экрана для быстрого перемещения по списку карточек. Поиск закрепили при прокрутке, чтобы он всегда оставался под рукой.
Результат
После обновления дизайна собрали обратную связь от пользователей и оценили, как изменения повлияли на их работу с сервисом.
Сотрудники стали чаще пользоваться новыми функциями. Они положительно оценили новый интерфейс: поиск необходимой информации занимает меньше времени.
Теперь структура главной страницы работает по принципу конструктора: блоки можно свободно перестраивать и дополнять. Интерфейс легче адаптировать под новые процессы без лишних затрат на разработку.
Что дальше?
Работа над «Корпоративным помощником» продолжается. В планах — доработка мобильной версии календаря отсутствий и развитие сценариев оформления заявок. Мы продолжаем сотрудничество в составе команды клиента и работу над другими внутренними сервисами компании.
