The Make-up Studio

Harrods

The brief

Create a copy of the Make-up Studio iPad app for a competition.

Using The Make-up Studio, users can create a beauty look and enter it into our competition. Or they can browse the gallery of looks and vote for their favourite. The creator of the most popular look will receive £250 worth of make-up.

Big idea: Discover the products of famous make-up brand while having a digital experience

My role in the project

My mission was to build the HTML5 canvas where users can draw the different layer. Provide a well documented code for the other developer doing the website.

User journey

First, the user chooses a model (2 skin tones available in this version), he chooses the makeup to use and apply them to the appropriate area. He has the possibility to undo, redo, reset the stage and start all over, change of skin tone, save and submit to enter the competition

How it works

We created a XML with a list of items (make-up products) with the area corresponding. You can't put lipstick on the model eyes for instance.

When a product is selected, we add an invisible layer on the top of the canvas, drawing using your cursor in the correct area slowly revealed the make-up layer giving the feeling of applying the product.

Lashes Lashes Lashes

Technology used

The code I delivered was mainly Javascript. The front-end of the competition site was built by an other developer.

I used EaselJS (part of createjs.com) for the canvas reveal effect, canvas2image to generate the final image. LocalStorage to keep all the state in a JS array.

We store in an array all products the users use during his experience. At the end, we generate an image from the canvas, we convert the image in base64 and save it in the database with the user details. That's where my part stop. This then allow us to do a gallery of looks showing the list of products used to create this make-up look.

Once the system is in place it's possible to add as many layers / products as we wish.
We have two models for the web version there is no limit (just a lot of artwork needed)

Final results

The Make-up tool was a success. It's very playful. The competition is now closed, but you can still access the website at http://themakeupstudio.harrodsmagazine.com

Hired by GadgetMedia to work on site at Harrods Media. All brands featured own the respective copyright of the projects presented.