hennessy.com

This is the US site for Hennessy cognac. Odopod has been Hennessy’s digital partner since 2012 and it is one of the few sites Odopod has maintained over the years, allowing us to iterate and improve it over time.

More than 70% of traffic is from mobile devices, making performance and load times even more important.

Modernizing the stack

The site is built with Django and the frontend was originally created by another vendor. Unfortunately, the frontend was built for a micro site and as more features and sections were added, it had trouble scaling. One main JS file used to import all the JavaScript for other pages using RequireJS and conditionally initialize it. Dependencies were hard to keep track of, there was a single massive JavaScript bundle sent to the client, and Compass was deeply entangled in the Ruby Sass code.

In 2016, Hennessy went through a design “revamp” and we started to move away from RequireJS with a small webpack build and ES6. We still had a single bundle and many scripts with RequireJS’ define pattern, but we started to manage our dependencies with npm. We also started writing our CSS with SCSS instead of Sass.

During early 2017, I started work on modernizing the build system:

• Code-splitting creates a JS bundle per page, reducing the initial code the browser needed to download and parse.
• All dependencies are managed through npm.
• Everything is SCSS.
• Asynchronously load common and page-level CSS to avoid render-blocking.
• Dynamic imports (import()) for code not needed immediately on page load, like modals.
• Utilize requestIdleCallback to initialize sections of the page “below the fold” when the browser has a moment, preventing main thread unresponsiveness on page load.

Notable projects

I’ve worked quite a bit on Hennessy. Most of it is still there, but some of the experience pages are gone. Here are some things that are still live:

Store Locator

Using Google Maps and the addresses of locations which sell Hennessy, the user can find stores closest to them and all over the US. Click “Find a Store” to explore it.

X.O The Odyssey

A scroll-jacked experience page for one of Hennessy’s marks. It uses CSS 3D transforms to rotate slices of an image, kind of like a Rubix Cube.

Modular Campaign

This section of the campaign features some parallax scrolling and temporary fixed positioning. CMS users add a header and then as many chapters and sections within those chapters as they want and an optional footer.

Hennessy Academy

The Hennessy Essentials quiz is a Preact app and the other quizzes reuse some of the Preact components from the Essentials quiz. As simple as it is, I really like the Preact component I made for the sticky navigation which animates the titles as the user scrolls through sections of the page.

Cocktail Quiz

The cocktail quiz touched many parts of Hennessy, including the user accounts and lead to some good refactoring of cocktail product tiles. The quiz is also built with Preact.