Дизайн и разработка мобильного приложения для киноманов
Service apps
Subscription
Payments
GPS
QR-code
Admin panel
Native
eTicket
Киноголик
Maps
Mobile
Посмотреть вживую
iOS
Android
UX/UI
API
Приложение «Киноголик» — это месяц походов на любые фильмы в кинотеатрах России по абонементу. Пользователь выбирает фильм, сеанс и место, а приложение формирует электронный билет. Стоимость подписки автоматически списывается с банковской карты пользователя раз в месяц.
У клиента большой опыт в ведении бизнеса в офлайне, но он не занимался стартапами. Зато ими занимался менеджер Лайв Тайпинг, взявший управление проектом на себя. От Лайв Тайпинг ждали не просто дизайна и разработки двух мобильных приложений — мы должны были помочь довести продукт до такого уровня, чтобы создать новый для России рынок.
Клиент пришёл к нам подготовленным: у него было видение конечного результата, бриф, логика работы абонементов и маркетинговое исследование о потребительских привычках посетителей кинотеатров в России.
Приложение «Киноголик» — это месяц походов на любые фильмы в кинотеатрах России по абонементу. Пользователь выбирает фильм, сеанс и место, а приложение формирует электронный билет. Стоимость подписки автоматически списывается с банковской карты пользователя раз в месяц.
У клиента большой опыт в ведении бизнеса в офлайне, но он не занимался стартапами. Зато ими занимался менеджер Лайв Тайпинг, взявший управление проектом на себя. От Лайв Тайпинг ждали не просто дизайна и разработки двух мобильных приложений — мы должны были помочь довести продукт до такого уровня, чтобы создать новый для России рынок.
Клиент пришёл к нам подготовленным: у него было видение конечного результата, бриф, логика работы абонементов и маркетинговое исследование о потребительских привычках посетителей кинотеатров в России.
Абонемент
Цель приложения «Киноголик» — предложить сервис для удобной и единоразовой покупки абонемента в кинотеатры, с которым любители кино забудут о платёжных транзакциях и о том, как ряд, место и время суток влияют на стоимость билета. Нужно будет просто открыть «Киноголик», выбрать кино, выбрать место — и вуаля! — билет у тебя в приложении.
Абонемент
Цель приложения «Киноголик» — предложить сервис для удобной и единоразовой покупки абонемента в кинотеатры, с которым любители кино забудут о платёжных транзакциях и о том, как ряд, место и время суток влияют на стоимость билета. Нужно будет просто открыть «Киноголик», выбрать кино, выбрать место — и вуаля! — билет у тебя в приложении.
«Киноголик» — первый сервис по продаже абонементов в кино в России. На Западе это давно работающая модель, поэтому мы взяли приложение MoviePass и изучали на нём систему абонементов и ограничений и то, как люди ходят в кино.
Дизайн-проектирование
В то же время отечественные приложения для поиска фильмов и покупки билетов существуют давно. Основные — это «Киноход», «Рамблер.Касса», «Яндекс.Афиша» и «КиноПоиск». Пользователи привыкли к ним, поэтому мы решили не изобретать велосипед. Лучшие решения из этих приложений, касающиеся интерфейса выбора фильмов, покупки билетов, кинозала, афиши и прочего мы воплотили в «Киноголике».
Дизайн-проектирование
«Киноголик» — первый сервис по продаже абонементов в кино в России. На Западе это давно работающая модель, поэтому мы взяли приложение MoviePass и изучали на нём систему абонементов и ограничений и то, как люди ходят в кино.
В то же время отечественные приложения для поиска фильмов и покупки билетов существуют давно. Основные — это «Киноход», «Рамблер.Касса», «Яндекс.Афиша» и «КиноПоиск». Пользователи привыкли к ним, поэтому мы решили не изобретать велосипед. Лучшие решения из этих приложений, касающиеся интерфейса выбора фильмов, покупки билетов, кинозала, афиши и прочего мы воплотили в «Киноголике».
Мы продумали два сценария покупки абонемента
Покупка абонемента через покупку билета. Выбрав нужные места пользователи оформляют абонемент и получают билеты в кино.
Мы продумали два сценария покупки абонемента
Покупка абонемента через покупку билета. Выбрав нужные места пользователи оформляют абонемент и получают билеты в кино.
Покупка абонемента, до покупки билета. Абонемент оформляется в профиле пользователя, после чего можно получить билеты в кино.
Покупка абонемента, до покупки билета. Абонемент оформляется в профиле пользователя, после чего можно получить билеты в кино.
Преимущество «Киноголика» в том, что даже без регистрации можно посмотреть афишу, расписание сеансов на фильмы и карту с кинотеатрами.
Приложение ведёт пользователя по воронке, показывающей все прелести «Киноголика», и предлагает зарегистрироваться только тогда, когда он заинтересовался и захотел купить абонемент.
Приложение ведёт пользователя по воронке, показывающей все прелести «Киноголика», и предлагает зарегистрироваться только тогда, когда он заинтересовался и захотел купить абонемент.
Преимущество «Киноголика» в том, что даже без регистрации можно посмотреть афишу, расписание сеансов на фильмы и карту с кинотеатрами.
Приложение ведёт пользователя по воронке, показывающей все прелести «Киноголика», и предлагает зарегистрироваться только тогда, когда он заинтересовался и захотел купить абонемент.
Афиша
Афиша и расписание показывают фильмы на две недели вперёд. Разделы «Сейчас в кино» и «Скоро в кино» утоляют жажду самых увлечённых киноголиков.
Афиша
Афиша и расписание показывают фильмы на две недели вперёд. Разделы «Сейчас в кино» и «Скоро в кино» утоляют жажду самых увлечённых киноголиков.
Четверг — день, когда пора планировать поход в кино на выходных и в который проходят премьерные показы фильмов. Баннеры «Премьера» созданы как раз для того, чтобы ориентироваться в новинках. Каждый четверг баннеры обновляются.
Четверг — день, когда пора планировать поход в кино на выходных и в который проходят премьерные показы фильмов. Баннеры «Премьера» созданы как раз для того, чтобы ориентироваться в новинках. Каждый четверг баннеры обновляются.
В iOS-версии «Киноголика» пользователь может посмотреть расписание, описание и актёрский состав и при этом оставаться на одном экране — просто смещая карточку с расписанием вверх-вниз! Это достигается с помощью Bottom Sheet — белой плашки, которая убирается вниз и фиксируется в трёх позициях.
Карточка фильма
Посмотреть вживую
Bottom Sheet — это не только тренд в дизайне, но и психологически оправданный приём. Пользователю не всегда легко сориентироваться, когда он переходит с экрана на экран. Расписание было в приоритете, поэтому оно на первом плане.
Карточка фильма
В iOS-версии «Киноголика» пользователь может посмотреть расписание, описание и актёрский состав и при этом оставаться на одном экране — просто смещая карточку с расписанием вверх-вниз! Это достигается с помощью Bottom Sheet — белой плашки, которая убирается вниз и фиксируется в трёх позициях.
Bottom Sheet — это не только тренд в дизайне, но и психологически оправданный приём. Пользователю не всегда легко сориентироваться, когда он переходит с экрана на экран. Расписание было в приоритете, поэтому оно на первом плане.
Фильм и сеанс выбран. Теперь нужно выбрать место в кинозале. Для отрисовки кинозала мы снова взяли за пример «Киноход» и «Рамблер».
Кинозал
«Киноход»: экран с залом открывается в WebView. Работает не плавно, при зумировании тормозит и дёргается. Нам не нравится.
«Рамблер»: плавный и приятный зум. Нам нравится.
Кинозал
Фильм и сеанс выбран. Теперь нужно выбрать место в кинозале. Для отрисовки кинозала мы снова взяли за пример «Киноход» и «Рамблер».
«Киноход»: экран с залом открывается в WebView. Работает не плавно, при зумировании тормозит и дёргается. Нам не нравится.
«Рамблер»: плавный и приятный зум. Нам нравится.
Выбор места и ряда в кинозале — очень трепетный момент, особенно для фанатов кино. Поэтому мы поставили перед собой цель сделать этот опыт приятным и нативным.
У каждого места в зале и экрана есть координаты x и y, хранящиеся в базе данных. Приложение получает эти координаты и в реальном масштабе рисует на экране пользователя зал.
Выбор места и ряда в кинозале — очень трепетный момент, особенно для фанатов кино. Поэтому мы поставили перед собой цель сделать этот опыт приятным и нативным.
У каждого места в зале и экрана есть координаты x и y, хранящиеся в базе данных. Приложение получает эти координаты и в реальном масштабе рисует на экране пользователя зал.
Кинозал в iOS
Кинозал в Android
«Одной из самых сложных и интересных задач было геометрически правильное построение зала и его качественное позиционирование и зумирование для юзера в тот момент, когда он видел зал первый раз. Второй немаловажный задачей было не потерять качество номера места при зуме. Номер - это растровый компонент, который по техническим причинам нельзя нарисовать в векторе. Благодаря стандартной библиотеке QuartzCore можно увеличивать глубину текстовых лейблов: при зумировании увеличивается глубина, показываются другие слои и качество не теряется.»
— Владимир Вишнягов, тимлид iOS-отдела
«В Android SDK не было готовых элементов для того, чтобы на устройстве пользователя отображались посадочные места и киноэкран. Поэтому мы использовали низкоуровневые методы для рисования на „холсте экрана“ Canvas и программировали много логики. Но интересное всего было работать над изменением масштаба и перемещением по экрану пальца для разглядывания увеличенной картинки. В этом помогли линейные преобразования двоичных матриц. Этой областью нельзя удивить GameDev-специалистов, но для разработчика нативных Android-приложений это был настоящий вызов».
— Дмитрий Алексеенков, тимлид Android-отдела
Кинозал в iOS
Кинозал в Android
«Одной из самых сложных и интересных задач было геометрически правильное построение зала и его качественное позиционирование и зумирование для юзера в тот момент, когда он видел зал первый раз. Второй немаловажный задачей было не потерять качество номера места при зуме. Номер - это растровый компонент, который по техническим причинам нельзя нарисовать в векторе. Благодаря стандартной библиотеке QuartzCore можно увеличивать глубину текстовых лейблов: при зумировании увеличивается глубина, показываются другие слои и качество не теряется.»
— Владимир Вишнягов, тимлид iOS-отдела
— Владимир Вишнягов, тимлид iOS-отдела
«В Android SDK не было готовых элементов для того, чтобы на устройстве пользователя отображались посадочные места и киноэкран. Поэтому мы использовали низкоуровневые методы для рисования на „холсте экрана" Canvas и программировали много логики. Но интересное всего было работать над изменением масштаба и перемещением по экрану пальца для разглядывания увеличенной картинки. В этом помогли линейные преобразования двоичных матриц. Этой областью нельзя удивить GameDev-специалистов, но для разработчика нативных Android-приложений это был настоящий вызов».
— Дмитрий Алексеенков, тимлид Android-отдела
— Дмитрий Алексеенков, тимлид Android-отдела
Отрисовка большого количества пинов на карте и упорядоченный список кинотеатров потребовали от нас поработать над производительностью и оптимизировать вёрстку.
Любимые кинотеатры можно сохранять в «Избранном».
Любимые кинотеатры можно сохранять в «Избранном».
Кинотеатры
Кинотеатры
Отрисовка большого количества пинов на карте и упорядоченный список кинотеатров потребовали от нас поработать над производительностью и оптимизировать вёрстку.
Любимые кинотеатры можно сохранять в «Избранном».
Любимые кинотеатры можно сохранять в «Избранном».
В России есть две главных базы данных с информацией о кинотеатрах и их репертуаре: «Рамблер» и «Киноход». Нам нужно было выбрать одну из них, чтобы получать по API названия кинотеатров, названия фильмов, их расписание, афишу и прочую информацию. Но они не покрывают целиком ни страну, ни столицы, где тестировалось приложение.
Посчитав, что объединение двух баз данных в одну обойдётся дорого и повлечёт риски, мы остановились на «Рамблере», чья покрываемость в Москве и Санкт-Петербурге оказалась больше.
Посчитав, что объединение двух баз данных в одну обойдётся дорого и повлечёт риски, мы остановились на «Рамблере», чья покрываемость в Москве и Санкт-Петербурге оказалась больше.
В России есть две главных базы данных с информацией о кинотеатрах и их репертуаре: «Рамблер» и «Киноход». Нам нужно было выбрать одну из них, чтобы получать по API названия кинотеатров, названия фильмов, их расписание, афишу и прочую информацию. Но они не покрывают целиком ни страну, ни столицы, где тестировалось приложение.
Посчитав, что объединение двух баз данных в одну обойдётся дорого и повлечёт риски, мы остановились на «Рамблере», чья покрываемость в Москве и Санкт-Петербурге оказалась больше.
Посчитав, что объединение двух баз данных в одну обойдётся дорого и повлечёт риски, мы остановились на «Рамблере», чья покрываемость в Москве и Санкт-Петербурге оказалась больше.
Кинотеатры в Санкт-Петербурге
Кинотеатры в Москве
Кинотеатры в Санкт-Петербурге и Москве
Как сделать работу приложения быстрее
Чтобы ускорить работу системы, мы спроектировали два уровня кэширования данных: в памяти «Киноголика» хранятся данные с сервера приложения, а в кэше несколько часов хранятся данные с «Рамблера». В том и другом случае приложению не нужно обращаться за данными на сервер, что экономит время.
Как сделать работу приложения быстрее
Чтобы ускорить работу системы, мы спроектировали два уровня кэширования данных: в памяти «Киноголика» хранятся данные с сервера приложения, а в кэше несколько часов хранятся данные с «Рамблера». В том и другом случае приложению не нужно обращаться за данными на сервер, что экономит время.
В профиле пользователя, который уже купил абонемент, хранятся билеты на фильм и QR-коды. Поэтому приложение — это и есть билет. В буквальном смысле: посмотрите, какой красивый.
Профиль пользователя
В профиле можно сменить абонемент «Киноголик» на «Кинодуэт». Пользователи без абонемента видят в профиле предложение купить его.
Профиль пользователя
В профиле пользователя, который уже купил абонемент, хранятся билеты на фильм и QR-коды. Поэтому приложение — это и есть билет. В буквальном смысле: посмотрите, какой красивый.
В профиле можно сменить абонемент «Киноголик» на «Кинодуэт». Пользователи без абонемента видят в профиле предложение купить его.
Регулярные автоплатежи
Чтобы пользователь не вводил данные банковской карты при каждой новой покупке, мы настроили автоматическое привязывание карты. Карт может быть несколько, они могут быть любых банков, но одна будет основной, с которой будет автоматически списываться ежемесячный платёж.
Регулярные автоплатежи
Чтобы пользователь не вводил данные банковской карты при каждой новой покупке, мы настроили автоматическое привязывание карты. Карт может быть несколько, они могут быть любых банков, но одна будет основной, с которой будет автоматически списываться ежемесячный платёж.
Подробнее о платежах в Киноголике
Если в приложении есть оплата, мы работаем с платёжной системой Stripe. В ней много полезных возможностей, которые нам нужно лишь грамотно интегрировать и настроить. Но в текущих российских реалиях будет правильным довериться отечественному сервису, который будет работать независимо от блокировок.
Мы выбрали «Сбербанк» и его платёжный шлюз. Клиенту подходили условия сотрудничества, но мы столкнулись с ограничениями его функциональности. Поэтому регулярные платежи по расписанию и логику двух попыток списания (в предпоследний и последний день до окончания подписки) мы дописали сами.
Мы выбрали «Сбербанк» и его платёжный шлюз. Клиенту подходили условия сотрудничества, но мы столкнулись с ограничениями его функциональности. Поэтому регулярные платежи по расписанию и логику двух попыток списания (в предпоследний и последний день до окончания подписки) мы дописали сами.
Кэширование экранов
«Киноголиком» можно пользоваться без регистрации и авторизации: например, смотреть афишу с фильмами или карту. Получается, что на тот или иной экран можно попасть разными путями.
Навигация запутывается. Как же направить пользователя туда, куда он идёт? Для этого мы написали координатор, который строит полный стек экранов от точки A до точки B. В этом ему помогает архитектура полного кэширования, уже проверенная на проекте Security Pulse.
Навигация запутывается. Как же направить пользователя туда, куда он идёт? Для этого мы написали координатор, который строит полный стек экранов от точки A до точки B. В этом ему помогает архитектура полного кэширования, уже проверенная на проекте Security Pulse.
Кэширование экранов
«Киноголиком» можно пользоваться без регистрации и авторизации: например, смотреть афишу с фильмами или карту. Получается, что на тот или иной экран можно попасть разными путями.
Навигация запутывается. Как же направить пользователя туда, куда он идёт? Для этого мы написали координатор, который строит полный стек экранов от точки A до точки B. В этом ему помогает архитектура полного кэширования, уже проверенная на проекте Security Pulse.
Навигация запутывается. Как же направить пользователя туда, куда он идёт? Для этого мы написали координатор, который строит полный стек экранов от точки A до точки B. В этом ему помогает архитектура полного кэширования, уже проверенная на проекте Security Pulse.
Полное кэширование — зачем и почему?
Приложение должно запоминать много экранов и данных, поступающих от пользователя и с сервера. По направлению пользователя к цели данные тянутся и накапливаются, а если нужно вернуться на предыдущие экраны, то придётся восстанавливать всё как было.
Суть архитектуры придуманного нами координатора в том, что в приложении есть база данных, которая кэширует любой запрос к серверу и хранит полученную информацию: город, афиши, фильмы и т. п.
Как работает координатор и полное кэширование:
- неавторизованный пользователь открывает экран фильма и выбирает место в кинозале
- приложение предлагает пользователю авторизоваться и купить подписку
- пользователь зарегистрировался, авторизовался и купил подписку. Теперь его нужно вернуть на экран с кинозалом
- с помощью координатора экраны собираются в нужный стек, по которому пользователь незаметно проходит назад. Чтобы сделать это, нужно получить идентификаторы кинотеатра, фильма и зала из координатора, а актуальные данные о сеансе и месте (который мог пройти и которое могли занять) — из базы данных или с сервера.
Мистер Билетик
Персонаж, который олицетворял бы бренд, вышел случайно и от чистого вдохновения. Это не было нашей задачей. Первое воплощение умилило всех, в том числе клиента.
Мистер Билетик
Персонаж, который олицетворял бы бренд, вышел случайно и от чистого вдохновения. Это не было нашей задачей. Первое воплощение умилило всех, в том числе клиента.
На лендинге Мистер Билетик выглядит эффектнее: с разными деталями, с попкорном, с Миссис Билетессой. И так он стал олицетворением приложения.
На лендинге Мистер Билетик выглядит эффектнее: с разными деталями, с попкорном, с Миссис Билетессой. И так он стал олицетворением приложения.
Иконка
Новому и неизвестному приложению не подходят абстрактные образы, поэтому логотип должен быть связан с идеей приложения, быть запоминающимся. Так дизайнер включил в него букву К и киноплёнку.
Иконка
Новому и неизвестному приложению не подходят абстрактные образы, поэтому логотип должен быть связан с идеей приложения, быть запоминающимся. Так дизайнер включил в него букву К и киноплёнку.
Работа над проектом началась летом 2017 года и закончилась в декабре 2018 года. Спустя 9 месяцев после запуска приложение установили более 15 тысяч пользователей Москвы и Санкт-Петербурга.
Результаты и перспективы
В категории «Развлечения».
Золотое Приложение
Золотое Приложение
В категории «Лучшее приложение медиа / СМИ». Tagline Awards
В 2019 году Киноголик взял награды
Android-пользователей
7 000
8 000
2 000
iOS-пользователей
покупок абонементов
Пока клиент договаривается с инвесторами и планирует расширение на другие города России, мы оказываем постоянную техподдержку, планируем доработать тарифный план, ввести систему подарочных сертификатов и просто делать приложение лучше.
Результаты и перспективы
Работа над проектом началась летом 2017 года и закончилась в декабре 2018 года. Спустя 9 месяцев после запуска приложение установили более 15 тысяч пользователей Москвы и Санкт-Петербурга.
В категории «Развлечения».
Золотое Приложение
Золотое Приложение
В категории «Лучшее приложение медиа / СМИ». Tagline Awards
В 2019 году Киноголик взял награды
Android-пользователей
7 000
8 000
2 000
iOS-пользователей
покупок абонементов
Пока клиент договаривается с инвесторами и планирует расширение на другие города России, мы оказываем постоянную техподдержку, планируем доработать тарифный план, ввести систему подарочных сертификатов и просто делать приложение лучше.
Скачайте Киноголик в App Store и Google Play
Аккаунт-менеджер
Сергей Мячин
Сергей Мячин
Руководитель проекта
Владислав Сиренко
Степан Белецкий
Владислав Сиренко
Степан Белецкий
Дизайнеры
Татьяна Моренко
Роман Беляев
Татьяна Моренко
Роман Беляев
iOS-разработчики
Роман Солодянкин
Владимир Вишнягов
Роман Солодянкин
Владимир Вишнягов
Android-разработчики
Андрей Дёмин
Дмитрий Алексеенков
Андрей Дёмин
Дмитрий Алексеенков
Back-end разработчик
Иван Кудинов
Иван Кудинов
Front-end разработчик
Сергей Алёшин
Сергей Алёшин
QA
Роман Палачёв
Роман Палачёв
Заполните форму, чтобы обсудить свой проект с нашими экспертами
Заполните форму, чтобы обсудить свой проект с нашими экспертами