Внутренний портал «Балтики»
Разработка и UX/UI-дизайн единого цифрового пространства для команды
«Балтика» — ведущая пивоваренная компания России и один из крупнейших FMCG-производителей
Со временем стало очевидно, что сервис больше не справляется с ролью, которую фактически выполняет. При высокой востребованности сервис оставался сложным и перегруженным, а пользовательский опыт напрямую влиял на скорость работы и общее восприятие платформы.
Пересборка HR-портала
как цифрового продукта
Перед нами стояла задача превратить интерфейс в полноценный цифровой продукт: адаптировать его под разные роли, упростить доступ к сервисам и заложить основу для масштабирования функциональности
Текущая версия имела системные ограничения:
• пользователям было сложно находить нужные функции;
• интерфейс содержал избыточную информацию;
• структура кабинета была перегруженной и неочевидной;
• рабочие и управленческие сценарии смешивались;
• визуальный стиль и компоненты устарели.
В рамках подхода мы разработали полностью новый современный интерфейс (от UX-аналитики до фронтенд-разработки):
• чётко разделили функционал для сотрудников и руководителей с учётом их контекста;
• выстроили навигацию так, чтобы сервисы находились быстро и без пояснений;
• упростили пользовательские пути и сократили лишние действия;
• внедрили систему аналитики для развития продукта на основе реального использования.
В результате HR-портал был переосмыслен как удобный и масштабируемый цифровой продукт, который соответствует своей реальной роли в компании и делает взаимодействие сотрудников и руководителей с корпоративными сервисами проще и эффективнее.
UX-аналитика и cust dev
На этапе UX-аналитики мы сосредоточились на главном — разобраться, какие задачи пользователи действительно решают на HR-платформе и как должен работать сервис, чтобы быть понятным и удобным ещё до начала дизайна и разработки.
Мы детально изучили текущий функционал, собрали ограничения со стороны бэкенда, а также проанализировали, как подобные задачи решаются в других HR-платформах. Интервью и опросы сотрудников помогли понять реальные сценарии использования, основные боли и ожидания от сервиса.
При исследовании мы собрали оптимальное количество данных о пользователях: обратную связь на текущий личный кабинет, контекст, проблемы и задачи, с которыми сотрудники обращаются к сервису.
Далее функциональность была разложена на конкретные пользовательские задачи: мы выделили приоритетные сценарии, пересобрали структуру сервиса и продумали оптимальные пользовательские пути для ключевых действий.
В результате сформировалась единая UX-логика сервиса, которая дала команде чёткое понимание ролей, сценариев и направлений дальнейшего развития.
UX-концепт и UX-проектирование
На этапе UX-проектирования команда перевела сформированную логику в конкретные интерфейсные решения и понятные пользовательские сценарии.
Сначала была сформирована UX-концепция HR-платформы: определены формат сервиса, навигация, логика расположения информации, функциональных блоков и ключевых элементов. Это позволило задать единые принципы взаимодействия и обеспечить целостность пользовательского опыта.
Далее были разработаны макеты заложенных сценариев — от lo-fi wireframes до детализированных дизайн-макетов с проработкой состояний, переходов и логики взаимодействия. Особое внимание уделили мобильному опыту, так как значительная часть пользователей работает с сервисом со смартфонов.
Стандарты и объём проектирования
Разработали макеты ключевых сценариев: от lo-fi wireframes до дизайн-макетов, с детальной проработкой состояний и логики взаимодействия.
UX-тестирование
Для проверки решений команда провела usability-тестирование десктопной и мобильной версий HR-портала с участием пользователей разных ролей. В ходе тестов проверялись ключевые сценарии, навигация и логика взаимодействия с интерфейсом.
Полученная обратная связь позволила выявить проблемные места и точки, где пользовательский путь можно упростить. По результатам тестирования макеты были доработаны: уточнена структура, скорректированы сценарии и улучшено взаимодействие с интерфейсом для более понятного и удобного использования сервиса.
UI-дизайн
На этапе UI-дизайна команда сосредоточилась на том, чтобы визуальный язык сервиса поддерживал логику и сценарии, заложенные на предыдущих этапах, и делал работу с HR-платформой простой и комфортной.
Мы доработали цветовую палитру фирменных цветов, сделав её более современной и функциональной: цвета стали лучше работать с акцентами, состояниями элементов и визуальной иерархией. Это позволило быстрее считывать важную информацию и ориентироваться в интерфейсе.
Отдельное внимание уделили графике. Был разработан единый сет иконок, который помог визуально структурировать функциональные блоки и упростить навигацию. Для выделения ключевых элементов и сценариев внедрили визуальные паттерны и акценты, усиливающие фокус внимания без перегрузки интерфейса.
В результате был сформирован цельный UI-язык HR-платформы — современный, узнаваемый и масштабируемый, который поддерживает рост функциональности и обеспечивает единый визуальный опыт для сотрудников и руководителей на всех устройствах.
Гибкий UI-kit как основа для масштабирования
Обеспечили единый визуальный опыт на всех устройствах, в который консистентно впишутся и будущие решения. Получился цельный UI-язык платформы с правильными акцентами и иерархией информации.
Разработка и интеграция с бэкендом
На этапе создания клиентского слоя HR-платформы мы взяли на себя полный цикл фронтенд разработки, включая подготовку основы для интеграции с бэк-эндом.
Реализовали дизайн-систему и токены в CSS, выстроили структуру компонентов и заложили единые принципы масштабирования интерфейса. Отдельное внимание уделили JS-логике и работе интерфейса в реальных сценариях использования. Верстка была выполнена с учётом кроссплатформенности и кроссбраузерности, чтобы HR-платформа одинаково стабильно работала на разных устройствах и в разных средах.
Для корректной интеграции с серверной частью мы подготовили функциональную и техническую документацию: описали логику работы интерфейса, требования к API и сценарии взаимодействия фронта и бэка.
В результате команда получила устойчивую и масштабируемую фронтенд основу, готовую к интеграции с бэкендом и развитию функциональности без потери качества пользовательского опыта.
Результат
В результате проектной работы HR-платформа была переосмыслена как целостный цифровой продукт, а не набор разрозненных сервисов. Сервис получил понятную структуру, современный интерфейс и выстроенную логику взаимодействия, учитывающую реальные сценарии сотрудников и руководителей.
Обновлённое решение упростило доступ к ключевым функциям, сократило количество лишних действий и снизило порог входа для новых пользователей. Чёткое разделение ролей и сценариев позволило каждому типу пользователей быстрее решать свои задачи, не отвлекаясь на нерелевантную информацию.
Платформа стала масштабируемой: единая UX- и UI-логика, дизайн-система и аналитическая основа позволили команде развивать сервис дальше — добавлять новый функционал и адаптировать его под растущие потребности бизнеса без переработки базовых решений.
В итоге HR-платформа превратилась в удобный и устойчивый цифровой инструмент, который поддерживает ежедневные рабочие процессы, снижает нагрузку на поддержку и соответствует своей реальной роли внутри компании.
