Ricky Panzer, CEO

Mar. 05, 2021

Client name: Elegance Brands

Type of business: Beverage company

Services provided: Web design & development, branding

Technologies used: Gatsby, Contentful, Netlify

Elegance Brands is a Beverly Hills-based beverage company that develops and markets premiere alcoholic and non-alcoholic drinks, including its CBD-infused Gorilla Hemp Energy Drink, Sway Energy, Voco Cocktails, and its eponymous Elegance Vodka. In 2020, became the exclusive distributor of Drake's Virginia Black Decadent American Whiskey and Mod Sélection champagne.

But what Elegance didn't have was a web presence that reflected their trajectory. The company was using a WordPress site that was both slow and mobile unfriendly. Key information — like a comprehensive list of its beverages, an FAQ, and a team page — was absent. And it lacked a style to communicate its identity as a refined suite of brands for people younger than Gen X.

Before

After

We responded to Elegance's needs with a coherent solution that took each separate requirement into consideration as part of the whole. First, we tackled the design, which meant identifying the right design studio rather than having our developers draw up the UI, a common recipe for aesthetic disaster. The studio we collaborated with created a visual language and color palette that would hit a wide set of notes to appeal to both investors and the public at large. Elegance's identity had to project characteristics that made it appeal to both investors as well as the OVO crowd. The studio we selected produced a design system, including refining the site's color palette, updating its typeset, and creating a layout that made sure each of the company's beverage brands received its proper screen real estate and was embellished with rich animations.

Before

After

Because the design and development teams are separate, constant communication between the two is critical to ensure devs can anticipate requirements demanded by the UI, and so the designers know what can actually be developed. For example, designers commonly create mock-ups for desktop and mobile interfaces, with tablet designs as a bonus. But what about all the different screen sizes and breakpoints that fall ambiguously along the spectrum between them? As developers implement the designers' work, they're able to effectively stress-test the wireframes under different scenarios and communicate any unanticipated situations back to the designers.

Before

After

Since Elegance needed a marketing site, performance and SEO were key. The site needed to display lots of images  of the brands, models, and the team members — but it didn't need to perform complex back-end functions involving user logins or eCommerce checkout. That meant a combination of Gatsby for the web framework and Contentful as a CMS were perfect. Gatsby excels when developing image- and animation-rich sites because of its capabilities for Static Site Generation, which greatly reduces load times. Its library gatsby-image ensures that objects on the page don't jump around as images are loading, avoiding user frustration, and allows for automatic resizing depending on screen dimensions, minimizing headaches for the designers. On the content side, Contentful provides an elegant interface for modifying content and allows for full-site preview before publishing. We also decided to host the site with Netlify, which allowed us to serve the website in the fastest way possible.

We also know that static sites don't have to be boring. In executing the designers' vision, we included animations and micro-interactions to bring the site to life as one scrolls through the pages. For example, when hovering over one of the company's brands, we wanted users to feel like the page was sliding them a drink across bar counter. 

The final result is a site that not only visually matches Elegance's brand and appeals to investors and buyers alike, but one that sings: Its Google Lighthouse scores are nearly maxed out, it's optimized for SEO, and it fully follows web best practices:

Gatsby and Contentful work great for Elegance, but other sites, like dynamic blogs or eCommerce sites, might require other solutions. We break some of them down here. If you're unsure about what might work for you, reach out to us.