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

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

За реализацией сервиса по управлению проектами на основе фреймворка DACI Авито пришел к нам, Sborka Project.

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

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

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

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

Задача № 1 — создать лендинг, который знакомит пользователей с матрицей DACI. Посадочную разрабатывали с прицелом, что в дальнейшем она станет полноценным сервисом управления проектами на основе фреймворка DACI. Avito Design Team поделились общим представлением, каким должен быть лендинг, а детали обсуждали и финалили уже вместе. Сдали заказчику лендинг — заказчик остался доволен.

Спустя несколько месяцев представители Авито к нам вернулся: «Было круто. Теперь хотим сервис управления проектами. Давайте делать». Что ж, давайте! И это стало нашей задачей № 2. Но обо всем по порядку...

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

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

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

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

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

Этап 1. Эксперименты с персонажами

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

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

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

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

Этап 2. Разработка личного кабинета и подготовка сервиса по управлению проектами к релизу

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Backend: TypeScript, NestJS, Swagger

Frontend: Next.js, TypeScript, SCSS Modules, Anime.js

Над проектом работали:

По данным McKinsey & Company, сотрудники, использующие в работе методологию DACI, на 25 % чаще завершают проекты успешно и вовремя. Сервис на основе DACI уже внедрен в проектные процессы Avito Design Team, и, по словам руководителя проектного офиса Лёши Косилина, весьма успешно. Инструмент активно используют как сотрудники Авито, так и команды за пределами компании: примерно 70 уникальных пользователей регистрируются каждую неделю.

А как на получившийся сервис (вот же он) отреагировал заказчик, думаем, понятно по этому скрину ;)

Привет, на связи Алексей Хорьяков. Мы в Sborka Project вдумчиво и с вниманием к деталям разрабатываем сайты, которые остаются у пользователей в сердечке. Посмотрите — в вашем они тоже останутся.

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

Со «Сборкой» надежно, результативно и кайфово.

Свяжитесь с нами в Телеграм или оставьте заявку на сайте — тот самый партнер мечты найден.