Владелец продукта «Цифровые HR-сервисы» торговой сети Пятёрочка
Иван Ефремов
Для торговой сети «Пятёрочка» личный кабинет является одним из главных сервисов для сотрудников. Они используют его на протяжении всего времени работы в компании. Система испытывает высокие нагрузки, а даунтайм критичен для бизнеса. Поэтому развитие этого сервиса — важная задача для торговой сети.

Для реализации этой важной задачи мы выбрали команду студии KTS и Presium. По итогам выполненных работ подтверждаем положительный опыт сотрудничества с коллегами. Важно отметить высокий профессионализм команды, быстрорастущую компетенцию в HR-области, глубокое понимание поставленной задачи, высокую вовлеченность, неравнодушие, энтузиазм и креативный подход на всех этапах разработки.

Особенно ценно для нас, что вместе мы смогли решить сложную организационную задачу мультикомандной разработки. Коллеги также помогают решать задачи, поставленные другим командам. Командный дух студии KTS и Presium соответствует текущему тренду нашей компании, направленной на цифровую трансформацию.
Миссия выполнима:
удобный личный кабинет с цифровыми сервисами
для 230 000 пользователей
2020
Пятёрочка
К объединенной команде интегратора digital-сервисов KTS Studio и дизайн-студии Presium обратились из торговой сети «Пятёрочка». Заказчик поставил задачу переработать личный кабинет, которым пользуются все сотрудники «Пятёрочки»: от руководителей до линейного персонала. Во-первых, сделать его более удобным, во-вторых, облегчить мультикомандную разработку существующих и новых сервисов, в-третьих, перевести на современную технологическую платформу.

В личном кабинете можно следить за графиками и денежными начислениями, подписывать документы, планировать отпуска, заказывать справки и делать многое другое. Количество сервисов постоянно растет: у бизнеса рождаются идеи, а продуктовые команды их оцифровывают.
Единое окно для десятков цифровых сервисов
Федеральный масштаб
От Калининграда до Красноярска
230 000 + активных пользователей
От работников торговых залов до топ-менеджеров
Платформа Openshift
Развертывание на новой микросервисной платформе
Высокие требования к скорости и качеству
Особый фокус на безопасность
Интеграция с системами
SAP, WebTutor, HRO и другими системами, уже внедренными в Пятёрочке
Исследование – Проектирование – Дизайн – Разработка – Итеративный запуск
1
Подготовили карту экранов для сотрудников разных должностей
3
Разобрали схему взаимодействия фронтенда с бэкендом, чтобы выбрать оптимальный способ подключения
2
Составили user story map
для всех сервисов
4
Задокументировали ограничения в реализации нового дизайна
Процесс
Перед проектированием мы совместно с рабочей группой заказчика проанализировали старую версию личного кабинета.
Исследование
SAP HR
Back-end
Front-end
Создали чёрно-белый прототип структуры будущего интерфейса
1
2
На основе прототипа и корпоративного стиля торговой сети разработали полноценный дизайн-концепт
3
Спроектировали техническую архитектуру сервиса
4
Выделили аудиторию для тестирования MVP в одном из регионов. В выборку включили большую часть персонала «Пятёрочки».
Проектирование
Новая версия личного кабинета должна была работать на основе существующего источника данных SAP HR. По этой причине стандартный процесс создания продукта требовалось адаптировать.

Вопрос решили, подключив к команде дизайнеров системного аналитика, который разбирался с системными ограничениями и сразу проектировал реализацию для новых дизайнерских решений.
Дизайн
Арт-директор digital-направления Presium
Владимир Гарднер
Нам было важно сделать доступный и понятный интерфейс, позволяющий сотрудникам быстро и удобно взаимодействовать с системой.

Учитывая количество категорий пользователей и постоянно растущий функционал, в таком проекте не обойтись без дизайн-системы. В основу проекта лег UI kit, который помогает пользователям вырабатывать одинаковые паттерны поведения во всех разделах, а нам — внедренять новые сервисы в минимальные сроки.
Дизайн
Проектирование Реализации
ПРограммирование
Проектирование интерфейса
сооснователь, руководитель Front-end разработки KTS Studio
Сергей Чернобровкин
Позволяет отлавливать большое количество багов еще на этапе сборки проекта, а разработчикам проще понимать, как применять написанные другими компоненты.
Одним из ключевых требований заказчика было исключить возникновение «бутылочного горлышка» при реализации новых сервисов личного кабинета в виде одной единственной команды разработки. Нужно было продумать удобное подключение к разработке новых программистов из неограниченного числа команд. И сделать это так, чтобы заказчик мог с легкостью распределять задачи между командами.

