Кейс: как мы сделали для А113 конструктор тем оформления

Задача: добавить эмоцию в процесс покупки билета

Центр развлечений А113 обратился с идеей тематически оформить страницу бронирования к выходу фильма «Дьявол носит Prada 2».

Задача звучала достаточно просто: вместо стандартных обозначений мест на схеме зала использовать тематические иконки — красные туфельки. Такое оформление должно было добавить эмоцию в процесс покупки билета и связать интерфейс бронирования с атмосферой фильма.

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

У А113 уже была нестандартная система бронирования и покупки билетов. Пользователь мог выбирать места в разных залах, покупать билеты онлайн, проходить понятный путь заказа, использовать функционал для держателей «Пушкинской карты», а форма автоматически помогала с вводом телефона и email.

Пользователь мог:

• выбрать фильм и сеанс;
• выбрать места в разных залах;
• приобрести билеты онлайн;
• использовать функционал для держателей «Пушкинской карты»;
• удобно вводить номер телефона и email благодаря автоматизированной форме.

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

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

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

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

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

Поэтому мы предложили создать управляемую систему тем оформления.

Сайт А113 работает на 1С-Битрикс. Мы расширили административную часть системы и добавили возможность создавать темы оформления и привязывать их к нужным фильмам.

Пользователь с соответствующими правами может самостоятельно настроить тему без участия разработчика.

Если графические материалы уже подготовлены, настройка занимает несколько минут. Если требуется дополнительно подготовить иконки и подобрать цвета — примерно от 4 до 30 минут.

Внутри темы можно указать разные категории мест, например:

• 1-я линия,
• 2-я линия,
• VIP,
• места для поцелуе.

Для каждой категории задаются собственные иконка и цвет.

Благодаря этому тематическое оформление сохраняет различия между типами билетов и местами в зале.

Иконки загружаются в формате SVG.

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

Клиент не привязан к одному заранее подготовленному цвету и может адаптировать тему под фильм, фон или конкретную рекламную кампанию.

В А113 шесть залов с разным количеством мест и разными ценовыми категориями.

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

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

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

Дополнительное ограничение — разные конфигурации шести залов А113. Количество мест и ценовые категории отличаются, а один фильм может демонстрироваться в разных залах. Поэтому нельзя было просто подготовить одну фиксированную схему.

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

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

Маркетинг — это когда эмоции продают, а затраты на красоту автоматизированы.

Хороший digital-маркетинг — это не только реклама, баннеры и тексты. Иногда он начинается в интерфейсе, который пользователь видит за несколько секунд до покупки.

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

Так небольшая идея в стиле яркой кинопремьеры превратилась для А113 в масштабируемую систему оформления бронирования билетов.

Инструмент можно применять не только для отдельных кинопремьер.

Например, А113 может создавать тематическое оформление:

• для громких релизов;

• киноклубов;

• фестивалей;

• специальных показов;

• комедий;

• хорроров;

• романтических фильмов;

• детских сеансов.

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

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