Мобильное приложение для Михайловского театра

Главное о кейсе

Достигнутые цели
The goals we achieved

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

We successfully created an app that both our team and our client, the artistic director of the Mikhailovsky Theatre, really liked. The app combines a stylish and eye-catching design with innovative features that solve the user’s most common problems. Being a theatre lover is now even easier!

https://www.behance.net/gallery/117485011/mihajlovskij-teatr

Бизнес-задача и ее решение

Задача и ее решение
The task and how we solved it

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

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

We love the theatre so our main aim was to create an attractive and memorable app that gives users the chance to not only buy tickets, but also find out more about the play, read about the theatre’s top performers, and get updates about the premieres.

What’s more, in this app we offer solutions to those common problems theatre-goers often face. How do you choose from the huge variety of productions? How can you tell if you can see the stage well from your chosen seat? How do you find your seat and not get lost in general?

Работа над проектом
Working on the project

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

Но через какое-то время мы сами решили, что хотим сделать для Михайловского театра что-то более особенное — не каждый день ведь удается поработать с одним из ведущих театров страны! Мы пошли дальше и, расширив поле поиска, продолжили изучать референсы, но уже с упором на искусство. Для себя мы вывели условную формулу работы над приложением: 70% стиля и 30% инноваций. Путь был непростым, но постепенно концепция сложилась. Мы выбрали темные тона, геометрические формы, акварель, а мягкий оранжевый трансформировался из основного цвета фирменного стиля театра, который нам показался очень насыщенным. Основные шрифты — Journalism и «Гоголь». Это нестандартный выбор для такого типа приложения.

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

We didn’t come up with the design for the app right away. When we were working on the first version, we looked at a lot of references from related spheres. We studied the designs of apps for cinemas, exhibition halls and galleries, and even air tickets, paying particular attention to the onboard seat selection screen. As a result, we created a user-friendly and aesthetically pleasing product that was in line with other ticket booking apps. We showed this version to the client. They liked it and approved the design.

A little further down the road, we realised we wanted to make something special for the Mikhailovksy Theatre. It’s not every day of the week you get to work with one of Russia’s leading theatres! We decided to expand our search parameters and looked for more references to study. This time, our focus was on art. We determined an arbitrary formula to work by for this project: 70% style, 30% innovation. It wasn’t an easy task, but the concept slowly came together. We chose dark colours, geometric shapes, and watercolours. The main fonts are Journalism and Gogol, which are an unconventional choice for this type of app.

We went ahead and remade everything from scratch without consulting our client. The new design was expressive and distinctive while keeping all the user-friendly functional elements. The client was surprised but delighted.

Выбор спектакля
Choosing a play

Важной задачей было выделить премьерные спектакли. Для «Афиши» мы придумали два типа карточек: первые — для уникальных событий, они необычной овальной формы, с крупными шрифтами и дополнительными маркерами (например, пометкой «Премьера» или символом звезды, если в постановке играет ведущий актер); вторые — классические прямоугольники. Теперь не надо переходить на страницу события, чтобы узнать, премьера это или нет, — выбрать спектакль стало проще. Карточки расположены в шахматном порядке.

Определиться со спектаклем можно и с помощью фильтра по категориям («Опера», «Балет» и проч.) или поиска. Чтобы, вбивая в строке поиска название события, пользователь не запутался в постановках (например, «Золушка» — это и балет, и опера), мы придумали обозначать их в выдаче иконками: балерина — для балета, оперный певец — для оперы.

One of the key tasks was highlighting the premieres. We created two types of tickets for the show bill: the first is for unique events and they have a striking oval shape, large typeface and other markers (for example, they are marked “Premiere” or have a star on them if a lead actor is playing a role); the second are the classic rectangle shape. So, now there is no need to go back to the events page to see if a show is a premiere or not. Choosing which play to see is now a lot easier. The tickets are displayed in staggered rows.

Users can also filter shows by category ("Opera", "Ballet", etc.) or use the search function. To avoid users confusing shows (for example, "Cinderella" is both ballet and opera), when the user enters the name of the event in the search bar, there are icons indicating the type of shows: a ballerina for ballet, and an opera singer for opera.

Календарь
Events Calendar

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

