Vivienne Sabo AR -приложение

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

Мы разработали удобное мобильное приложение, которое помогает клиентам Vivienne Sabo продавать косметику онлайн, и за счет популярной AR-механики привлекать внимание новых пользователей. Приложение уже доступно для IoS и Android.
__________________________________
We developed a user-friendly mobile application that helps Vivienne Sabo customers to sell cosmetics online, and to attract new users through the popular AR mechanic. The application is already available for IoS and Android.

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

Обычный магазин и мобильная версия сайта Vivienne Sabo не покрывали всех маркетинговых задач, поэтому целью было не просто создать удобный способ покупки косметики для текущих клиентов, но и привлечь новых, за счет популярной AR-механики.
______________________
An ordinary store and mobile version of Vivienne Sabo website didn’t cover all marketing tasks, so the goal was not just to create a convenient way to buy cosmetics for current customers, but also to attract new ones, due to the popular AR-mechanics.
______________________

ДИЗАЙН-РЕШЕНИЯ

Чтобы улучшить взаимодействие с приложением, мы разработали 2 пользовательских сценария:

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

2. Пользователь не знаком с брендом и/или никогда не пользовался его продукцией. Делаем фокус на AR, как ключевом инструменте заинтересовать пользователя.

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

РАЗРАБОТКА И ТЕХНОЛОГИИ

У клиента уже была web-версия магазина на Magento. Мы разработали спецификацию требований для разработчиков магазина и после реализации с их стороны интегрировали API в наше приложение. Теперь оба клиента web и mobile управляются из одной админки.

Для сбора и вывода данных мы использовали связку Firebase + BigQuery + DataStudio.

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

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

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

БАЛАНС МЕЖДУ ТЕХНОЛОГИЕЙ И МАКИЯЖЕМ

В рамках работы над AR частью важной задачей был баланс между стоимостью решения и качеством распознавания/наложения. Изучив готовые движки мы поняли, что за все время жизни приложения на лицензии придется потратить большую часть бюджета, поэтому решили использовать связку dlib + openCV.

Когда мы дошли до самых больших текстур, до пудры и тонального крема, мы столкнулись с потолком производительности библиотек. Такой большой объект требовал множество ресурсов.
Пойти на снижение качества текстур мы не могли, поэтому ввели некоторые ограничения по устройствам: все устройства условно поделили на три группы:

1. Устройства, на которых будет доступно наложение только по фото
2. Устройства, на которых доступен AR, но без «больших текстур» (пудра и тон)
3. Устройства, которым доступно все.

Мы провели несколько дополнительных экспериментов с различными технологиями и нашли решение в использовании OpenGL для рендеринга изображения, что дает прирост производительности около 10x. Планируем реализовать это в ближайших релизах.
______________________

To improve interaction with the application, we developed 2 custom scenarios:

1. The user is already a brand-savvy customer of the company. Our focus was on the advantages of buying through the app. In this case, we focused on the purchase advantages of our app: promotions, personal recommendations, discounts, and we lead them to the purchase.

2. Users not familiar with the brand and/or its products encounter an enticing AR feature which generates interest and excitement.

AR mode and icons.
We developed a simple and clear interface for the AR mode mainly focusing on visual images.

To keep the interface simple, we avoided text and focused on icons. We chose friendly, intuitive icons understandable to every woman.

DEVELOPMENT AND TECHNOLOGIES

The client already had a Magento web version of the store. We developed a requirements specification for the store's developers. When they were done, we integrated an API into our application. Now both web and mobile clients are managed from one administrative panel.
For data collection and output we used Firebase + BigQuery +DataStudio.

Developing textures
It was important for the client that cosmetics were virtualized as precisely as possible and looked natural. Our guiding principle was the question: "Would a woman share this photo on social media?"

The texturing stage was not easy. To best convey qualities like gloss, matte, glitter, and shine, textures had to be drawn with complicated overflows and glitter.

For lip gloss we prepared a separate glare texture overlaid on other products. For eye products, every texture was drawn as an illustration. We sketched more than 30 options for each category until we found the ideal one.

BALANCE OF TECHNOLOGIES AND MAKEUP

While working on the AR component, we had to find a balance between the cost of implementation and the quality of facial recognition and overlay. The best solution was to license a third-party framework, in this case, dlib + OpenCV.

While developing the larger textures for facial powders and concealers, we were faced with the problem of limited library capacity. We could not reduce the quality of the textures, so we imposed some limitations by dividing devices into three groups:

1. Devices on which the overlay would be available only in photos.
2. Devices on which the AR would be available, but without "big textures" (face powder, color tone).
3. Devices on which everything is available.

We did several additional experiments with different technologies and found a solution using OpenGL for image rendering that increased productivity tenfold. We plan to implement it in future releases.

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

Разработали мобильное приложение для выбора, тестирования и покупки косметики с помощью камеры дополненной реальности (AR) в режиме реального времени.

Vivienne Sabo — марка декоративной косметики, представленная в 15 странах мира: России, Белоруссии, Украине, Казахстане и во многих других. Знаменитая тушь Cabaret завоевала сердца миллионов женщин.
____________________

We developed a mobile application for choosing, testing, and purchasing cosmetics using an AR camera in real-time.

The Vivienne Sabo — cosmetics brand is available in 15 countries, including Russia, Belarus, Ukraine, and Kazakhstan. Their Cabaret mascara won the hearts of millions of women. The brand works with beauty bloggers and influencers and is constantly looking for new and creative approaches to client interaction.

Скриншоты