Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

Всем привет! Меня зовут Максим Павлов, я управляющий партнёр KTS. Рассказываю, как мы разработали удобный HR-сервис для 260 тысяч пользователей на базе SAP, который легко развивать и масштабировать. Что? Да!

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

Зачем компаниям личный кабинет сотрудника

В крупных компаниях с большим штатом личный кабинет сотрудника решает две важные задачи.

  • Это «единое окно» HR-сервисов, где работник может быстро и удобно решать личные и рабочие дела: получать справки, оформлять отпуск и больничный, посмотреть график работы, выплаты и начисления и т.д.
  • Это канал коммуникации, через который компания доносит до своих людей важную информацию.

С течением времени сервисов появляется все больше, и структура так разрастается, что ориентироваться в ней становится неудобно. Сотрудники стараются лишний раз не заходить в личный кабинет, задачи HR-департамента «теряются» или откладываются. С возникновением каждой новой функции ситуация только усугубляется.

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

В 2019 году к нам обратились заказчики из торговой сети «Пятёрочка». Там уже несколько лет развивали личный кабинет сотрудника на технологии SAP UI5. По сути он представлял собой список HR-сервисов, которые обрабатывались в SAP HR.

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

Заказчики предложили решить две проблемы, которые возникли в процессе расширения личного кабинета.

  • Плиток-сервисов стало много, и пользователи перестали с легкостью ориентироваться в их списке.
  • У компании есть постоянная потребность в новых сервисах, но скорость их запуска была ограничена возможностями одной команды.

Исходя из этого мы сформулировали для себя две глобальные задачи. Первая — сделать структуру личного кабинета расширяемой без нагромождения. Вторая — сделать возможной и удобной мультикомандную разработку.

Чтобы личный кабинет не превратился в “простыню” плиток или вкладок, нужно выделить базовые элементы, которые будут переиспользоваться во многих сервисах.

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

За работу над всем этим мы взялись вместе с дизайн-командой студии Presium.

Максим Павлов, управляющий партнёр KTS

Разрабатываем новую структуру личного кабинета

На старте мы с коллегами провели исследование и по результатам подготовили карту экранов для сотрудников разных должностей. Затем составили user story map для всех сервисов.

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

После этого мы создали черно-белый прототип структуры будущего интерфейса и на его основе разработали полноценный дизайн-концепт в фирменном стиле «Пятёрочки».

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

В новом интерфейсе мы выделили пять основных функциональных блоков, которые структурируют все сервисы.

1. Разделы. В боковом меню мы разместили разделы с однородным контентом, например, все сервисы, связанные с отпусками или деньгами.

2. Виджеты. Информация, которая должна быть на виду, выводится в виджетах.

3. Задачи. Если руководителю или компании требуется, чтобы сотрудник выполнил какие-то действия, они добавляются в раздел задач.

4. Заявки. Если сотруднику нужно получить согласование по рабочему или личному вопросу, это происходит с помощью заявок.

5. Уведомления. Оповещения от сервисов личного кабинета выводятся на сайте и приходят в формате push-уведомлений в мобильном приложении.

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

Запускаем конструктор сервисов

Над новыми сервисами работают продуктовые команды самой «Пятёрочки», команды из управляющей компании X5 Retail Group, а также внешние подрядчики. Для всех этих (и будущих) команд мы сделали полноценный конструктор, который позволяет быстро собирать новые сервисы и встраивать их в личный кабинет.

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

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

Команде, которая разрабатывает сервис релокации, остается просто:

  • Добавить заявку на релокацию в готовый раздел «Заявки» через админпанель и собрать из готовых компонентов форму заявки
  • Встроить в раздел «Задачи» для руководителей задачу на одобрение перевода сотрудника в другой город.
  • Добавить виджет с текущим состоянием перевода в сетку виджетов на главной странице.
  • Настроить отправку уведомлений через готовый микросервис «Уведомления», чтобы сотрудница автоматически получала пуши о статусе заявки и видела обновления на иконке с колокольчиком на главном экране приложения.

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

Делаем сервисы удобными с помощью элементов, которые знакомы пользователям

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

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

Сервис «Расчетные листы» стал в новой структуре разделом «Деньги». В нем мы свели в общий график начисления и списания. И в мобильной, и в десктопной версии использовали круговые диаграммы, к которым пользователи привыкли по банковским приложениям.

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

Большинство сотрудников «Пятёрочки» работают посменно, поэтому узнать свой график на завтра — главный запрос при заходе в личный кабинет. В новой версии «Графика работы» мы вывели ближайшие смены на странице с календарем, а в самом календаре дополнительно отметили время работы в ячейках-днях.

