Всем привет! Меня зовут Максим Павлов, я управляющий партнёр 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-сервисов. Прямо сейчас свои сервисы разрабатывают команды, которые управляют коммуникацией, обработкой обратной связи покупателей, финансовыми и операционными показателями магазинов и формируют задачи для персонала торговых точек.
***
Подробнее почитать про разработку личного кабинета для сотрудников Пятёрочки вы можете на нашем сайте.
Ещё мы регулярно ведём телеграм-канал Программисты делают бизнес, где рассказываем про бизнес и разработку: подписывайтесь, у нас много полезного.
чет много текста, а по сути что сделали так и непонятно.
Сделали какой-то пиленый кабинет, который любая команда накидает за 1-2 месяца.
Вся сложность начинается со всяких странных юзкейсов и т.д.
3. Задачи. Если руководителю или компании требуется, чтобы сотрудник выполнил какие-то действия, они добавляются в раздел задач.
4. Заявки. Если сотруднику нужно получить согласование по рабочему или личному вопросу, это происходит с помощью заявок.
Вот это все можетыть очень и очень непросто, если взять например тот же service-now то с теми же задачами там ппц как нетривально сделано.
Интересно было бы послушать как у вас это автоматизировано.
зашел на сайт KTS и охуел от верстки, такое чувство что верстали и наполняли это какие-то фрики под LSD
Цвета вырви глаз, фон то белый то черный, структура инфы вообще нихера не понятна
Уважаемые граждане KTS вы хотя бы открывали свой сайт на мониторе хотя бы 24" ?
По поводу скорости "любой команды" думаю вы либо преувеличиваете, либо не учитываете специфику работы с корпорациями и с сапом :)
Но справедливости ради, MVP по согласованному дизайну мы разработали как раз за 2-3 месяца
По задачам и заявкам действительно всё очень даже непросто — под капотом стоит Camunda, которая дирижирует процессами, а в рамках одного процесса может участвовать до 5 внешних и внутренних систем в куче точек процесса. Думаю, заслуживает отдельной статьи, но скорее всего на хабре:)
А насчет нашего сайта — в офисе только с такого монитора и открываю (хотя возможно он 21", а не 24). Понимаю, что выглядит не совсем привычно, но на то были свои причины, подробности можно почитать в статье моего коллеги Сергея https://vc.ru/u/1051291-sergey-chernobrovkin/480644-rebrending-nash-opyt-i-vyvody
монитор 21" это совсем какой-то глазок, как на таких мониторах вообще можно работать?
сейчас уже норма 27", у меня 32 (4k), до этого были 27"(2.5) отдал ребенку.
Про Camunda интересно, не знал даже что такие есть и кстати для таких кейсов наверное самое правильное применение.
Прочитал про редизайн, вы слишком много уделяете внимания фантику.
KTS что такое не знаб, но использовать аббревиатуры без расшифровки - плохой тон.
Как по мне лучше обычный дизайн, неброский или вообще flat инималистичный, но с хорошим описанием того, что вы можете.
Я вот ставлю себя на место заказчика, открываю сайт, пиздец калейдоском, ладно че могут ребята, и начинаю шароебиться по сайту в зад вперед и гоняя по ссылкам.
А если бы описали, вот с этим работаем, делам так так и то. такие то масштабы, такие-то объемы.
Вы поймите запоминают не дизайн, запоминают сервис и качество.
Что у мерса или бмв какие-то особенные значки? - Нет
Или Technics какой-то дизайн? - Нет?
Однако все знают. И таких примеров вагон, когда какой-нить автосервис у Иван Иваныча на такой-то знает куча народа, потому что качество, а не фантик.
А консультанта который делал этот сайт - нахуй выгнать, потому что его дизайн не подходит роду деятельности компании, вот для ночного клуба это прикольный сайт.
А по-моему выглядит балдежно :) На мониторе 23.8"
Чем занимаемся понятно, какие ключевые кейсы тоже понятно)
Еще очень балдежно не выдавать свое оценочное мнение за аксиому.
Потому что такое оценочное мнение про "сейчас уже норма 27", у меня 32 (4k)" верно на 50% и на 50% ошибочно.