Модульность, гибкость и переиспользование компонентов — основа технологии ReactJS, на которой мы работали в этом проекте. Все компоненты (кнопки, заголовки, формы, календари), которые можно переиспользовать, мы оформили в отдельную библиотеку и перешли на TypeScript.
Перед нами стояла непростая задача: нужно было создать удобный инструмент, которым могли бы пользоваться разные команды. Цель — ускорить разработку отдельных модулей личного кабинета. Основные проблемы, которые нам предстояло решить:

1. Быстрое подключение новых команд. Наш инструмент должен быть простым,
а процесс работы с ним — четким и документированным.

2. Каждая команда должна быть автономной. Нужно, чтобы разработка модулей велась независимо и не требовала нашего времени и ресурсов. Тогда создание модулей личного кабинета будет действительно происходить в параллельном режиме.

3. Безопасность и изоляция кода модулей. Архитектура системы должна быть такой, чтобы модули не могли влиять друг на друга.
Разработка
Front-end: модульность, гибкость
и переиспользование компонентов
Сервисы «Пятёрочки» строятся на микросервисной архитектуре. Вместо того чтобы разрабатывать один большой сервис, который отвечает за весь функционал, создается много небольших. Каждый выполняет свою функцию, взаимодействует с другими сервисами и поддерживается отдельной командой разработки. В этой философии мы сделали бэкенд личного кабинета сервисом интеграции данных из нескольких источников. В ходе пилотирования MVP он был подключен к SAP с помощью OData-API.
Back-end: адаптация под микросервисную архитектуру
Чтобы снизить риски, связанные с переходом на новую версию, заказчик поставил задачу сделать возможным поэтапное включение сервисов по торговой сети. Настройка правил доступа должна быть доступна заказчику. Для этого мы сделали интерфейс администратора, в котором по каждому разделу можно устанавливать правила показа для пользователей.

Мы начали с самых важных и часто посещаемых сервисов у линейного персонала магазинов — аудитории, которую выделили для тестирования MVP. Это «Деньги» и «График работы». Прочие сервисы мы сразу заложили в структуру нового личного кабинета. Некоторые поместили внутрь пользовательского профиля, другие — в колонку меню с левой стороны. По мере готовности ссылки на разделы в старом личном кабинете заменяли на новые.
Итеративный запуск
Новый личный кабинет
Было / Стало
Интерфейс личного кабинета был организован как витрина сервисов из готовых элементов в виде плиток. Пользователям было сложно ориентироваться в личном кабинете и находить то, что им нужно.

Мы сделали интерфейс модульным, выделив пять основных функциональных блоков, которые структурируют разрозненные сервисы.
Новый подход к группировке сервисов
Разделы
В боковом меню разместили разделы с однородным контентом (например, все сервисы, связанные с отпусками).
Виджеты
Информация, которая
должна быть на виду, выводится в виджетах.
Задачи
Если руководителю или компании требуется, чтобы сотрудник выполнил какие-то действия, они добавляются в раздел задач
Заявки
Если сотруднику нужно получить согласование по рабочему или личному вопросу, то это происходит с помощью подачи заявок
Уведомления
Оповещения от сервисов личного кабинета выводятся на сайте и приходят в формате push-уведомлений в мобильном приложении
Разделы
В боковом меню разместили разделы с однородным контентом (например, все сервисы, связанные с отпусками).
Виджеты
Информация, которая должна быть на виду, выводится в виджетах.
Задачи
Если руководителю или компании требуется, чтобы сотрудник выполнил какие-то действия, они добавляются в раздел задач
Заявки
Если сотруднику нужно получить согласование по рабочему или личному вопросу, то это происходит с помощью подачи заявок
Уведомления
Оповещения от сервисов личного кабинета выводятся на сайте и приходят в формате push-уведомлений в мобильном приложении
Разделы
В боковом меню разместили разделы с однородным контентом (например, все сервисы, связанные с отпусками).
Виджеты
Информация, которая
должна быть на виду, выводится в виджетах.
Задачи
Если руководителю или компании требуется, чтобы сотрудник выполнил какие-то действия, они добавляются в раздел задач
Заявки
Если сотруднику нужно получить согласование по рабочему или личному вопросу, то это происходит с помощью подачи заявок
Уведомления
Оповещения от сервисов личного кабинета выводятся на сайте и приходят в формате push-уведомлений в мобильном приложении
Названия всех разделов мы сделали простыми, ориентируясь на самый массовый сегмент пользователей сервиса — работников торговых точек. Так, например, раздел «Расчетные листы» в новой версии называется просто «Деньги».
Перепридумываем сервисы
Мы свели эту информацию в общий график, чтобы сотрудник в одном месте видел, какую долю составляют начисления, а какую удержания.

