Previous Example / Next Example
Open this page on desktop >1200px to see animation
We developed a mobile application for choosing, testing, and purchasing cosmetics using an AR camera in real-time.
CLIENT AND TASK
APP FOR VIVIENNE SABO WITH ECOMMERCE & MAKEUP AR
The Vivienne Sabo — cosmetics brand is available in 15 countries, including the USA and Europe. 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.
CLIENT
To develop a clear and visually attractive app to improve the purchasing experience for current clients and attract new ones by developing popular AR mechanics. Here are more of our case studies for retailers and the beauty industry
TASK
DESIGN AND SOLUTIONS
We interviewed Vivienne Sabo representatives and industry experts and analyzed the needs of potential customers and the brand's competitors.
We had some initial ideas that were difficult to implement in the first release, so we focused on key functionality and tabled our other ideas for future implementation.
user scenarios:
2
The user is already a brand-savvy customer of the company. Our focus was on the advantages of buying through the app.
Users not familiar with the brand and/or its products encounter an enticing AR feature which generates interest and excitement.
VIVIENNE SABO APPLICATION
1.
ONLINE STORE
ONLINE STORE
2.
AR MODE
AR MODE
3.
MEDIA
MEDIA
CATALOG, PRODUCT CARD
BASKET, ORDER PROCESSING
AR MODE INTERFACE
PRODUCT TEXTURES, IMAGES
2. AR MODE
1. ONLINE STORE
BLOG, FAVORITE,
SERTIFICATES
SERTIFICATES
3. MEDIA AND ADDITIONAL FUNCTIONS
1
2
SKETCHING
LAYOUTS
UI:
The prototype and design were created using Sketch and Zeplin. This combination simplified the transition between stages and generated additional layouts for further development.
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.
To keep the interface simple, we avoided text and focused on icons. We chose friendly, intuitive icons understandable to every woman.
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.
For data collection and output we used Firebase + BigQuery
+ DataStudio.
DEVELOPMENT
DEVELOPMENT
DEVELOPMENT
AND TECHNOLOGIES
DEVELOPING TEXTURES
DEVELOPING TEXTURES
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.
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.
Previous Example / Next Example
Open this page on desktop >1200px to see animation
While working on the AR component, we had to find a balance between cost of implementation and quality of facial recognition and overlay. The best solution was to license a third-party framework, in this case dlib + openCV.
BALANCE OF TECHNOLOGIES AND MAKEUP
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:
Devices on which the overlay would be available only in photos.
Devices on which the AR would be available, but without ‘big textures’ (face powder, color tone).
Devices on which everything is available.
Devices on which the AR would be available, but without ‘big textures’ (face powder, color tone).
Devices on which everything is available.
1
2
3
2
3
We did several additional experiments with different technologies and found a solution using OpenGL for image rendering that increased performance tenfold. We plan to implement it in future releases.
Previous Example / Next Example
Open this page on desktop >1200px to see animation
Interested?
You have an idea for a cool application, but you don't know where to start?
Contact us and we'll find a solution!
Contact us and we'll find a solution!
