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

Avito Design Team решили упростить себе и коллегам ведение проектов, внедрив в работу фреймворк DACI. Такая методология помогает сотрудникам осознавать свою зону ответственности, упрощать процесс принятия решений, сокращать время согласований, ускорять выпуск продукта.

Решив реализовать сервис по управлению проектами на основе фреймворка DACI, Авито пришел к нам осенью 2024 года.

Итак, задачи, которые перед нами поставил Авито:

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

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

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

DACI — фреймворк, устанавливающий ответственность участников за принятие решений на том или ином этапе проекта. Аббревиатура DACI складывается из ролей: driver, approver, contributor и informed. Driver — лицо, которое инициирует и развивает проект; approver — согласующее лицо; contributors — лица, которые могут давать рекомендации по проекту; informed — информируемые лица, на чью работу может повлиять проект.

Верхнеуровнево всю нашу работу по реализации сервиса по управлению проектами на основе методологии DACI можно разделить на три итерации.

Этап 1. Креативный. Разработка промолендинга и демоверсии таблицы:

- статичная верстка;

- анимация персонажей, статичных сцен;

- анимация текстов;

- создание плавной прокрутки (скроллинга);

- верстка мобильной версии и десктопа;

- разработка демоверсии таблицы.

Этап 2. Технический. Разработка сервиса по управлению проектами:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Педантичная Sborka]

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

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

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