Oriflame

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

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

Весной 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 июня, как и планировалось.

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

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

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

Oriflame app onboarding

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

Selecting a dancing partner

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

Shooting a video

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

Adding effects

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

Social sharing

 

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

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.

Технологический стэк

  • java
  • Android
  • IOS

Примеры проектов

Запросите консультацию эксперта

Отправить заявку

Вы можете загружать файлы до 200 Мб в форматах doc, docx, pdf, odt, ott, txt, jpeg, xls, rar, zip, 7z

Фильтр

Закрыть

Технологии

Индустрии