Моя роль
Продуктовый дизайнер
Платформы
Web, iOS, Android
О проекте
Корпоративный портал IT-компании ЛАНИТ-ТЕРКОМ. В нём можно вносить рабочие часы и фиксировать отсутствие, бронировать рабочее место, искать контакты коллег и информацию о проектах и департаментах, а также есть специальные сервисы для руководителей и HR-специалистов.
Цели проекта
Упростить процесс внесения рабочих часов, снизить нагрузку на HR-департамент и собрать в одном месте актуальную информацию об устройстве компании.
Редизайн и мобильные версии
Проблема
• У проекта накопился дизайн-долг: для одинаковых задач использовались разные компоненты, типографика и отступы, элементы UI-кита дублировались и могли отличаться мелкими деталями, а визуальный стиль слабо связывался с брендом компании.
• Резиновая вёрстка плохо работала на больших разрешениях, текстовые строки становились слишком длинными, а таблицы полупустыми.
Решение
• Оптимизировал UI-кит и привёл интерфейс к общей системе: объединил повторяющиеся компоненты и добавил недостающие, стандартизировал типографику, отступы и цвета, а новую визуальную основу взял из брендбука компании.
• Ввёл фиксированную рабочую область для десктопа, что сделало текст более читаемым, а таблицы более скомпонованными.
1. Основной флоу сервиса до и после редизайна
Основная задача была в систематизации интерфейса и устранении накопившихся визуальных расхождений. Так как большинство сервисов решали свои задачи, вносились только минорные изменения в логику их работы.
Акцентный и часть дополнительных цветов взял из брендбука Ланит-Теркома, так портал визуально стал ближе к компании. Также сократил количество стилей и сделал интерфейс спокойнее.
2. UI-кит
В старых макетах одинаковые по смыслу элементы могли отличаться друг от друга. Систематизировал UI-кит, чтобы новые экраны не продолжали накапливать такие расхождения.
Посмотрев на подход крупных дизайн-систем, я пересобрал часть компонентов, сведя их к общему мастер-компоненту. Это упростило работу с макетами, а разработчики стали реже возвращаться с уточнениями.
3. Новая вёрстка
Я проверил, как ведут себя разные сервисы на разрешениях 1920+ px. Стало понятно, что растягивать рабочую область смысла нет, так как свободного места становится больше, но интерфейс от того не становится удобнее.
После обсуждения с командой и тестов остановились на фиксированной рабочей области в 1136 px.
4. iOS и Android версии портала
Мобильные версии появились далеко не сразу, команда веб-разработки была загружена, и нам дали Android и iOS-разработчиков. За основу были взяты ключевые сервисы, а именно: учёт времени, сотрудники, проекты и департаменты.
Android-версию собирал быстро, поэтому интерфейс получился ближе к вебу. На iOS времени было больше, поэтому получилось лучше адаптировать его под нативные паттерны. Также добавили пуши с напоминанием о рабочих часах и переходом сразу в нужный сервис.
Результат
• Перевёл 50+ макетов на новый визуальный подход. Новые сервисы уже проектировались на этой основе.
• Передача макетов в разработку стала проще и предсказуемее, разработчики стали реже возвращаться с уточняющими вопросами.
• Дизайн-долга стало меньше, а новые сервисы стало собирать проще и быстрее.
• Четыре базовых сервиса появились на Android и iOS и дошли до бета-тестирования на 20+ сотрудников на каждой платформе.
Календарь отпусков
Проблема
• В разных подразделениях процесс планирования отпусков отличался, поэтому данные собирались в разных форматах, а менеджерам приходилось вручную проверять заполнение.
• При планировании отпуска часто допускались ошибки, так как нужно было учитывать продолжительность отпуска, доступные дни, праздники и пересечения периодов.
• Стандартных календарей по департаментам и проектам не всегда хватало руководителям.
Решение
• Сохранил привычную табличную модель в общем для всех сервисе. Пользователи продолжили работать в знакомом формате, а данные стали собираться по единым правилам.
• Собрал все периоды отпусков за год в одной форме и добавил автоматическую проверку ограничений. Ошибки показывались сразу при заполнении, а некорректный план нельзя было сохранить.
• Добавил кастомные календари, где можно было собрать нужную группу сотрудников и сохранить её отдельной вкладкой.
1. Первый вход в сервис
За основу оставил таблицу на весь год, так как такой формат был уже привычен сотрудникам, а ещё он хорошо показывает общую картинку отпусков по команде.
Для руководителей было важно видеть год целиком для сравнения отпусков сотрудников между собой. На тестах попросили дать возможность быстрее переходить к нужному месяцу, поэтому добавил навигацию по месяцам.
2. Внесение запланированного отпуска
Изначально я хотел добавлять по одному периоду отпуска через интерактивный календарь, но тогда ошибки пришлось бы искать уже после заполнения отпуска за год, поэтому планирование идёт через одну форму.
Проверки работают прямо во время заполнения. Система учитывает доступные дни, обязательный объем и наличие двухнедельного отпуска, праздники и пересечения дат и не позволяет сохранить план с ошибками.
3. Настройка календаря
Базовых календарей по департаментам и проектам оказалось недостаточно, так как руководителям иногда нужно было отслеживать отдельные группы сотрудников из разных подразделений.
По их запросу я добавил кастомные календари. Нужных сотрудников можно собрать один раз, настроить подгруппы и сохранить отдельной вкладкой.
4. Финальная версия календаря
Изначально сервис должен был показывать только запланированные отпуска, но позже решили дополнить календарь данными из «Учёта времени», чтобы руководителю не приходилось отдельно сверять несколько источников.
В итоге в календаре стали отображаться фактические отпуска, больничные, отгулы и обучения. Предупреждения о пересечениях оставили на следующие версии, чтобы сначала проверить базовый сценарий в работе.
Результат
• Сервис успешно протестировали в двух подразделениях, а позже масштабировали на всю компанию, придя к единой системе планирования отпуска.
• В одном календаре появились запланированные и фактические отпуска и все виды отсутствий, благодаря чему руководителям больше не нужно было сверять данные из нескольких сервисов.
• Проверка ограничений стала автоматической: ошибки показывались во время заполнения, а план с ошибками нельзя было сохранить. Менеджерам больше не нужно перепроверять их вручную.
• Отдел кадров получил единый источник данных и общий формат выгрузки вместо информации, которую разные подразделения собирали по-разному.
