Bobbi Brown Case Study
The following work represents a situation where we were proposing a new Augmented Reality feature to our Bobbi Brown client. The client was looking for something new and unique that tapped into the tech of the device. We had just purchased a new AR library that allows our ads to access the camera feature on the device and recognize the user’s facial structure.
bobbi brown - AR - Version 1
Design Breakdown
Challenge: Pitch a new, unique ad unit to the Bobbi Brown client that includes an embedded video and utilizes a feature of the device
Page 1 Layout - The layout of the ad places emphasis on the elements that will help the user understand the content. Since the user will typically read from top to bottom, the logo is placed at the top in order to receive brand recognition. The video follows the logo since the the main KPI for this brief was video completion rate. The calls to action are placed toward the bottom since the user’s thumb will likely be closer to this area on their device making it easier for them to interact.
Auto-Playing Video - Since the main KPI for the client’s campaign was video completion rate, the video auto-played upon the ad’s load. This will also increase the likelihood that the user will remain engaged with the content resulting in a higher engagement rate metric as well.
Camera Button, Page 1 - The button is designed to look clickable while also giving context with what lies behind. The image of the lips makes up the shape of the button. It includes a slight shadow in order to indicate that is can be tapped down. The call to action copy and animation of the four corners draws the users attention toward it. The copy “find your shade” speaks to the action that will be completed when the user engages. The back and forth, central motion of the four corners draws the users eyes in to read the copy as well.
"Shop Now” Call to Action - This button provides the option for the user to click out and redirect to the client’s site. The client was also measuring click-through rate as well so it is important to include a clear, visual indication that the user can access more info if desired.
Camera Functionality - Once the user taps the camera button, the front camera of the device is activated. The red lipstick color will recognize the user’s lips right from the beginning using the augmented reality back-end tech. The logo, product name and product image are included in the filter for brand recognition. The option to change the lipstick color makes it an engaging experience by giving the user control over the ad. Once they take the photo, they have to option to retake, share the image to Facebook or go back to the first page.
From here, we decided to move forward with developing a working demo that highlights the camera augmented reality feature to showcase to our clients. This called for a redesign in order to improve the user experience of the camera functionality.
Researching Prompts & Permission Requests
For both iOS and Android, permission requests are triggered when the app or website tries to activate a feature of the device. In this case for the Bobbi Brown example, the permission request will trigger when the user tries to access the camera functionality. Permission prompts are designed as a best practice before permission requests in order to increase the likelihood of engagement.
Permission Prompt Permission Request
Permission prompts are considered a more “friendly” way to ask for permission from the user
They capture user intent by creating the buttons labeled “sure” or “not now”
If they answer “sure” on the prompt, it increases the likelihood they will answer “ok” on official request from the device
*https://documentation.onesignal.com/docs/permission-requests
Incorporating Research Findings
Bobbi Brown - AR - Version 2
Full Experience - Accepted Camera Access Denied Camera Access
Design Breakdown
Challenge: Redesign the Bobbi Brown ad unit to put more emphasis on the camera feature and incorporate the permission request research findings
Permission Prompt - The permission prompt was added to ask the user if they would like to “try on” the lipstick in the augmented reality experience. The prompt fades in from the start of the ad unit to call attention to it. The buttons are clearly designed to indicate they are interactive.
Background Image - This background image was chosen so the user can see the product being applied to a model in order to make the connection to the “try on” copy and the experience they will partake in.
If Camera Access is Denied - If the user happens to choose “not now” on the permission prompt or denies access on the device request, the user will receive the logo, product name/image and a “shop now” call to action in order to be given the option to redirect to the website if they choose.
After developing the live demo of version 2, it was concluded that a new prompt was needed at the beginning of the camera experience.
Bobbi Brown - AR - Version 3
Full Experience - Final Version Position Face Prompt
Design Breakdown
Challenge: Add a prompt to let the user know to position their face in the frame of their phone
After developing version 2 and testing out the AR technology, we noticed that the lipstick colors did not recognize the user’s lips when they were too close to their device or too far away. In order try to prevent this, the position face prompt was added to opening of the camera experience. The prompt demonstrates how the user should position themselves within their device frame using simple icons and language.