В два раза больше проектов без новых ресурсов: как digital-агентству ускорить разработку

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

Жамбал Гармажапов

операционный директор в Kodix

Зачем команде нужны четкий регламент и описание процессов

До 2019 года процесс разработки в Kodix был несколько хаотичным. Нужно было быстро писать и согласовывать ТЗ, а четких требований к нему не было. Специалисты подключались к проектам непоследовательно, без регламентов и разделения ответственности, просто для усиления команды. В итоге часть времени они не были включены в процесс и тратили рабочее время впустую. Скорость зависела от темпов работы и энтузиазма отдельных специалистов. Это зацикливало проект на сотрудниках-«звездах».

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

Семь раз отмерь: как проектирование защищает от лишней работы

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

Благодаря проектированию становится понятно, кто из команды на каком этапе должен подключиться к работе. Оно позволяет увидеть, как должна работать система, взаимодействовать бэкенд и фронтенд. Здесь тоже действует компонентный подход. Например, у агентства есть спецификации и функциональные требования по e-commerce. Сотрудники используют эти детали, меняя их порядок и общий состав.

Разделение ответственности на проекте тоже происходит на этом этапе. Специалисты не зависят друг от друга и не влезают в чужую работу, их можно разграничить. Один занимается бизнес-логикой, другой — UI, никто никого не отвлекает. Еще один бонус, который дает команде проектирование — возможность посчитать объем работ и при необходимости запросить у клиента дополнительный бюджет. Так исключаются переработки или необходимость добавления все новых и новых функций.

CTRL+C, CTRL+V: улучшение компонентного подхода

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

Подход позволяет не так сильно зависеть от бэкенда, на который, как правило, уходит гораздо больше времени, чем на фронтенд. В это время оставшаяся команда приступает к работе над дизайном, бизнес-логикой, UI-китом. Образуется целая цепочка процессов, каждый из которых зависит от качества предыдущих. Так, выстраивание бизнес-логики невозможно без проектирования — еще одного важного процесса для digital-агентства.

Как фейковые данные помогают ускорить работу

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

На помощь приходят фейковые данные. Сотрудники знают, какая информация будет идти на фронтенд, и описывают ее в Swagger — спецификации для описания REST API. Дальше можно перенести эти фейковые данные, по формату напоминающие финальные, в mock-сервер, и сымитировать, что это данные от бэкенда, только без расчета. С таким MVP уже можно идти к клиенту — это быстрая макет-обложка, которую можно пощупать.

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

UI-кит: что это такое и как влияет на разработку

Представьте, что в агентство пришел клиент с запросом на создание внутренней CRM-системы с множеством таблиц и кнопок. При этом разработчики уже делали похожий проект, но с другой бизнес-логикой. Чтобы ускорить создание нового дизайн-макета, можно применить заранее приготовленный UI-кит — готовый набор элементов интерфейса.

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

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

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

Большой Брат здесь: storybook как элемент контроля

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

Storybook можно прокачать еще дальше — перевести компоненты на глобальный уровень и сделать систему под нескольких клиентов. Благодаря этому разным командам легче использовать и находить разные компоненты сайтов: storybook становится общим хранилищем, магазином деталей.

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