редизайн сайта

красноярский музыкальный театр

Выявленные проблемы

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

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

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

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

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

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

Существующий портрет

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

Желаемый портрет

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

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

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

Концепция

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

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

Первый экран

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

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

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

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

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

Листайте влево-вправо, чтобы увидеть предыдущую версию сайта и другие варианты страницы.

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

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

Афиша

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

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

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

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

Репертуар

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

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

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

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

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

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

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

Описание спектакля

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

МобильнАЯ версиЯ