Как мы подружили UX и концерты органной музыки. Кейс Collegium Musicum

С 2013 года фонд Collegium Musicum устраивает концерты, которые погружают гостей в мир классической органной музыки. Здесь можно услышать не только разовые события, но и большие музыкальные фестивали.

Меня зовут Саша Киршин. Я — фаундер дизайн-агентства Ancora. Мы создаем сайты и сервисы для классных компаний и интересных брендов. В 2024 году вошли в ТОП-20 молодых диджитал-агентств по версии Рейтинг Рунета 🔥

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

Сейчас расскажу, как мы работали на эти м проектом, который объединил эстетику классики и современные технологии 🗞

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

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

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

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

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

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

Концерты фонда проходят в соборе Петра и Павла, где звучит уникальный орган W. Sauer 1898 года, который был отреставрирован в начале 2000-х. Посмотрите на этот инструмент. Он не просто красив — он звучит так невероятно мощно, что пробирает до мурашек.

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

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

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

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

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

Когда исследования были завершены, мы приступили к созданию структуры нового сайта. Сделали текстовые версии страниц, которые поделили на основные смысловые блоки.

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

Сделали текстовые структуры, которые поделили на основные смысловые блоки. Провели презентацию для команды фонда, объяснили наши решения и получили зелёный свет для продолжения.

Создали новую информационную архитектуру, которая будет помогать пользователям удобно пользоваться сайтом.

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

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

При создании главной страницы мы стремились передать ту неповторимую атмосферу и детали, которые ощутят посетители:

Центральным элементом главной страницы стал видео-ролик из собора. Это решение погружает посетителей в атмосферу и помогает создать нужное настроение.

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

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

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

На одной из встреч с заказчиками мы услышали их боль: "Работать с разным количеством контента на страницах мероприятий сложно из-за отсутствия единой структуры". Мы предложили внедрить определенную логику в расположение блоков.

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

2. Блоки с исполнителями: Далее следуют блоки с исполнителями, поскольку они могут меняться на разных концертах. Исполнители — ключевая часть мероприятия, и многие посетители приходят именно на них.

3. Детальная информация о программе: После исполнителей мы добавили раздел с информацией о произведениях, входящих в концерт (для тех, кто хочет подробнее изучить программу). Предусмотрели место для фото-галереи с прошлых концертов, которую можно отключить через панель администратора, если ее еще нет.

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

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

1. Страница афиши мероприятий: Мы создали карточки событий, насыщенные важной для пользователей информацией. В каждой карточке отображаются дата проведения, стоимость билетов, название события, краткое описание, продолжительность и две кнопки: основную и второстепенную. Это позволяет быстро получить всю необходимую информацию о предстоящих мероприятиях или купить билет.

2. Адаптация для архива событий: Для карточек в архиве, мы исключили в блоках отображение стоимости билетов и кнопку покупки, сосредоточив внимание на информационной части.

3. Страница новостей. Аналогичным образом была переработана страница новостей. Мы взяли за базу карточку из афиши, но вместо кнопки покупки — предусмотрели возможность перехода на страницу новости.

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

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

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

Чтобы обеспечить общий стиль на всём сайте, мы разработали большой UI-кит. В нем описаны все элементы: от шрифтов и цветовой палитры до интерфейсных компонентов и их состояний.

Этот этап работы позволяет быстро масштабировать проект, создавая новые страницы в будущем, сохраняя при этом целостность и согласованность дизайна.

Внимательно и бережно адаптировали все страницы для разных мобильных устройств. Большая часть аудитории на старом сайте заходила с мобильных телефонов.

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

Теперь у музыкального фонда не просто сайт, а настоящее произведение современного искусства! Всё организовано логично, а контент представлен в оптимальном объёме и последовательности благодаря продуманному проектированию.

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

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

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

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

После окончания работы над проектом, мы получили отзыв от заказчика про нашу работу.

Вот такой получился кейс. Сейчас дизайн в стадии разработки и внедрения. Совсем скоро фонд станет еще приятнее и понятнее для своих будущих гостей.

Проект сделан командой агентства Ancóra

* Саша Киршин: управление проектом, арт-дирекшн
* Маша Лавренова: лид-дизайнер
* Наташа Новожилова: ux-дизайнер / проектирование
* Марина Теодорович: дизайн-поддержка / кейс
* Дима Антонов: адаптации, дизайн-поддержка

Если у вас есть проект, который надо реализовать — пишите мне напрямую. Будем рады с нашей командой вам помочь.
В моём Телеграм-канале я часто рассказываю о работе над проектами и полученных инсайтах на разных этапах работ. А еще про диджитал простым языком, про будни агентства и нашу команду.