Создаем инфраструктуру для мультикомандной разработки

Продвинутый личный кабинет по структуре напоминает соцсеть. Мультикомандность — стандарт для таких больших цифровых продуктов как VK или Facebook. Там выделенные команды отвечают за видео, мессенджеры, новостную ленту и десятки других сервисов. Части большого продукта затем собираются в общем фронтенде, формируя единый пользовательский опыт.

45 человек из 7 команд разрабатывают сервисы для личного кабинета «Пятёрочки»

В распоряжении команд социальных сетей есть единая технологическая платформа и специальные инструменты. У команд, которые делают сервисы личного кабинета «Пятёрочки», до недавнего времени подобной инфраструктуры не было. И вот что мы сделали.

Для дизайнеров: дизайн-система

Для дизайнеров мы подготовили дизайн-систему. Это UI-kit с готовыми элементами и блоками и подробные правила создания новых интерфейсов и страниц. Дизайн-система не только делает процесс быстрее, но и позволяет проектировать внешний вид сервисов так, чтобы они органично сочетались с общим стилем личного кабинета.

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

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

В основу проекта лег UI-kit, который помогает пользователям вырабатывать одинаковые паттерны поведения во всех разделах, а командам — внедрять новые сервисы в минимальные сроки.

Владимир Гарднер, арт-директор digital-направления Presium

Дополнительно мы подготовили инструкцию с описанием принципов навигации и логики разделов, вариантами и правилами встраивания новых сервисов в интерфейс. Например:

• Новые крупные разделы встраиваются в левое меню.

• Заявочные сервисы встраиваются в кнопку действия.

• Если в разделе есть информация, которую пользователь должен увидеть в приоритетном порядке, она выводится в виджете или промо-блоке.

И так далее.

Для разработчиков: оболочка и библиотека готовых компонентов интерфейса

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

Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

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

С библиотекой компонентов разработчики экономят 80% времени на верстке

Мы разработали набор утилит и компонентов, из которых можно быстро и унифицированно собирать модули личного кабинета. Для встраивания этих модулей в основной проект был собран отдельный пакет с подходящим названием “Ядро”. Он служит каркасом приложения и шиной общих данных для всех модулей.

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

Сергей Чернобровкин, управляющий партнёр, руководитель Front-end разработки KTS

Сначала для добавления в общую сборку сторонние команды должны были передавать каждое обновление своих модулей нам. Чтобы ускорить процесс, мы внедрили федерацию модулей (module federation). Благодаря этому новая версия компонента автоматически включается в общую сборку, как только команда завершает разработку.

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

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

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

Иван Ефремов, владелец продукта «Цифровые HR-сервисы» торговой сети «Пятёрочка»

Что в результате

Для пользователя новый личный кабинет — удобный цифровой продукт по двум причинам:

  • Поиск информации стал намного проще, потому что сервисы логично сгруппированы, а простые интерфейсы и виджеты сделали их интуитивно понятными.
  • Команды дизайнеров и разработчиков теперь имеют в своем распоряжении набор инструментов, чтобы быстро собирать и внедрять новые сервисы.
Как мы сделали новый личный кабинет для 260 тысяч сотрудников «Пятёрочки»

В «Пятёрочке» подсчитали, что после перезапуска мобильного приложения «Моя работа» с новой версией личного кабинета количество пользователей среди сотрудников выросло на 40%. Скорость предоставления HR-сервисов увеличилась на 200%, удовлетворенность ими на 80%, а объем новых кадровых документов при этом снизился на 34%.

Мы продолжаем поддерживать личный кабинет и подключать к нему новые команды разработчиков. В будущем продукт станет еще удобнее — там будет все, что нужно любому сотруднику «Пятёрочки» для работы, какую бы должность он ни занимал.

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

***

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

Ещё мы регулярно ведём телеграм-канал Программисты делают бизнес, где рассказываем про бизнес и разработку: подписывайтесь, у нас много полезного.

7777
125 комментариев

Что-то цвета меня раздражают, даже не знаю чем.

3
Ответить
33
Ответить

Красиво, что скажешь 👍 представляю, в какую копеечку это вылилось Пятерочке🤣

4
Ответить

Главное это не сумма, а то, совпали ли затраты и экономия. Все активности, в том числе личный кабинет сотрудника, внутри Пятерочки оцениваются с точки зрения вложения и экономии в перспективе нескольких лет.

12
Ответить

Учитывая что это для огромного числа людей и ориентировано на рутину - это и стоит тех денег

4
Ответить

Класс. А бонусы уже починили?

6
Ответить

Комментарий недоступен

3
Ответить