Loading ...

Responses by Kristi Jones, director of account services; Leo Rabelo, digital director; and Cory Dobson, senior front-end developer, Traina Design.

Background: Brooklyn Brewery is a beloved brand with loyal, craft beer-drinking fans spread across the globe. The brand’s unique, vibrant personality has always been well represented in its packaging and products, but its website had fallen far behind. It was an outdated experience built on an outdated platform, and it was limiting the brewery’s opportunities for growth and customer engagement. The team at Brooklyn Brewery engaged Traina to design and launch a robust new website.

Design core: Bold type and lifestyle photography are the site’s primary ingredients. Combined with great content, they tell a rich and colorful story of this legendary brewery and the surrounding borough. It’s an immersive experience with new interactions to discover on every page. One particularly fun innovation is the Brooklyn Brewery Beer Personality Matchmaker 3000. Built using PHP and JavaScript—and found on the “Explore all beers” page—it matches visitors with a specific beer based on their answers to a short quiz with probing questions like “What’s your favorite season?” and “What kind of dog would you be?”

Challenges: The Brooklyn Brewery brand is eclectic. Each beer has its own distinct brand identity and personality. So finding a way to unite all of the brand’s disparate brand elements into a cohesive visual experience presented an exciting creative challenge. The result is best seen in the beer detail pages. Each page showcases the unique look and feel of that beer, but the underlying template successfully ties them all together. The back end was built to support this customization, enabling each beer page to feature its own color palette, photography, food pairings and even a custom edition of the iconic Milton Glaser–designed Brooklyn B logo at the top of each page.

Navigation structure: The navigation was heavily informed by an audit of the previous website’s analytics. Not surprisingly, most visitors come looking for great beer. So we organized the product portfolio into categories based on availability—year round, seasonal and limited—and made the most popular beers accessible directly from the mega nav. We also knew from the existing metrics that brewery information and event details were popular topics. The navigation is designed to help visitors quickly and easily discover the information they need.

Technology: The programming languages used were JavaScript/jQuery, PHP, HTML5 and CSS3/SASS. The site was developed in WordPress. Third party integrations include various APIs, YouTube, Instagram and a product finder tool.

brooklynbrewery.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In