Редизайн сайта Красноярского музыкального театра: вплетаем "ДНК театра" в новый интерфейс
ЗаказчикКрасноярский музыкальный театр основан в 1959 году и уже почти 65 лет стремится разговаривать со зрителем на универсальном языке музыки. Десятки именитых постановщиков. Сотни ярких спектаклей.ЗадачаСделать редизайн сайта, чтобы привлечь новую аудиторию, создать с ней дружеские отношения и повысить продажи билетов в театр.
Перед нами стояла следующая задача: осуществить редизайн сайта и таким образом привлечь новую аудиторию, создать с ней дружеские отношения и повысить продажи билетов в театр. Особое внимание в разработке нового дизайна нужно было уделить оформлению всех визуальных элементов, чтобы сайт стал более современным и понятным для пользователя. Также в число задач входило подключение удобного сервиса продажи билетов.
Предыдущая версия сайта
Выявленные проблемы: Обилие неструктурированной информации, в которой пользователь теряется, у него возникают сложности при покупке билетов. Устаревший интерфейс не отвечает ожиданиям целевой аудитории, проблем добавляет сложная навигация и обилие визуального шума.
Цели редизайна:
- Упростить процесс покупки билетов.
- Сделать дизайн сайта более современным и привлекательным для желаемой целевой аудитории.
- Структурировать информацию и сделать навигацию удобной.
- Дополнительно: переехать на более удобную CMS, подключить новую систему продажи билетов.
Требования к новому сайту
Соблюдая фирменный стиль, облегчить интерфейс, сделать его более минималистичным и элегантным. Выстроить позиционирование театра как творческой, профессиональной, современной команды, которой театр гордится и к плодам труда которой предлагает присоединиться и зрителю.
Целевая аудитория
Было принято решение об «омоложении» целевой аудитории.
Существующий портрет: женщина старше 45 лет со средним достатком, разведённая, имеющая 1–2 детей. Приходит в театр расслабиться, отдохнуть, не может себе позволить самые дорогие билеты, предельная стоимость для нее — 700–800 руб. Консервативна, ожидает праздника и лёгкости.
Желаемый портрет: женщина 20–35 лет с высшим образованием и средним (или выше среднего) достатком. Любит музыкальное искусство и готова знакомиться с ним, открыта новому. Ходит в театр с подругой или на свидание.
Концепция
Главная идея — вплести в дизайн «ДНК театра» — линию, которая объединяет все стороны его жизни и проходит сквозь все страницы, рисует знакомые и знаковые образы: музыкальные инструменты, маски, костюмы.
Главная страница
Первый экран
- Сделали минималистичным, упростили шапку сайта, оставив главные пункты меню.
- Баннер стал универсальным: в оформлении можно использовать изображение или видео, дополнять заметное название и краткое описание с возрастным цензом.
- Добавили кнопку покупки билета на конкретный спектакль.
Было:
Стало:
Афиша ближайших спектаклей
- Пределали выкладку списка ближайших спектаклей с возможностью купить билет на конкретную дату в один клик.
- Добавили статусы по наличию билетов.
- При наведении курсора на строку с конкретным спектаклем срабатывает анимация и появляется фото.
Эффект при наведении курсора:
Проекты и команда
- Добавили два блока, чтобы выделить активную жизнь театра и сделать акцент на команде, которая эту жизнь создаёт.
Новости и подвал
- Оформили новости в отдельный хорошо считываемый блок.
- Добавили подписку на рассылку.
- Пересобрали подвал: убрали лишнее и оставили только важные разделы и контакты.
Было:
Стало:
Афиша
Баннер и фильтры
- Вынесли крупный заголовок, благодаря которому посетитель сайта сразу видит, что находится на странице афиши текущего сезона.
- Сделали удобную систему фильтрации, которая создаёт персонализированную подборку спектаклей для конкретного пользователя. Эта же фильтрация с некоторыми дополнениями используется на разделе с репертуаром театра.
Тепловая карта афиши:
Карточки спектаклей
- В старом дизайне кнопка покупки билета появлялась под возрастным цензом. Мы доработали оформление кнопки, сделали её большой и максимально заметной. С помощью вебвизора отследили тенденцию, что посетители сразу кликают на кнопку «Купить билет».
- Переделали карточку спектакля: добавили обложку, убрали визуальный шум и сместили акценты, при этом сохранив все важные детали: длительность, место, значок пушкинской карты и золотой маски, возрастной ценз.
- Добавили для карточек статусы «Гастроли» или «Премьера».
Репертуар
Баннер и фильтры: так же, как и в афише, сделали удобную систему фильтрации и поиск по названию спектакля.
Карточки спектаклей
- Переделали выкладку спектаклей, сохранив общую стилистику: на главной странице, в афише и на других страницах сайта используется единое оформление карточки — это работает на целостность визуального стиля сайта.
- При наведении курсора на карточку появляется большое фото, срабатывает анимация.
- Вебвизор показывает, что посетители стали чаще переходить на подробную страницу с описанием спектакля.
Тепловая карта репертуара:
Спекталь подробно
Баннер и фильтры
- В прежнем дизайне даты спектаклей и кнопка покупки билетов были на втором экране. Мы решили вынести их наверх, повысив удобство взаимодействия с карточкой — и это отразилось на конверсии, билеты стали покупать чаще.
- Сделали баннер более лаконичным. По функционалу он такой же, как на главной странице, только без конкретной даты.
- Если переходим к описанию спектакля со страницы с конкретной датой (например, из «Афиши»), то эта дата показывается на баннере.
- Если переходим к описанию из раздела «Репертуар», то видим блок с ближайшими показами, где сразу можно купить билет на подходящую дату.
В описании спектакля обновили табы с информацией: облегчили дизайн, сделали понятное переключение между блоками информации.
Было:
Стало:
Детали в новом дизайне:
Мобильная версия сайта:
Результат проделанной работы порадовал нас, руководство театра и посетителей сайта. Это было очень интересное и плодотворное взаимодействие — всегда приятно видеть, как в итоге реализуется задуманное.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
