Автор кейсаАмадоЛоготип компании

Редизайн сайта Красноярского музыкального театра: вплетаем «ДНК театра» в новый интерфейс

Заказчик
Красноярский музыкальный театр основан в 1959 году и уже почти 65 лет стремится разговаривать со зрителем на универсальном языке музыки. Десятки именитых постановщиков. Сотни ярких спектаклей.
Задача
Сделать редизайн сайта, чтобы привлечь новую аудиторию, создать с ней дружеские отношения и повысить продажи билетов в театр.

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

Предыдущая версия сайта

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



Цели редизайна:

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

Требования к новому сайту

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

Целевая аудитория

Было принято решение об «омоложении» целевой аудитории.

Существующий портрет: женщина старше 45 лет со средним достатком, разведённая, имеющая 1-2 детей. Приходит в театр расслабиться, отдохнуть, не может себе позволить самые дорогие билеты, предельная стоимость для нее — 700-800 руб. Консервативна, ожидает праздника и лёгкости.

Желаемый портрет: женщина 20-35 лет с высшим образованием и средним (или выше среднего) достатком. Любит музыкальное искусство и готова знакомиться с ним, открыта новому. Ходит в театр с подругой или на свидание.

Концепция

Главная идея — вплести в дизайн «ДНК театра» — линию, которая объединяет все стороны его жизни и проходит сквозь все страницы, рисует знакомые и знаковые образы: музыкальные инструменты, маски, костюмы.

Главная страница

Первый экран

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

Было:

Стало:

Афиша ближайших спектаклей

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

Эффект при наведении курсора:

Проекты и команда

  • Добавили два блока, чтобы выделить активную жизнь театра и сделать акцент на команде, которая эту жизнь создаёт.

Новости и подвал

  • Оформили новости в отдельный хорошо считываемый блок.
  • Добавили подписку на рассылку.
  • Пересобрали подвал: убрали лишнее и оставили только важные разделы и контакты.

Было:

Стало:

Афиша

Баннер и фильтры

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


Тепловая карта афиши:

Карточки спектаклей

  • В старом дизайне кнопка покупки билета появлялась под возрастным цензом. Мы доработали оформление кнопки, сделали её большой и максимально заметной. С помощью вебвизора отследили тенденцию, что посетители сразу кликают на кнопку «Купить билет».
  • Переделали карточку спектакля: добавили обложку, убрали визуальный шум и сместили акценты, при этом сохранив все важные детали: длительность, место, значок пушкинской карты и золотой маски, возрастной ценз.
  • Добавили для карточек статусы «Гастроли» или «Премьера».

Репертуар

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



Карточки спектаклей

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

Тепловая карта репертуара:

Спекталь подробно

Баннер и фильтры

  • В прежнем дизайне даты спектаклей и кнопка покупки билетов были на втором экране. Мы решили вынести их наверх, повысив удобство взаимодействия с карточкой — и это отразилось на конверсии, билеты стали покупать чаще.
  • Сделали баннер более лаконичным. По функционалу он такой же, как на главной странице, только без конкретной даты.
  • Если переходим к описанию спектакля со страницы с конкретной датой (например, из «Афиши»), то эта дата показывается на баннере.
  • Если переходим к описанию из раздела «Репертуар», то видим блок с ближайшими показами, где сразу можно купить билет на подходящую дату.

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

Было:

Стало:

Детали в новом дизайне:

Мобильная версия сайта:

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


Перейти на сайт

В карточку агентства

Письмо автору кейса

Пользуйтесь реальным опытом в IT и следите за успехами потенциальных подрядчиков и конкурентов
Подпишитесь на рассылку
Читайте также
Кейсы по теме#Музыка, культура, искусство