The theatre normally puts on one production a day so we came up with the idea of adding event icons to the calendar. Regular theatre-goers will immediately recognise the play from the icon. If they see one they don’t recognise, it’ll be an extra incentive to check out the events page. If tickets for a particular production on a certain day are all sold out, we also mark that on the calendar: the icon will become pale and there will be a special symbol in the corner. That way users spend less time flipping between pages. We give as much information on one page as possible.

Уведомления
Notifications

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

If there are no tickets left to a play that the user really wants to see, they can enter their email address in a special field and if someone returns a ticket, they will be notified. They will also get a notification about the next upcoming performance of the play in question.

Информация о спектакле
Information about the play

В верхней части страницы спектакля мы поместили анимацию, при клике на которую открывается захватывающий мини-трейлер постановки — теперь пользователь будет ждать премьеры с еще большим нетерпением!

We put an animation at the top of a production’s screen that users can tap to open an exciting short trailer for the play. Users will now look forward to the play with even greater anticipation!

Информация об актерах
Information about the actors

Отдельный раздел приложения посвящен артистам театра — здесь можно отслеживать и выбирать спектакли с любимой звездой.

The app has a special section dedicated to the theatre’s actors. Users can follow and choose plays with their favourite stars.

Выбор места
Choosing your seat

Определившись со спектаклем, пользователь должен авторизоваться, а затем выбрать место. Это можно сделать, отфильтровав билеты по стоимости и с помощью схемы зала. Но это не все. Мы добавили уникальное решение, которое закрывает важную пользовательскую проблему: как понять, хорошо будет видно сцену или нет?

В приложении Михайловского театра, выбрав место, пользователь увидит зал в формате иммерсивного 360-градусного видео — поворачивая телефон, можно буквально получить полный обзор с выбранного места. Нам повезло: у театра уже была 3D-съемка зала, и разработчикам только осталось интегрировать ее в приложение. Прямо «из зала» можно выбрать другое место, а передвинув тумблер вверху экрана, можно отключить эту функцию. На случай если в театре вы бываете часто и сами знаете, с какого места какой вид открывается.

After they’ve chosen which play they want to see, users have to log in and pick their seat. To do so, they can filter tickets by price and see the tickets on a seating chart. But that’s not all. We added a unique solution to that all too common question: How can you tell if you can see the stage well from your chosen seat?


When Mikhailovksy Theatre app users choose their seat, they can see the hall in an immersive 360° video. Just by turning their phone, they can see a full view from their selected seat. We were lucky: the theatre already had a full 3D image of the hall and our developers just had to integrate it into the app. You can choose another seat from “right there in the hall” or disable this function using the switch at the top of the screen if, for example, you are a regular theatre-goer and know which seat has the best view.

Покупка билета
Buying a ticket

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

All tickets get saved in the user’s personal account and each ticket has two thumbnails. The first is the usual QR code that becomes full screen if tapped. The second thumbnail has a seat icon, which is a unique feature that will help users with another common problem faced by theatre-goers. If it is your first time at the theatre, it can be hard to find your seat. Where is the dress circle? How do you get to the upper circle? We added an icon to the tickets that, when tapped, opens up a theatre navigator: from the main entrance all the way to the seat.

Прочая информация о кейсе

https://www.behance.net/gallery/117485011/mihajlovskij-teatr

Михайловский театр — один из главных театров Санкт-Петербурга. Он был открыт по указу императора Николая I, и в разное время на его сцене ставили спектакли и выступали Штраус и Шаляпин, Прокофьев и Мейерхольд. Не отказываясь от классических традиций, сегодня театр сочетает их со смелыми творческими поисками и новаторскими экспериментами.

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

The Mikhailovksy Theatre is one of St. Petersburg’s main theatres. It was opened at the order of Emperor Nicholas I and at various times Strauss and Chaliapin, and Prokofiev and Meyerhold staged productions and performed on its stage. The theatre upholds its classical traditions and combines them with bold creative exploration and innovative experiments.

The mobile app for booking tickets for performances at the Mikhailovsky Theatre has the same spirit. Its visual design has the grace of wonderful theatre production, but its inner workings are far from simple. We added a number of technical features that make choosing a play and buying a ticket even easier.

Текущая доступность работы

В разработке

Скриншоты