И в мобильной, и в десктопной версии личного кабинета мы использовали графики — такой формат привычен пользователям по банковским приложениям.
Деньги
В предыдущей версии личного кабинета можно было посмотреть расчетный лист за каждый месяц
и отдельно начисления, списания и выплаты.
Мы свели эту информацию в общий график, чтобы сотрудник в одном месте видел, какую долю составляют начисления, а какую удержания.

И в мобильной, и в десктопной версии личного кабинета мы использовали графики — такой формат привычен пользователям по банковским приложениям.
Деньги
В предыдущей версии личного кабинета можно было посмотреть расчетный лист за каждый месяц и отдельно начисления, списания и выплаты.
В мобильной версии
мы уменьшили календарь
и вывели смены сразу
после календаря.
График работы
Продавцы-кассиры
и большинство сотрудников магазинов работают посменно.
Им важно знать свой график выхода на работу.
В мобильной версии мы уменьшили календарь и вывели смены сразу после календаря.
График работы
Продавцы-кассиры и большинство сотрудников магазинов работают посменно. Им важно знать свой график выхода на работу.
Лайфхаки
Наша команда поддерживает core-функционал личного кабинета. Внедряем новые сервисы сами и помогаем встраиваться в личный кабинет другим командам: ведем библиотеку блоков для фронтенда и подключаем сторонних разработчиков. Вот что мы сделали, чтобы это выходило быстрее и лучше.
Ускоряем собственную работу
и мультикомандную разработку
Оптимизировали коммуникацию с клиентом и разработку внутри собственной команды
Roadmap
Разделение на группы
Кроссфункциональные команды
Чтобы рабочий процесс был прозрачен и понятен всем: и клиенту, и команде разработчиков. Этой же цели служат еженедельные отчеты по всем блокам работ.
Группа проектирования отвечает за согласование приоритетов со всеми сторонами проекта, максимальную детализацию требований, дизайн и подробную проработку интеграций. Группа продакшена отвечает за быстрый переход от макетов к запуску функционала в продакшен. Работа стала эффективнее и оперативнее. Команда проектирования занимается одновременно несколькими новыми разделами, которые дальше идут в план продакшена, согласования при этом не замедляют разработку.
Каждая команда параллельно разрабатывает разные разделы. Это удобнее, чем общими силами последовательно делать по одному разделу. Процесс разработки стал намного быстрее.
1. Составили roadmap по запуску новых сервисов
2. Выделили внутри нашей команды две группы: проектирование и продакшен
3. Выделили внутри группы продакшена две кроссфункциональные команды
Дизайн-система
Правила встраивания сервисов
Упростили проектирование дизайна
Это набор готовых элементов и блоков для быстрого создания новых пользовательских интерфейсов. Преимущество, которое дизайн-система дает дизайн-командам вместе со скоростью — способность проектировать дизайн так, чтобы он органично сочетался с общим стилем личного кабинета.
— Заявочные сервисы встраиваются в кнопку действия.

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

— Ссылки на внешние сервисы добавляются плашкой в разделе корпоративных сервисов.

— Если в разделе есть информация, которую пользователь должен увидеть в приоритетном порядке, она выводится в виджете или промо-блоке (баннеры и важные действия).
1. Сформировали дизайн-систему
2. Определили варианты и правила встраивания новых сервисов в интерфейс
Федерация модулей
Развертывание ветвей проекта
Таргетинг
Документация
Библиотека компонентов
Оболочка
Ускорили подключение новых разработчиков
Мы выделили «Оболочку», которая позволяет командам быстро встраивать в личный кабинет новые сервисы и разделы, которые они создали. Ориентировались на удобство разработки приложений для соцсетей — наша студия делает много таких приложений. Каждая команда получает собственную «Оболочку». Подключив к ней свой модуль и запустив итоговую сборку, разработчики тут же видят, как новый сервис будет выглядеть в рамках всего личного кабинета.
Для удобства новых разработчиков, в том числе сторонних. Подобно тому, как UI kit ускоряет проектирование дизайна, библиотека компонентов ускоряет разработку.
1. Создали свою «Оболочку»
Чтобы по предыдущим двум шагам точно не осталось никаких вопросов.
2. Подготовили библиотеку компонентов
3. Написали документацию
сооснователь, руководитель Front-end разработки KTS Studio
Сергей Чернобровкин
Мы разработали набор утилит и компонентов, из которых можно быстро и унифицированно собирать модули личного кабинета. Для встраивания этих модулей в основной проект был собран отдельный пакет с подходящим названием «Ядро». Он служит каркасом приложения и шиной общих данных для всех модулей.

