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.
Introduction
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.
Related projets
Seen Tell us!