Слишком плавный скролл: как Sborka Project превзошли ожидания Авито, создав антихаос-сервис управления проектами

Главное о кейсе

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

Сервис на основе DACI уже внедрен в проектные процессы Avito Design Team, и, по словам руководителя проектного офиса Алексея Косилина, весьма успешно. Инструмент активно используют как сотрудники Авито, так и команды за пределами компании: примерно 70 уникальных пользователей регистрируются каждую неделю.

Как проект изменил жизнь пользователей

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

Инструмент активно используют как сотрудники Авито, так и команды за пределами компании: примерно 70 уникальных пользователей регистрируются каждую неделю.

Бизнес-задача и ее решение

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

Как решили?

1. Создали лендинг, посвященный методологии DACI, знакомящий пользователей с фреймворком.
2. Реализовали веб-сервис ведения проектов на основе DACI-фреймворка с безупречным UX.

Крафт (мастерство), реализация, технические детали

Стек технологий

Backend: TypeScript, NestJS, Swagger
Frontend: Next.js, TypeScript, SCSS Modules, Anime.js

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

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

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Этап 1. Эксперименты с персонажами.
По задумке клиента, DACI сопровождали маскоты, то есть собственные персонажи проекта. Дизайнеры Авито предоставили статичные макеты в Figma, которые мы анимировали. Каждого персонажа наделили индивидуальными чертами: кто-то загипнотизированный, кто-то спокойный, кто-то в панике, а кто-то ужасно доволен, — и для этого некоторые детали мы продумывали самостоятельно.

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

Слишком плавный скролл

Заказчик хотел «очень_плавный_скроллинг», и он его получил. Настолько, что нам прилетел фидбэк: «Слишком плавно». Убедитесь сами: тыц. Кстати, изначально в мобильной версии дизайнеры Авито предлагало горизонтальную прокрутку — как на десктопе. Мы знаем, что на практике такое решение крайне неудобно, поэтому уговорили Авито на вертикальный скролл. Пусть это немного и увеличило объем работ, но спасло от проклятий будущих юзеров.

Разработка демоверсии сервиса

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

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

Не только функциональный, но и быстрый

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

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

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

«И про иконки еще расскажи!»

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

Ролей и сейчас достаточно, а со временем их может стать еще больше. Отрисовывать все это разнообразие вручную — чудовищная трата времени (сначала нашего, а позже — и пользователя, мечущегося с выбором иконки). Поэтому мы взяли несколько бэкграундов, несколько декоративных элементов (глазки с носом, пирсинг и прочее), несколько разных цветов и создали алгоритм для автоматической комбинации трех элементов иконки. Генерируй — не хочу, и никаких дублей.

Педантичная «Сборка»

На всех итерациях со своей стороны мы поддерживали единообразие, структурность дизайна (например, перепроверяли расстояние между строками, принципы расположения кнопок или отступов), задумывались о пользовательском пути и предлагали улучшения. Например, с нашей подачи добавили на десктопной версии опцию сворачивания тех задач, в которых все роли неактивны. Sborka Project работают педантично и с вниманием к деталям, это наш принципиальный подход к выполнению вообще любого проекта.

Прочая информация о кейсе

Представьте ситуацию. Над проектом трудятся 40 сотрудников из пяти департаментов: менеджеры продукта, дизайнеры, исследователи, аналитики, редакторы, разработчики. Люди из разных подразделений не всегда осознают собственные роли и ответственность. Например, дизайнер не понимает, что должен утвердить и представить стиль для проекта. А редакторы удивляются, почему тексты написали без них. Как «подружить» команду?

Одно из решений — внедрить разделение ответственности по продуктовому фреймворку DACI. По данным McKinsey & Company, сотрудники, использующие в работе методологию DACI, на 25 % чаще завершают проекты успешно и вовремя. На разных этапах проекта роль одного и того же сотрудника может меняться. По DACI любой член команды может стать лидером на том или ином этапе, и матрица четко фиксирует роли каждого участника. Результат — никакого хаоса в управлении проектами.

Сервис DACI реализован в рамках стратегии «Антихаос», направленной на улучшение проектных процессов Авито. Впрочем, руководитель проектного офиса Avito Design Team Алексей Косилин отмечает, что инструмент актуален не только для бигтеха, но и для любых команд, в которых есть недопонимание по поводу ролей и ответственности.

Скриншоты