Всем привет! Меня зовут Максим Павлов, я управляющий партнёр KTS. Рассказываю, как мы разработали удобный HR-сервис для 260 тысяч пользователей на базе SAP, который легко развивать и масштабировать. Что? Да!
Зачем компаниям личный кабинет сотрудника
В крупных компаниях с большим штатом личный кабинет сотрудника решает две важные задачи.
- Это «единое окно» HR-сервисов, где работник может быстро и удобно решать личные и рабочие дела: получать справки, оформлять отпуск и больничный, посмотреть график работы, выплаты и начисления и т.д.
- Это канал коммуникации, через который компания доносит до своих людей важную информацию.
С течением времени сервисов появляется все больше, и структура так разрастается, что ориентироваться в ней становится неудобно. Сотрудники стараются лишний раз не заходить в личный кабинет, задачи HR-департамента «теряются» или откладываются. С возникновением каждой новой функции ситуация только усугубляется.
Какие перед нами стояли задачи
В 2019 году к нам обратились заказчики из торговой сети «Пятёрочка». Там уже несколько лет развивали личный кабинет сотрудника на технологии SAP UI5. По сути он представлял собой список HR-сервисов, которые обрабатывались в SAP HR.
Заказчики предложили решить две проблемы, которые возникли в процессе расширения личного кабинета.
- Плиток-сервисов стало много, и пользователи перестали с легкостью ориентироваться в их списке.
- У компании есть постоянная потребность в новых сервисах, но скорость их запуска была ограничена возможностями одной команды.
Исходя из этого мы сформулировали для себя две глобальные задачи. Первая — сделать структуру личного кабинета расширяемой без нагромождения. Вторая — сделать возможной и удобной мультикомандную разработку.
Чтобы личный кабинет не превратился в “простыню” плиток или вкладок, нужно выделить базовые элементы, которые будут переиспользоваться во многих сервисах.
А чтобы сервисы могли разрабатывать одновременно несколько команд, им нужна подходящая технологическая платформа и готовые компоненты, которые позволяют собирать сервисы как конструктор.
За работу над всем этим мы взялись вместе с дизайн-командой студии Presium.
Разрабатываем новую структуру личного кабинета
На старте мы с коллегами провели исследование и по результатам подготовили карту экранов для сотрудников разных должностей. Затем составили user story map для всех сервисов.
После этого мы создали черно-белый прототип структуры будущего интерфейса и на его основе разработали полноценный дизайн-концепт в фирменном стиле «Пятёрочки».
В новом интерфейсе мы выделили пять основных функциональных блоков, которые структурируют все сервисы.
1. Разделы. В боковом меню мы разместили разделы с однородным контентом, например, все сервисы, связанные с отпусками или деньгами.
2. Виджеты. Информация, которая должна быть на виду, выводится в виджетах.
3. Задачи. Если руководителю или компании требуется, чтобы сотрудник выполнил какие-то действия, они добавляются в раздел задач.
4. Заявки. Если сотруднику нужно получить согласование по рабочему или личному вопросу, это происходит с помощью заявок.
5. Уведомления. Оповещения от сервисов личного кабинета выводятся на сайте и приходят в формате push-уведомлений в мобильном приложении.
Запускаем конструктор сервисов
Над новыми сервисами работают продуктовые команды самой «Пятёрочки», команды из управляющей компании X5 Retail Group, а также внешние подрядчики. Для всех этих (и будущих) команд мы сделали полноценный конструктор, который позволяет быстро собирать новые сервисы и встраивать их в личный кабинет.
Пример: недавно «Пятёрочка» запустила сервис релокации для сотрудников. Допустим, муж продавца-кассира — военный. Его переводят в другой город, жена едет с ним. Вместо того чтобы увольняться, заново искать работу, проходить обучение и онбординг, сотрудница может запросить релокацию в «Пятёрочку» в другом городе.
Команде, которая разрабатывает сервис релокации, остается просто:
- Добавить заявку на релокацию в готовый раздел «Заявки» через админпанель и собрать из готовых компонентов форму заявки
- Встроить в раздел «Задачи» для руководителей задачу на одобрение перевода сотрудника в другой город.
- Добавить виджет с текущим состоянием перевода в сетку виджетов на главной странице.
- Настроить отправку уведомлений через готовый микросервис «Уведомления», чтобы сотрудница автоматически получала пуши о статусе заявки и видела обновления на иконке с колокольчиком на главном экране приложения.
Таким образом, командам, которые делают сервисы, не нужно в очередной раз придумывать новый механизм работы с уведомлениями, задачами и заявками. Вместо этого они могут полностью сосредоточиться на разработке функционала сервиса, который будет отличать его от всех остальных.
Делаем сервисы удобными с помощью элементов, которые знакомы пользователям
Для всех сервисов мы создали новый дизайн, а некоторые подвергли реинжинирингу. Самый массовый сегмент пользователей — работники торговых точек, и мы ориентировались на удобство для них. Первым делом мы взялись за переработку двух самых популярных сервисов, это «Расчетные листы» и «График работы».
Сервис «Расчетные листы» стал в новой структуре разделом «Деньги». В нем мы свели в общий график начисления и списания. И в мобильной, и в десктопной версии использовали круговые диаграммы, к которым пользователи привыкли по банковским приложениям.
Большинство сотрудников «Пятёрочки» работают посменно, поэтому узнать свой график на завтра — главный запрос при заходе в личный кабинет. В новой версии «Графика работы» мы вывели ближайшие смены на странице с календарем, а в самом календаре дополнительно отметили время работы в ячейках-днях.
Создаем инфраструктуру для мультикомандной разработки
Продвинутый личный кабинет по структуре напоминает соцсеть. Мультикомандность — стандарт для таких больших цифровых продуктов как VK или Facebook. Там выделенные команды отвечают за видео, мессенджеры, новостную ленту и десятки других сервисов. Части большого продукта затем собираются в общем фронтенде, формируя единый пользовательский опыт.
45 человек из 7 команд разрабатывают сервисы для личного кабинета «Пятёрочки»
В распоряжении команд социальных сетей есть единая технологическая платформа и специальные инструменты. У команд, которые делают сервисы личного кабинета «Пятёрочки», до недавнего времени подобной инфраструктуры не было. И вот что мы сделали.
Для дизайнеров: дизайн-система
Для дизайнеров мы подготовили дизайн-систему. Это UI-kit с готовыми элементами и блоками и подробные правила создания новых интерфейсов и страниц. Дизайн-система не только делает процесс быстрее, но и позволяет проектировать внешний вид сервисов так, чтобы они органично сочетались с общим стилем личного кабинета.
Нам было важно сделать доступный и понятный интерфейс, который позволяет сотрудникам быстро и удобно взаимодействовать с системой. Учитывая количество категорий пользователей и постоянно растущий функционал, в таком проекте не обойтись без дизайн-системы.
В основу проекта лег UI-kit, который помогает пользователям вырабатывать одинаковые паттерны поведения во всех разделах, а командам — внедрять новые сервисы в минимальные сроки.
Дополнительно мы подготовили инструкцию с описанием принципов навигации и логики разделов, вариантами и правилами встраивания новых сервисов в интерфейс. Например:
• Новые крупные разделы встраиваются в левое меню.
• Заявочные сервисы встраиваются в кнопку действия.
• Если в разделе есть информация, которую пользователь должен увидеть в приоритетном порядке, она выводится в виджете или промо-блоке.
И так далее.
Для разработчиков: оболочка и библиотека готовых компонентов интерфейса
Для разработчиков мы создали специальную оболочку, которая позволяет командам быстро встраивать в личный кабинет новые сервисы и разделы. Каждая команда подключает к оболочке свой модуль и, запуская итоговую сборку, тут же видит, как новый сервис будет выглядеть в рамках всего личного кабинета.
Вдобавок к этому для фронтенд-разработчиков мы подготовили библиотеку react-компонентов. Как UI-kit ускоряет проектирование дизайна, библиотека компонентов ускоряет разработку фронтенда. Ну и чтобы предвосхитить максимум потенциальных вопросов от команд, мы написали подробную документацию.
С библиотекой компонентов разработчики экономят 80% времени на верстке
Мы разработали набор утилит и компонентов, из которых можно быстро и унифицированно собирать модули личного кабинета. Для встраивания этих модулей в основной проект был собран отдельный пакет с подходящим названием “Ядро”. Он служит каркасом приложения и шиной общих данных для всех модулей.
Ядро используется как в основном проекте, так и в режиме разработки модулей-разделов. Подключая его, разработчики видят свой раздел в интерфейсе личного кабинета, который полностью эмулирует работу продакшн-версии.
Сначала для добавления в общую сборку сторонние команды должны были передавать каждое обновление своих модулей нам. Чтобы ускорить процесс, мы внедрили федерацию модулей (module federation). Благодаря этому новая версия компонента автоматически включается в общую сборку, как только команда завершает разработку.
В торговой сети «Пятёрочка» личный кабинет — один из главных сервисов для сотрудников. Сотрудники, руководители, HR-специалисты используют личный кабинет с первого до последнего дня работы в компании, в рабочее время и во время отдыха. Система испытывает высокие нагрузки, а даунтайм невозможен для бизнеса. Поэтому быстрое развитие и стабильная работа личного кабинета — важная задача для торговой сети.
Мы выбрали команду студии KTS и Presium и можем отметить высокий профессионализм ребят, быстрорастущую компетенцию в HR-области, глубокое понимание наших задач, высокую вовлеченность, неравнодушие, энтузиазм, помощь смежным командам и креативный подход на всех этапах разработки.
Особенно ценно, что вместе мы смогли решить сложную организационную задачу мультикомандной разработки и сделать личный кабинет самой известной и популярной системой компании.
Что в результате
Для пользователя новый личный кабинет — удобный цифровой продукт по двум причинам:
- Поиск информации стал намного проще, потому что сервисы логично сгруппированы, а простые интерфейсы и виджеты сделали их интуитивно понятными.
- Команды дизайнеров и разработчиков теперь имеют в своем распоряжении набор инструментов, чтобы быстро собирать и внедрять новые сервисы.
В «Пятёрочке» подсчитали, что после перезапуска мобильного приложения «Моя работа» с новой версией личного кабинета количество пользователей среди сотрудников выросло на 40%. Скорость предоставления HR-сервисов увеличилась на 200%, удовлетворенность ими на 80%, а объем новых кадровых документов при этом снизился на 34%.
Мы продолжаем поддерживать личный кабинет и подключать к нему новые команды разработчиков. В будущем продукт станет еще удобнее — там будет все, что нужно любому сотруднику «Пятёрочки» для работы, какую бы должность он ни занимал.
Уже сегодня личный кабинет — больше, чем платформа HR-сервисов. Прямо сейчас свои сервисы разрабатывают команды, которые управляют коммуникацией, обработкой обратной связи покупателей, финансовыми и операционными показателями магазинов и формируют задачи для персонала торговых точек.
***
Подробнее почитать про разработку личного кабинета для сотрудников Пятёрочки вы можете на нашем сайте.
Ещё мы регулярно ведём телеграм-канал Программисты делают бизнес, где рассказываем про бизнес и разработку: подписывайтесь, у нас много полезного.
Класс. А бонусы уже починили?
о наболевшем(