Art, Fashion, and Code

The Ask


Marc Jacobs International, LLC made a request to the creative and technological minds at HYFN: using an original art print from the Marc Jacobs Scream Queen Dress it inspired, design a custom piece of creative content to promote the 2016 Marc Jacobs Spring 2016 collection. Our answer: a multi-platform photo booth experience that would make the user’s face a part of the original artwork that inspired the collection’s prints.

Our Role
UX
DESIGN
DEVELOPMENT

Finding the Best Solution

User Experience


An in-store retail experience should be frictionless and delightful. In creating a web-based application for use in retail—as well as at events and across the web—the main challenge for our UX team was to take a multi-step process, subject to the varying technological limitations of each platform, and distill it into something that is easy and enjoyable.

This heavily informed our design process, inspiring deliberately visual step-by-step directions to guide users through the process of taking multiple selfies for use in the final output. We included tips and hints for the user on how the photos should be taken, while also providing visual examples of what each suggested pose should look like in order to walk users through the process with minimal friction.

You’re a Part of the Art

Design


Bringing a static piece of artwork to life in a dynamic, interactive manner was the primary challenge for designers and developers alike. We needed to recreate the actual artist’s print, while knowing that it needed to be reconstructed in a custom manner on the backend. The pattern was recreated across a number of separate Photoshop layers, which we were ultimately able to re-stack in the backend of the site, placing the user’s images in pre-defined spaces.

The result was a seamless experience that created a truly one-of-a-kind piece of art featuring the user’s face as a central component of the dress motif.

Prompted

Step 1


Before taking each photo, users are prompted to make a specific pose, which helps keep the final output within its original theme. Users take a total of four images.

Pose

Step 2


Users are then able to photograph themselves making the prompted pose, and are offered a chance to confirm their photo or take a new one.

Prepare

Step 3


After all four images have been taken, users are asked to align a series of dots along the edge of their face to help us properly crop their head for placement in the print.

Print

Step 4


Finally, users have the ability to print their final image or share on their social networks.

A Global Application

Development


In order to accommodate a number of digital and physical customer touch-points, we were required to build an app that could easily translate to various platforms, including: touch-enabled devices such as cellphones and tablets; desktop web browsers; and a kiosk or photo booth application to be used at events. Both browser and native iOS clients were built. Python, SciPy, and Dlib were used for facial feature recognition. Ansible was employed to manage provisioning and orchestration.

Facial Feature Recognition

Inserting the user’s face into the existing pattern required foolproof facial feature recognition, allowing us to quickly and accurately recognize the user’s face, eyes, and mouth for accurate application of creative filters. To ensure accuracy and ease of use, we opted for a backend solution using Dlib, a modern C++ toolkit containing machine learning algorithms and tools. Shifting the processing to the back-end allowed the scalability to meet demand as traffic surged, resulting in a highly stable and ultimately successful app.

In-Store/Event Kiosks and Photo Booth

To make the in-store and event experiences seamless, we used an iOS wrapper application that would interface with the application through javascript. In contrast to the mobile web app, this allowed us to launch the native camera with full control over its parameters. This format also allowed for more customization with regards to final output, allowing our application to interface with the printers being used on-site.

Making it Happen

Production


A strong example of the benefits of HYFN’s cross-functional approach, this project required us to conquer many unique technological and creative challenges in a short timeframe: creating a single product that could offer tailored experiences for different users in different environments; localization to present the app in English, French, Spanish, and Italian; optimized interaction design to move participants using shared devices quickly through the experience; controlling iPad camera and wireless printer hardware; and troubleshooting issues for international Marc Jacobs' teams.

Screaming Loudly

The Results


We worked hand-in-hand with the digital, technical, marketing, and brand teams at Marc Jacobs to turn around a high-value product in a short amount of time, hitting deadlines to provide functionality for in-store events that had been planned months in advance.

More importantly, we created a uniquely engaging interactive experience that not only further elevated and integrated the brand message, but also gave fans something to share and cherish.

Let's Do Something Great

Smart thinking, compelling design, and a process that flourishes with your contributions.

Please rotate
your device.

12777 Jefferson Boulevard
Los Angeles, CA 90066

(310) 937-1400

workwithus@hyfn.com