Ядро используется как в основном проекте, так и в режиме разработки модулей-разделов. Подключая его, разработчики видят свой раздел в интерфейсе личного кабинета, который полностью эмулирует работу продакшен-версии. Принятые решения и разработанные пакеты позволили нам сделать гибкий инструмент для ускорения и упрощения разработки системы в целом.
Сначала сторонние команды должны были передавать каждое обновление своих модулей нам для включения в общую сборку. Чтобы ускорить процесс обновления, мы внедрили схему, при которой действия с нашей стороны требуются только при первичном встраивании компонента. Когда модули обновляются, новая версия подтягивается в общую сборку автоматически.
4. Внедрили федерацию модулей (module federation) для включения реакт-компонентов
Чтобы команды не мешали друг другу, для каждого нового модуля разворачивается своя копия основного сервиса, доступная по отдельному адресу. Так можно тестировать функционал от разных команд независимо друг от друга.
Чтобы проводить пилотные запуски новых сервисов и разделов для разных групп пользователей, мы настроили их таргетирование на выделенную аудиторию.
5. Запустили гибкую систему развертывания ветвей проекта
6. Предусмотрели таргетинг при пилотировании
Оптимизировали коммуникацию с клиентом и разработку внутри собственной команды
Roadmap
Разделение на группы
Кроссфункциональные команды
Чтобы рабочий процесс был прозрачен и понятен всем: и клиенту, и команде разработчиков. Этой же цели служат еженедельные отчеты по всем блокам работ.
Группа проектирования отвечает за согласование приоритетов со всеми сторонами проекта, максимальную детализацию требований, дизайн и подробную проработку интеграций. Группа продакшена отвечает за быстрый переход от макетов к запуску функционала в продакшен. Работа стала эффективнее и оперативнее. Команда проектирования занимается одновременно несколькими новыми разделами, которые дальше идут в план продакшена, согласования при этом не замедляют разработку.
Каждая команда параллельно разрабатывает разные разделы. Это удобнее, чем общими силами последовательно делать по одному разделу. Процесс разработки стал намного быстрее.
1. Составили roadmap по запуску новых сервисов
2. Выделили внутри нашей команды две группы: проектирование и продакшен
3. Выделили внутри группы продакшена две кроссфункциональные команды
Дизайн-система
Правила встраивания сервисов
Упростили проектирование дизайна
Это набор готовых элементов и блоков для быстрого создания новых пользовательских интерфейсов. Преимущество, которое дизайн-система дает дизайн-командам вместе со скоростью — способность проектировать дизайн так, чтобы он органично сочетался с общим стилем личного кабинета.
— Заявочные сервисы встраиваются в кнопку действия.

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

— Ссылки на внешние сервисы добавляются плашкой в разделе корпоративных сервисов.

— Если в разделе есть информация, которую пользователь должен увидеть в приоритетном порядке, она выводится в виджете или промо-блоке (баннеры и важные действия).
1. Сформировали дизайн-систему
2. Определили варианты и правила встраивания новых сервисов в интерфейс
Федерация модулей
Развертывание ветвей проекта
Таргетинг
Документация
Библиотека компонентов
Оболочка
Ускорили подключение новых разработчиков
Мы выделили «Оболочку», которая позволяет командам быстро встраивать в личный кабинет новые сервисы и разделы, которые они создали. Ориентировались на удобство разработки приложений для соцсетей — наша студия делает много таких приложений. Каждая команда получает собственную «Оболочку». Подключив к ней свой модуль и запустив итоговую сборку, разработчики тут же видят, как новый сервис будет выглядеть в рамках всего личного кабинета.
Для удобства новых разработчиков, в том числе сторонних. Подобно тому, как UI kit ускоряет проектирование дизайна, библиотека компонентов ускоряет разработку.
1. Создали свою «Оболочку»
Чтобы по предыдущим двум шагам точно не осталось никаких вопросов.
2. Подготовили библиотеку компонентов
3. Написали документацию
сооснователь, руководитель Front-end разработки KTS Studio
Сергей Чернобровкин
Мы разработали набор утилит и компонентов, из которых можно быстро и унифицированно собирать модули личного кабинета. Для встраивания этих модулей в основной проект был собран отдельный пакет с подходящим названием «Ядро». Он служит каркасом приложения и шиной общих данных для всех модулей.

