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

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

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

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

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

ccc46269cda6060bf8bb0b0d62be720a.png

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

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

9def8a88e1d2ae347e78fe4ce29532d8.png

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

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

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

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

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

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

Концепция

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

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

Первый экран

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

Было:

1dc84ab1860840eafec790f3c7255ed1.png

Стало:

45187a130adff5e5543117e81f76aa8d.png

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

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

6a354d4550ac247dcdecb4f66eda13bc.png

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

5061e94e4b48396b9b2c90116a220e70.png

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

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

d09405cbe61c09c6e9f328495e00507a.png

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

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

Было:

8899a25f5d19c973233c2ecde55401a5.png

Стало:

54097ff411bff8617293b69eb0c9e60e.png

Афиша

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

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

3cda5ec53736e40cfa1756474e54a7d8.png


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

52a9c53677cea771748a6179073bcd47.png

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

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

Репертуар

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

befcaa25b986e3ea49a3fffb04beb4e3.png

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

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

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

e20de92681be5f499c34c2818b7a4226.png

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

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

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

ae3b002b725019f108f00ba2263977e5.png

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

Было:

7a374d9f287ece31bce3a527f180c700.png

Стало:

3ff8ff4f620584446066ba7271628e01.png

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

eafb9e11af526d7bb95d0f9b6dff9fb1.jpg

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

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

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

Полный текст статьи читайте на CMS Magazine