Личный кабинет для сотрудников Пятерочки

Миссия выполнима:

удобный личный кабинет с цифровыми сервисами
для 230 000 пользователей

Единое окно для десятков цифровых сервисов

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

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

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

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

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

Иван Ефремов

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

230 000 + активных пользователей
От работников торговых залов до топ-менеджеров
Платформа Openshift
Развертывание на новой микросервисной платформе
Интеграция с системами
SAP, WebTutor, HRO и другими системами, уже внедренными в Пятёрочке

Федеральный масштаб
От Калининграда до Красноярска
Особый фокус на безопасность
Высокие требования к скорости и качеству

Процесс

Проектирование

Выделили аудиторию для тестирования MVP в одном из регионов. В выборку включили большую часть персонала «Пятёрочки».

Спроектировали техническую архитектуру сервиса

На основе прототипа и корпоративного стиля торговой сети разработали полноценный дизайн-концепт

Создали чёрно-белый прототип структуры будущего интерфейса

1
Проектирование интерфейса

Дизайн

Новая версия Личного Кабинета должна была работать на основе существующего источника данных SAP HR. По этой причине стандартный процесс создания продукта требовалось адаптировать.

2
Дизайн

3
Техническое проектирование

4
Разработка

2.5
Системный анализ

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

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

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

Владимир Гарднер

Арт-директор digital-направления Presium

UI-kit для всего проекта

Наша миссия в этом проекте — сделать доступный и понятный интерфейс для сотрудников компании, который позволит им быстро и удобно взаимодействовать с системой

Разработка

Одним из ключевых требований Заказчика было исключить возникновение «бутылочного горлышка» в процессе реализации новых сервисов Личного кабинета в виде одной команды разработки. Нужно было продумать удобное подключение к разработке новых программистов из неограниченного числа команд. И сделать это так, чтобы Заказчик мог с легкостью распределять задачи между командами. Модульность, гибкость и переиспользование компонентов — основа технологии ReactJS, на которой мы работали в этом проекте. Все компоненты (кнопки, заголовки, формы, календари), которые можно переиспользовать, мы оформили в отдельную библиотеку и перешли на TypeScript.*

*Позволяет отлавливать большое количество багов еще на этапе сборки проекта, а разработчикам проще понимать, как применять написанные другими компоненты

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

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

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

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

Сергей Чернобровкин

сооснователь, руководитель Front-end разработки KTS Studio

Back-end: адаптация под микросервисную архитектуру

Сервисы «Пятерочки» строятся на микросервисной архитектуре. Вместо того чтобы разрабатывать один большой сервис, который отвечает за весь функционал, создается много небольших. Каждый выполняет свою функцию, взаимодействует с другими сервисами и поддерживается отдельной командой разработки. В этой философии мы сделали бэкенд Личного Кабинета сервисом интеграции данных из нескольких источников. В ходе пилотирования MVP он был подключен к SAP с помощью OData-API.

Новый личный кабинет: итеративный запуск

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

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

Было / стало

1. Разделы

Модульный интерфейс и новый подход к группировке сервисов

2. Виджеты

3. Задачи

4. Заявки

В боковом меню разместили разделы с однородным контентом (например, все сервисы, связанные с отпусками).

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

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

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

Перепридумываем сервисы

Названия всех разделов мы сделали простыми, ориентируясь на самый массовый сегмент пользователей сервиса — работников торговых точек. Так, например, раздел «Расчетные листы» в новой версии называется просто «Деньги».

Деньги. Было

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

Деньги. Стало

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

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

График работы. Было

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

График работы. Стало

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

Лайфхаки: Ускоряем собственную работу и мультикомандную разработку

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

Оптимизировали коммуникацию с клиентом и разработку внутри собственной команды

Roadmap

Разделение на группы

Кроссфункциональные команды

Составили roadmap по запуску новых сервисов

Чтобы рабочий процесс был прозрачен и понятен всем: и клиенту, и команде разработчиков. Этой же цели служат еженедельные отчеты по всем блокам работ.

Выделили внутри нашей команды две группы: проектирование и продакшн

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

Выделили внутри группы продакшна две кроссфункциональные команды

Каждая команда параллельно разрабатывает разные разделы. Это удобнее, чем общими силами последовательно делать по одному разделу. Процесс разработки стал намного быстрее.

Упростили проектирование дизайна

Дизайн-система

Правила встраивания сервисов

Сформировали дизайн-систему

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

Определили варианты и правила встраивания новых сервисов в интерфейс

Заявочные сервисы встраиваются в кнопку действия.
Новые крупные разделы встраиваются в левое меню. Личные кадровые сервисы отделены от служебных сервисов, которыми сотрудники пользуются в силу должностных обязанностей.
Ссылки на внешние сервисы добавляются плашкой в разделе корпоративных сервисов.
Если в разделе есть информация, которую пользователь должен увидеть в приоритетном порядке, она выводится в виджете или промо-блоке (баннеры и важные действия).

Ускорили подключение новых разработчиков

Оболочка

Библиотека компонентов

Документация

Федерация модулей

Развертывание веток проекта

Таргетинг

Создали свою «Оболочку»

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

Подготовили библиотеку компонентов

Для удобства новых разработчиков, в том числе сторонних. Подобно тому, как UI kit ускоряет проектирование дизайна, библиотека компонентов ускоряет разработку.

Написали документацию

Чтобы по предыдущим двум шагам точно не осталось никаких вопросов.

Внедрили федерацию модулей (module federation) для включения React-компонентов

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

Запустили гибкую систему развертывания ветвей проекта

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

Предусмотрели таргетинг при пилотировании

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

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

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

Сергей Чернобровкин

сооснователь, руководитель Front-end разработки KTS Studio

Разработка личного кабинета стала для нашей компании новым вызовом, с которым мы, на мой взгляд, отлично справились. Продукт оказался востребованным не только у HR “Пятёрочки”. Заказчики из других подразделений торговой сети приходят к нам с задачами добавления новых цифровых сервисов в личный кабинет сотрудника.

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

Максим Павлов

Сооснователь KTS

Результат

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

10 сервисов

уже запущено в новом личном кабинете

5 продуктовых команд

Подключено к разработке

15 сервисов
для 10 заказчиков

Запущено силами KTS и Presium

8 сервисов

Реализуют сторонние команды

Торговая сеть «Пятёрочка» может развивать обновленный Личный Кабинет самостоятельно или привлекая сторонние команды. Он полностью адаптирован для скоростной мультикомандной разработки. Новые сервисы собираются и встраиваются в готовую оболочку как конструктор, а продуманные процессы обеспечивают удобный онбординг для команд. Вместо того чтобы создавать все с нуля, дизайнеры переиспользуют готовые элементы из UI kit, разработчики — из библиотеки компонентов. Нет нужды придумывать собственный механизм работы с уведомлениями, задачами и заявками — достаточно интегрироваться с готовыми функциональными блоками. Создание, тестирование и запуск сервисов стали проще и быстрее.

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

Заказать разработку личного кабинета для сотрудников

Не хотите писать? Позвоните нашему менеджеру по телефону +7 926 735-45-32 и расскажите про ваш проект