Ядро используется как в основном проекте, так и в режиме разработки модулей-разделов. Подключая его, разработчики видят свой раздел в интерфейсе личного кабинета, который полностью эмулирует работу продакшен-версии. Принятые решения и разработанные пакеты позволили нам сделать гибкий инструмент для ускорения и упрощения разработки системы в целом.
Сначала сторонние команды должны были передавать каждое обновление своих модулей нам для включения в общую сборку. Чтобы ускорить процесс обновления, мы внедрили схему, при которой действия с нашей стороны требуются только при первичном встраивании компонента. Когда модули обновляются, новая версия подтягивается в общую сборку автоматически.
4. Внедрили федерацию модулей (module federation) для включения реакт-компонентов
Чтобы команды не мешали друг другу, для каждого нового модуля разворачивается своя копия основного сервиса, доступная по отдельному адресу. Так можно тестировать функционал от разных команд независимо друг от друга.
Чтобы проводить пилотные запуски новых сервисов и разделов для разных групп пользователей, мы настроили их таргетирование на выделенную аудиторию.
5. Запустили гибкую систему развертывания ветвей проекта
6. Предусмотрели таргетинг при пилотировании
Сооснователь KTS Studio
Максим Павлов
Разработка личного кабинета стала для нашей компании новым вызовом, с которым мы, на мой взгляд, отлично справились. Продукт оказался востребованным не только у HR «Пятёрочки». Заказчики из других подразделений торговой сети приходят к нам с задачами добавления новых цифровых сервисов в личный кабинет сотрудника.

Благодаря принципам мультикомандной разработки новые сервисы внедряются быстро и увеличивают общую ценность продукта, которая привлекает новых заказчиков и пользователей. Я считаю это главным показателем успеха запуска корпоративного продукта.
5 продуктовых команд
Подключено к разработке
15 сервисов
для 10 заказчиков
Запущено силами KTS и Presium
8 сервисов
Реализуют сторонние команды
Профиль
Электронные документы и подпись
Микросервис рассылки push-уведомлений
Просмотр больничных
Просмотр и планирование отпусков
Интеграция с мобильным приложением
Интеграция с модулем управления сменами сотрудников
Подача заявок
Задачи сотрудника
Сервис управления командой
Мультикомандность
Торговая сеть «Пятёрочка» может развивать обновленный личный кабинет самостоятельно или привлекая сторонние команды. Он полностью адаптирован для скоростной мультикомандной разработки.

Новые сервисы собираются и встраиваются в готовую оболочку как конструктор, а продуманные процессы обеспечивают удобный онбординг для команд.
Готовые компоненты
Вместо того чтобы создавать все с нуля, дизайнеры переиспользуют готовые элементы из UI kit, разработчики — из библиотеки компонентов.

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

Создание, тестирование и запуск сервисов стали проще и быстрее.
Простота и удобство
Для пользователя личный кабинет — удобный цифровой продукт. Простые интерфейсы, дэшборд с логично сгруппированными сервисами и виджеты значительно упростили поиск нужной информации.

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

Несмотря на то, что над сервисами работают разные команды, мы обеспечили консистентность пользовательского опыта в каждом из них.
Результат
Для всех этих сервисов мы создали новый дизайн, некоторые подвергли реинжинирингу, помогая менять бизнес-процесс в основе. KTS обеспечивает техподдержку сторонних разработчиков и с каждым новым сервисом наращивает библиотеку готовых блоков. Подключение команд и разработка становятся еще быстрее.
В новом личном кабинете уже запущено более 10 сервисов
Готовые компоненты
Вместо того чтобы создавать все с нуля, дизайнеры переиспользуют готовые элементы из UI kit, разработчики — из библиотеки компонентов.

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

Создание, тестирование и запуск сервисов стали проще и быстрее.
Простота и удобство
Для пользователя личный кабинет — удобный цифровой продукт. Простые интерфейсы, дэшборд с логично сгруппированными сервисами и виджеты значительно упростили поиск нужной информации.

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

Несмотря на то, что над сервисами работают разные команды, мы обеспечили консистентность пользовательского опыта в каждом из них.
Мультикомандность
Торговая сеть «Пятёрочка» может развивать обновленный личный кабинет самостоятельно или привлекая сторонние команды. Он полностью адаптирован для скоростной мультикомандной разработки.

Новые сервисы собираются и встраиваются в готовую оболочку как конструктор, а продуманные процессы обеспечивают удобный онбординг для команд.
У Вас похожая проблема?
Оставьте контакты, мы сможем подобрать решение
Не хотите писать? Позвоните нашему менеджеру по телефону +7(495) 308–38–15 и расскажите про ваш проект