As one of the oldest French perfume houses, Guerlain has been on a constant quest for refined beauty and inherent grace. Abeille Royale, Guerlain's latest brainchild, boasts an impressive ability to stimulate the healing process within the skin. Made from the honey of the rare Black Bee from Ushant Island, Abeille Royale embodies Guerlain's prestige and drive for beauty.

Services:

website

consulting

Release date:

2014

January

Introduction

Under Fred & Farid agency's request, we crafted a website representative of "Abeille Royale". Through a unique user experience featuring an array of dynamic features such as 3D panoramas of the Ouessant Island we rendered this site as a truly one-of-a-kind, mirroring the exclusivity of the Abeille Royale line.

User Interface/ Experience

The Abeille Royale site is a mosaic of features and elements made to enhance users' experience. Audiences are first greeted on the one-page-website by a frame by frame video picturing the earth turning to meet Ouessant Island's coordinate.

Scroll Down

As the user scrolls further down the page, a video triggered by the scroll launches and presents the virtues of the product.
Then arrive the 3D panorama section were the user can decide to enter and discover the Ouessant Island through an interactive journey or simply continue his visit of the website

The Island

The visit then continues with a picture carrousel featuring visuals of the island followed by another video and information on the product.
To conclude the user finally get to discover the product itself with a packshot animated with a parralax effect and a final video teaching him how to use it.

The 3D Panorama

The 3D panorama we developed is part of what makes Abeille Royale's a unique website. To make sure that this feature could be viewed by all, we ensured that the 3D feature was compatible on every device and web-browsers.

Compatibility with all the browsers

In order to do so we developed several versions of the panorama, making sure the most performant version was always loaded on the browsers allowing it:
- A WebGL / Javascript version
- An HTML5 Canvas version
- A full CSS3D version
- And a 2D version for older web browser such as IE6

Mini-website

Finally in order to promote the project and support its launch, we developed a mini-website / game on WeChat "Guerlain Reedem".
WeChat is an ubiquitous messaging application in China, the service offers numerous possibility of web & mobile integrations making it an essential communication tool for a project like Abeille Royale.
The Redeem game featured a Guerlain AR bottle which users were required to 'flip over' by turning over their phones.

Once the bottle is turned upside-down, an animation introducing Abeille Royale would emerge, showing drops of 'Abeille Royale' falling before sending back the user to a 'lucky draw' screen.

Mobile & compatibility

To increase the website accessibility in China, we ensured a browser compatibility until IE8 (which represented around 40% of the client's target). We also developed a mobile version of the website, allowing more users to be introduced to Abeille Royale.