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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Благодаря принципам мультикомандной разработки новые сервисы внедряются быстро и увеличивают общую ценность продукта, которая привлекает новых заказчиков и пользователей. Я считаю это главным показателем успеха запуска корпоративного продукта.
Максим Павлов
Сооснователь KTS Studio
Мультикомандность
Торговая сеть «Пятёрочка» может развивать обновленный личный кабинет самостоятельно или привлекая сторонние команды. Он полностью адаптирован для скоростной мультикомандной разработки.

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

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

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

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

Несмотря на то, что над сервисами работают разные команды, мы обеспечили консистентность пользовательского опыта в каждом из них.
В новом личном кабинете уже запущено более 10 сервисов
Для всех этих сервисов мы создали новый дизайн, некоторые подвергли реинжинирингу, помогая менять бизнес-процесс в основе. KTS обеспечивает техподдержку сторонних разработчиков и с каждым новым сервисом наращивает библиотеку готовых блоков. Подключение команд и разработка становятся еще быстрее.
Результат
Профиль
Просмотр больничных
Задачи сотрудника
Подача заявок
Микросервис рассылки push-уведомлений
Интеграция с мобильным приложением
Просмотр и планирование отпусков
Интеграция с модулем управления сменами сотрудников
Сервис управления командой
Электронные документы и подпись
Реализуют сторонние команды
8 сервисов
Запущено силами KTS и Presium
15 сервисов
для 10 заказчиков
Подключено к разработке
5 продуктовых команд
Вместо того чтобы создавать все с нуля, дизайнеры переиспользуют готовые элементы из UI kit, разработчики — из библиотеки компонентов.

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

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

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

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

Новые сервисы собираются и встраиваются в готовую оболочку как конструктор, а продуманные процессы обеспечивают удобный онбординг для команд.
Мультикомандность
У Вас похожая проблема?
Оставьте контакты, мы сможем подобрать решение
Не хотите писать? Позвоните нашему менеджеру по телефону +7 926 735-45-32 и расскажите про ваш проект