Кейс: новый сайт для независимого фестиваля «Любимовка»

За 8 лет сайт некоммерческого театрального фестиваля устарел. Новый нужно было сделать почти без бюджета. Рассказываем, как с помощью Яндекс Практикума, краудфандинга и Ирины Шихман удалось этого добиться.

«Любимовка» — бесплатный независимый фестиваль драматургии. Здесь встречаются начинающие авторы и ведущие профессионалы театра. На фестивале молодые режиссеры вместе с профессиональными актерами читают лучшие новые русскоязычные пьесы со сцены и обсуждают их со зрителями.

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

Сайт фестиваля lubimovka.ru существовал 8 лет и тянул две главных функции — информационную и архивную. Там накопились проблемы, с которыми надо было что-то делать:

Проблемы: неудобная навигация, громоздкая админка, устаревший интерфейс.

2. С точки зрения архива нужно сохранять историю фестиваля. В первую очередь, пьесы «Любимовки» с 2013 года.

Проблемы: неудобная форма приема пьес и нехватка полноценного каталога.

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

Фестиваль «Любимовка» — некоммерческий проект, поэтому планировали собирать деньги с помощью краудфандинга. Нужно было найти агентство с опытом работы с НКО и пониманием специфики. В январе 2020 года «Любимовка» провела исследование и выбрала брендинговое агентство «Шишки».

Агентство «Шишки» разработало дизайн-концепцию — она стала основой описания для краудфандинга.

Выбрали «Планету» в качестве крауд-площадки, поскольку там часто делают проекты про искусство. Вдохновила успешная кампания журнала «Искусство кино», которому удалось собрать несколько миллионов на развитие.

Мы хотели собрать 950 000 рублей за два месяца.

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

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

Поддерживающий мерч и онлайн-марафон

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

Через два месяца после старта кампании стало понятно, что сумма не набирается. Решили провести драматургический онлайн-марафон в поддержку крауда. В нем участвовали примерно 40 человек. «Любимовка» привлекла Анатолия Белого, Алену Бабенко, Феклу Толстую, Антона Долина, Виктора Рыжакова, Анну Старобинец и провела открытый конкурс среди театральных коллективов России. Любой театр мог записать видео и прислать организаторам. В итоге в марафон включили 10 лучших видео.

Марафон продолжался 9 часов и набрал около 3000 просмотров. За это время кампания получила 50 тысяч рублей, но через марафон о сборе денег узнала блогер Ирина Шихман, которая сделала крупный взнос — 200 тысяч рублей. Благодаря ей удалось преодолеть порог 50%, после которого кампания признается успешной и «Планета» может выдать собранные деньги.

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

Стиль и айдентика

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

Старый логотип ⇨ новый:

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

Структура

Так как сайт работает в фоновом и активном режиме, надо было предусмотреть переход из межсезонья в фазу приема заявок:

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

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

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

Было:

Стало:

По итогам краудфандинга удалось собрать только половину нужной суммы. Нужно было либо максимально упрощать функционал, либо искать подрядчиков-волонтеров. У арт-директора «Любимовки» Полины Пхор нашлись знакомые, связанные с Мастерской программирования Яндекс Практикума — оказалось, что можно разработать техническую часть сайта бесплатно.

Яндекс Практикум позволяет любому человеку освоить цифровую профессию с нуля и получить навыки для профессионального развития. Он готовит аналитиков данных, веб-разработчиков, бэкенд-разработчиков, инженеров по тестированию, специалистов по data science, дизайнеров, маркетологов и управленцев в IT. В Практикуме учатся более 30 тысяч студентов, которые могут сразу применять полученные знания на практике.

На курсах «Веб-разработчик» и «Python-разработчик» студентам Практикума предложили заполнить анкету и сделать тестовое задание. Первую половину проекта студенты делали под руководством наставника факультета веб-разработки Максима Чеченёва. Проектом занимались 36 человек, которых поделили на несколько команд.

Тимлидами стали студенты программ «Мидл фронтенд-разработчик» и «Мидл Python-разработчик». Техническими руководителями фронтенда и бэкенда были наставники факультетов веб-разработки и Python. За качеством следили семь QA-инженеров, а весь проект вели проджект-менеджеры Анна Соколова, Анастасия Житкова и Гульнара Гарафиева.

Когда «Шишки» передали Яндекс Практикуму готовые стайлгайды и бриф со структурой, студенты вместе с наставниками решили работать параллельно над фронтендом и бэкендом.

Работу распределили на этапы:

Команды использовали новые технологии: для фронтенда — NextJS, TypeScript, Storybook, для бэкенда — Django REST Framework и библиотека FactoryBoy.

Фронтенд: работали на React-фреймворке Next.js. Он предоставляет серверный рендеринг и генерацию статики «из коробки». Код писали на TypeScript, а для стилей использовали CSS-модули и PostCSS в качестве препроцессора — миксины, импорты, вложенности и прочие удобства. Остальное окружение типовое — ESLint для проверки кода, Stylelint для проверки и автоматического форматирования стилей и Storybook в качестве песочницы для компонентов.

В проекте нет привычного для подобного стека стейт-менеджера вроде Redux, вместо этого разработчики использовали React Context API.

Кодогенерация типов из схемы OpenAPI помогла соблюдать контракт между фронтендом и бэкендом, сэкономив время на написании типов руками. Для удобства разработки в проекте были настроены CI/CD с использованием GitHub Actions и Docker.

Бэкенд: разработали на фреймворке Django, фронт общается с бэком с помощью Django REST Framework. Код частично покрыт тестами и каждая функция проверяется несколькими инструментами для соответствия общей стилистике и правилам кода.

Заявка. При подаче пьесы файл сохраняется в Яндекс Диск, а запись о ней добавляется в Google Sheet и отправляется на почту. Получается несколько архивов.

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

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

Роли. В админке есть две роли:

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

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

Мастерская Яндекс Практикума по опыту предыдущих проектов рассчитывала, что «Любимовку» сделают до конца 2021 года. Но ряд трудностей растянул проект:

Команды проделали большую работу и получили ценный опыт. Сайт постепенно становился более консистентным, поддерживаемым и масштабируемым. Ребята смогли увидеть, почему в разработке важно выстроить процессы, а не только делать свою часть работы. Самое главное — у «Любимовки» есть новый сайт, в создании которого участвовали студенты Практикума.

«Мы старались создать атмосферу, в которой участники команд сами принимают решения. Мы не указывали, каким именно должен быть код, исключали микроменеджмент, чтобы показать, что мы доверяем командам. Они могут ошибаться и принимать неверные решения, но только так можно научиться работать в команде и по-настоящему вовлекаться в разработку», — объясняет проектный менеджер Мастерской программирования Яндекс Практикума на старте разработки Аня Соколова.

Новый сайт запустился в начале апреля на домене-зеркале, а в начале июля заработал на новом домене: lubimovka.art. Он адаптивен для любого устройства: подать пьесу, администрировать, обновлять профиль в библиотеке можно через мобильный телефон.