← Яна Прокудина · Все кейсы
HR-tech · B2B SaaS

HRBOX — единая платформа для управления людьми

Экосистема из 4 ролевых интерфейсов, единой дизайн-системы и 120+ экранов. Два года работы — от редизайна MVP до разработки новых модулей.

РольProduct Designer (solo)
КомандаPO, Frontend, QA, CTO
ПлатформыWeb, Admin, Manager, Mobile
Срок2 года, продолжается
Главная страница портала сотрудника HRBOX: новости, HRN и достижения
4
Ролевых интерфейса
120+
Экранов передано в разработку
1
Дизайнер на весь продукт
12+
Модулей в админ-панели
Контекст

Задача и подход

Проблема

Продукт рос быстро — новые модули, новые роли, новые сценарии. Но единой системы не было: каждый раздел выглядел по-своему, навигация усложнялась, а разработка тратила время на изобретение компонентов заново.

Решение

  • Аудит текущего продукта и карта болевых точек по ролям
  • Единая дизайн-система с токенами, компонентами и гайдлайнами
  • Пересборка информационной архитектуры для 4 ролей
  • Редизайн 120+ экранов с последовательным handoff
  • Pixel-perfect контроль реализации
До / После

Как изменился продукт

Платформа прошла путь от MVP без системного дизайна до структурированной экосистемы с единой дизайн-системой.

До
Legacy HRBOX interface before redesign

MVP без дизайн-системы

Разные шрифты, отступы и паттерны навигации в каждом разделе. Фронтенд писал UI на глаз. Новые модули добавлялись без единых правил.

После
HRBOX employee profile after redesign

Системный редизайн

Единая типографика, spacing, компонентная библиотека. Каждая роль — своя навигация, но один визуальный язык. Скорость добавления модулей выросла вдвое.

Продукт

4 интерфейса — одна система

Каждая роль видит свой интерфейс с подходящей навигацией и набором инструментов. Под капотом — общая дизайн-система и единые паттерны.

Портал сотрудника HRBOX

Портал сотрудника

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

Настройка трека развития и адаптации в HRBOX

Кабинет руководителя

Структура команды, треки развития и адаптации сотрудников, KPI сотрудников, цели и OKR, оценка 360°, обратная связь и отчёты.

Центр аналитики в админ-панели HRBOX

Админ-панель

12+ модулей: управление людьми, KPI сотрудников, обучение, опросы, КЭДО, сертификаты и комплаенс, интеграции и аналитика.

Библиотека в мобильном приложении HRBOX

Мобильное приложение

iOS / Android. Авторизация по QR, лента новостей, библиотека и заявки на книги, календарь и push-уведомления.

Процесс

Как строилась работа

01

Исследование

Интервью, аудит текущего продукта, CJM по каждой роли, карта болевых точек.

02

Архитектура

Информационная архитектура, навигационные модели, user flows для ключевых сценариев.

03

Дизайн

Дизайн-система с нуля, компонентная библиотека, экраны для 4 ролевых интерфейсов.

04

Handoff и QA

Спеки для фронтенда, ревью реализации, баг-репорты по UI, итерации после фидбэка.

Админ-панель

Архитектура всей платформы

8 крупных модулей с глубокой вложенностью. Пошаговый онбординг из 12 шагов для новых администраторов.

HRBOX admin architecture map Архитектура
HRBOX analytics center
HRBOX KPI and survey period settings
HRBOX requests and workflow interface
Дизайн-решения

Как принимались решения

Навигация по ролям

У платформы 4 типа пользователей с разным контекстом. Вместо одного перегруженного меню — отдельная навигация для каждой роли. Сотрудник видит 3 таба (дом, люди, портфель), руководитель — 12 пунктов с разделами, админ — 8 модулей с глубокой вложенностью. Переключение между ролями — через footer sidebar.

Масштабирование админки

Админ-панель содержит 8 крупных модулей с подмодулями до 3 уровней глубины. Чтобы новый администратор не потерялся — спроектирован пошаговый онбординг из 12 шагов, который ведёт через ключевые настройки. Полная карта архитектуры доступна через toggle «Раскрыть всё».

Руководитель

Инструменты управления и развития команды

12+ разделов. Треки развития и адаптации объединяют задачи сотрудника и наставника, обучение, чек-листы, опросы и встречи в одном сценарии. Новый модуль KPI добавляет периоды, библиотеку целей, цели с весами, статусы и итоговые результаты.

Manager team cards view
Manager team structure table view
Конструктор программы развития и адаптации Развитие и адаптация
Портал сотрудника

Точка входа для всех в компании

Заявки с категориями, каталог курсов, корпоративный магазин с внутренней валютой HRN, система достижений.

Employee portal dashboard overview Сотрудник
Обучение · LMS

Прогресс и дедлайны — на одном экране

Data-dense интерфейс обучения сотрудника: сводные метрики, вкладки «Активные / Пройденные / Неактивные», статусы дедлайнов и круговые индикаторы прогресса.

Раздел Мои обучения в HRBOX: метрики, статусы и прогресс
Мобильное приложение

Мобильный доступ к платформе

iOS и Android. Авторизация по домену или QR-коду. Лента новостей, каталог библиотеки и заявки на книги, календарь, реакции и комментарии.

Профиль сотрудника в мобильном приложении

Профиль

Контакты и личные данные

Главная лента и виджеты в мобильном приложении

Главная

Лента, виджеты, активность

Карточка события в мобильном календаре

Календарь

Детали события и запись

Корпоративный магазин в мобильном приложении

Магазин

Каталог и заказ товаров

Дизайн-система

Единая система на все платформы

Создана с нуля. Токены, компоненты со всеми состояниями, документация для фронтенда и QA.

Палитра

Indigo primary · Slate neutrals · Цвета настраиваются клиентом

Типографика

Heading · Lato SemiBold · 16px
Сотрудники и доступ
Body · Lato Regular · 14px
Основной текст интерфейса, оптимизирован для чтения в таблицах и формах.

Компоненты

Sidebar + Tab Navigation
Data Tables + Sorting
Cards (сотрудники, курсы, товары)
Status Badges (6 состояний)
Forms, Modals, Combobox
Buttons (5 типов × 4 размера)
Результаты

Что изменилось

Быстрее выходят новые модули
Меньше обращений в поддержку после редизайна навигации
40+
Компонентов в дизайн-системе — используют 6 инженеров
100%
Паритет мобильного приложения с вебом по функциям