AzoftКейсыТанцы со звездами: Маркетинговое мобильное приложение для Oriflame

Танцы со звездами: Маркетинговое мобильное приложение для Oriflame

Илья Катаев Октябрь 12, 2017

Oriflame App

Как всё начиналось

Весной 2017 года мы начали работать по субподряду на Oriflame. Это международная косметическая корпорация, Apple от мира сетевых продаж косметики. В апреле мы приступили к проекту. Заказчик отвечал за дизайн и бизнес-логику, мы — за разработку приложений на iOS и Android.

Предполагалось, что приложение будет построено на технологиях дополненной реальности. Но когда мы проанализировали детальные требования заказчика и всё оценили, стало понятно: AR-технологии тут не нужны. Рассказали клиенту, какие есть варианты, взвесили за и против. Остановились на фильтрах как более простом и надёжном варианте.

В чем суть приложения?

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

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

Про iOS

На всё про всё ушло 3 месяца. Были доработки по просьбе клиента, но работу сдали в срок. Писали на Swift, потому что он новее и удобнее, чем Objective C. Приложение получилось простым и удобным со стороны пользователя, но неожиданно сложным с точки зрения реализации.

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

Основным в разработке iOS-версии, да и вообще в разработке в целом, стал процесс наложения видеослоя с танцором-наставником на видео пользователей. Искали для этого подходящую библиотеку. Единственным вариантом для обработки фото и видео оказался открытый GPUImage. Другие фреймворки не решали поставленной задачи. С GPUImage нам повезло. Изначально написанный под iOS, он не потребовал дополнительных доработок. Единственное что расстроило — нехватка документации. Но мы были готовы к такому повороту, ведь это распространённая проблема среди самописных фреймворков.

Про Android

С Android-версией было гораздо сложнее, но мы справились быстрее — за два месяца. Пришлось изрядно повозиться с библиотекой. Суть в том, что GPUImage написан под iOS. Для разработки под Android его использовать нельзя. “Нет, можно!”, — подумали мы и использовали. Перед этим, конечно, изучили все возможные альтернативы. Анализ трудозатрат показал, что использовать GPUImage и самостоятельно дописать шлюз для портирования на Android — лучший вариант. Выходило быстрее и проще, чем маяться с другими библиотеками.

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

Как и в случае с iOS-версией, видео не всегда правильно воспроизводилось. В этот раз помог опыт коллег из iOS-отдела. Всё быстро исправили. Иногда было сложно, но мы обучились полезным навыкам. Например, с аппаратным ускорением мы сталкивались только дважды. А технология полезная, если нужно освободить процессор от тяжёлых, ресурсоёмких операций.

Клиент остался доволен и запустил рекламную кампанию 17 июня, как и планировалось.

Что у нас получилось

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

Просмотр урока танца

Урок танца

Выбор танцора

Выбор танцора

Запись видео с выбранным танцором

Запись видео

Наложение эффектов

Наложение эффектов

Публикация видео в соцсетях

Публикация видео

Какие технологии мы использовали

iOS: Swift, iOS SDK, R.swift, Alamofire, iVersion, Pods

Android: Java, Android SDK, Open GL

Social integrations: API Graph и Facebook SDK. Для Вконтакте - API VK и VK SDK

Аналитику на Yandex и Facebook собирали с помощью Yandex AppMetrica и Facebook Analytics.

Итого

Проект для Oriflame — пример слаженной работы. Дизайн был на совести клиента, мы помогали с мокапами. Заказчик охотно выслушивал наши пожелания по улучшению UX и внедрял изменения. Мы предлагали варианты, когда не знали, какое архитектурное решение лучше реализует поставленные бизнес-задачи.

Было непросто, но интересно, и иногда — волнительно. Лишний раз потренировались в OpenGL, убедились в пользе аппаратного ускорения, научились адаптировать iOS библиотеки под Android разработку.

Проектом гордимся, поставленные задачи он выполнил. Заказчик рассчитывал на 2000-3000 загрузок к моменту запуска флешмоба. А скачали 5000 раз только с Google Play. Android и iOS версии вместе скачали 19967 раз. Показатели по охвату аудитории в социальных сетях тоже радуют: 5000 публикаций, 300000 просмотров у трёх самых популярных постов в инстаграме. Средний балл в Google Play — 4,6.

Комментарии

комментарии