Cosmo + Maybelline: Augmented Reality

This user experience and interface design was created for a project with Cosmopolitan magazine. While the issue had multiple pages enabled with an augmented reality (AR) experience, the greatest challenge was in determining how to create a shop-able makeup tutorial for a multipage Maybelline ad. The solution we went with was a product carousel I designed to accompany video player controls. This allowed users to browse through the products highlighted by the video while the video was playing in AR. Users could select any of the products they were interested in and make a purchase directly from Maybelline's site.

The project had been active for awhile prior to my engagement, but when some of the earlier plans to create a more 3D-focused experience were dropped, I was asked to step in to quickly provide a 2D solution. I had to jump directly to high fidelity designs because I only had a few days to deliver to our development team. Once I had my initial designs created I provided stakeholders with a proposal of the user flow and UI look and feel. I attempted to make the visual design complement both the Cosmo Now app and Maybelline's online branding.

One of the proposal docs

After implementing some feedback, I spun up the design specs via a Zeplin project and cut assets for the dev teams. I also rapidly documented the user requirements. Motion design guidance was created in Principle and shared as video and Mac apps exports.

Zeplin screenshot

The implemented designs closely matched the specifications I provided. Only one feature had to be dropped due to the timeline our developers were working with. This particular feature allowed a user to move their phone's camera away from the trigger image and continue video playback as a floating thumbnail, permitting the user to focus on following along with the tutorial rather than perpetually hold their phone towards the magazine. Fortunately we were able to keep the expand-to-fullscreen feature, which made it possible to achieve a similar use case.

The experience was integrated into Cosmo Now's app for iOS and Android for their March issue of Cosmopolitan.

Principle-created motion design

 March issue of Cosmopolitan

March issue of Cosmopolitan