Visual Identity Design for a Face Tracking AR Experience

Introduction

The challenge was to create a browser based AR experience where users can try different makeup categories virtually using Augmented Reality, and can view makeup products that has been used to create that particular effect.

About Brand

Before diving into design, I looked up their online presence and collected few points about the brand personality & audience.

Starting with Visual Design

Before moving forward I want to clarify one thing, about primary color used in this experience, within the first round of reviews stakeholders asked me to change Ultramarine Blue to Antique Ruby, because that's the color resonated with Colorbar Cosmetic.

I picked blue because of it's Vibrance.

To capture the essence of the brand as bold, fashion-forward & playful I decided to give it a magazine look, not exactly like magazine but cut outs from magazine.

and I decided to go ahead with these below elements.

I stick to 2 fonts for this experience, both are serif fonts, one is Kalnia and another one is Vogue.

Below is the color palette:

1. Red being primary, because Colorbar cosmetics uses red color define itself (now they have changed it now gold/muddy orange).

2. Green being red's complementary color and yellow is it's adjust color, so I kept both of them as ascent color.

3. B/W as neutrals.

Designing Interface Design

Before moving forward with high fidelity designs in figma, I sketch out basic pathway for the experience, what things should I be adding, how will the user navigate through the experience, a basic user journey.

Then ideas were turned into this