Кейс · 2024—2025 hrbox.io →

HR-tech · B2B SaaS

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

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

РольProduct Designer (solo)

КомандаPO, Frontend, QA, CTO

ПлатформыWeb, Admin, Manager, Mobile

Срок2 года, продолжается

Ролевых интерфейса

120+

Экранов передано в разработку

Дизайнер на весь продукт

12+

Модулей в админ-панели

Контекст

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

Проблема

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

Решение

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

До / После

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

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

До

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

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

После

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

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

Продукт

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

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

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

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

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

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

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

12+ модулей: управление людьми, обучение, опросы, интеграции (API, Telegram, Slack, AD), аналитика.

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

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

Процесс

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

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

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

Архитектура

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

Дизайн

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

Handoff и QA

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

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

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

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

Архитектура

Дизайн-решения

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

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

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

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

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

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

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

12+ разделов. Два режима просмотра команды — карточки с фото и data-dense таблица. Цели, оценка 360°, обратная связь, отчёты.

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

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

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

Сотрудник

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

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

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 размера)

Результаты

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

Платформы на единой дизайн-системе

120+

Экранов передано в разработку

2×

Скорость добавления новых модулей

0→1

Дизайн-система с документацией