HR-tech · B2B SaaS
HRBOX — связать сложную HR-платформу в единую систему
Разные роли, разные задачи, один продукт. Моя работа над ролевой навигацией, сценариями администратора и общей дизайн-системой.
Разные роли, разные задачи, один продукт. Моя работа над ролевой навигацией, сценариями администратора и общей дизайн-системой.
Продукт рос быстро — новые модули, новые роли, новые сценарии. Но единой системы не было: каждый раздел выглядел по-своему, навигация усложнялась, а разработка тратила время на изобретение компонентов заново.
Интервью и аудит: сотруднику нужны повседневные действия под рукой, администратору — карта глубоких настроек. Это легло в основу ролевой архитектуры.
Информационная архитектура, навигационные модели, user flows для ключевых сценариев.
Дизайн-система с нуля, компонентная библиотека, экраны для 4 ролевых интерфейсов.
Спеки для фронтенда, ревью реализации, баг-репорты по UI, итерации после фидбэка.
Фиксированный календарь управлял каждым этапом KPI-цикла. Даже после согласования карты сотрудник не мог добавить цели, пока не наступала дата следующего этапа.
Одним клиентам были нужны строгие даты: модуль выпускался по гарантийному письму. Другим было важно продолжать процесс сразу после выполнения обязательного действия.
Разделить период на два режима: фиксированный график и переход по действию, где даты работают как дедлайны. Во втором режиме согласование, простановка результата или другое конечное действие открывает следующий этап.
Текущая карта KPI с демонстрационными данными. Предложение относится к логике периода, внутри которого работает эта карта.
Библиотека целей · Переиспользуемый шаблон объединяет единицы измерения, тип формулы и шкалу результативности.
Админ-панель — 8 крупных модулей с подмодулями до 3 уровней. Чтобы новый администратор не потерялся, пошаговый онбординг из 12 шагов ведёт через ключевые настройки, а полная карта архитектуры открывается через toggle «Раскрыть всё».
Архитектура
Трек развития — это не только курс. Он объединяет задачи сотрудника и наставника, обучение, чек-листы, опросы и встречи в одном сценарии.
Администратору нужно собрать длинную программу и при этом видеть последовательность, ответственных и логику завершения. Плоский список быстро становится сложным для проверки и поддержки.
Я сгруппировала активности по модулям, сохранила видимый порядок и собрала настройки каждого шага в одном рабочем пространстве. Администратор может проверить весь сценарий, не теряя его структуру.
Развитие и адаптация
Экран в продакшене · Я собрала прототип по требованиям, внесла правки после ревью продакта и финализировала визуальную часть в коде перед ревью фронтенда.
При переезде каталога в новый продукт старая настройка позволяла администратору оформлять каждую категорию и страницу отдельно: текст, картинка, текст с картинкой, крупная плитка, мелкая — и картинки любых пропорций.
Продукт просил перенести старые варианты как есть, чтобы клиентам не перерисовывать контент. Я настаивала на одном формате отображения и одной пропорции картинок. Тот раунд я проиграла: каталог вышел со всеми старыми вариантами.
В поддержку постоянно приходили одни и те же вопросы: какой формат картинки использовать и как переключить вариант отображения, ничего не сломав. С этими доказательствами я вернулась к предложению, и оно прошло: один формат, одна пропорция. Клиентам это преподнесли как фичу — все картинки теперь выглядят единообразно, — и ни один клиент не спросил, что ему теперь перерисовывать. В проде это стоило нам минимальных правок, а клиенты получили более простой и более функциональный каталог.
Платформа прошла путь от MVP без системного дизайна до структурированной экосистемы с единой дизайн-системой.
Разные шрифты, отступы и паттерны навигации в каждом разделе. Фронтенд писал UI на глаз. Новые модули добавлялись без единых правил.
Единая типографика, spacing, компонентная библиотека. Каждая роль — своя навигация, но один визуальный язык. Общие компоненты стали основой для новых модулей.
Каждая роль видит свой интерфейс с подходящей навигацией и набором инструментов. Под капотом — общая дизайн-система и единые паттерны.
Новости, заявки, курсы обучения, корпоративный магазин с валютой HRN, достижения, календарь.
Структура команды, треки развития и адаптации сотрудников, KPI сотрудников, цели и OKR, оценка 360°, обратная связь и отчёты.
12+ модулей: управление людьми, KPI сотрудников, обучение, опросы, КЭДО, сертификаты и комплаенс, интеграции и аналитика.
iOS / Android. Авторизация по QR, лента новостей, библиотека и заявки на книги, календарь и push-уведомления.
Сводные метрики, вкладки «Активные / Пройденные / Неактивные», статусы дедлайнов и индикаторы прогресса — на одном экране.
iOS и Android. Авторизация по домену или QR-коду. Лента новостей, каталог библиотеки и заявки на книги, календарь, реакции и комментарии.
Контакты и личные данные
Лента, виджеты, активность
Детали события и запись
Каталог и заказ товаров
Создана с нуля. Токены, компоненты со всеми состояниями, документация для фронтенда и QA — плюс Storybook для библиотеки Vue-компонентов, который я собрала и веду сама, чтобы у дизайна и кода был один источник правды.
Indigo primary · Slate neutrals · Цвета настраиваются клиентом
Говорила бы с пользователями с первого дня. Когда я пришла, позиция была: «исследования нам не нужны — мы сами HR и знаем, что нужно». Со временем мы с командой пришли к обратному: кастдев-интервью с клиентами по модулю обучения стали нормой, задали направление следующей итерации системы обучения — и стали отправной точкой Нанабуш, отдельной платформы обучения, которую я сейчас проектирую.