Responses by Jessica Lin, web developer, Affinity Creative Group.

Background: Our goal was to channel the pioneering spirit of the Shannon Family. Founder Clay Shannon is known throughout the wine industry as a trailblazer, especially regarding sustainability and regenerative farming. “Forging a better way” is the company motto—and that was the sentiment we wanted to reflect all across the site, opting for a look and feel that was distinct from the traditional websites we see far too often with other wineries. Knowing our core audience was also crucial: Shannon Family of Wines customers are independent in mindset and don’t care much for Napa pretense. They want real, good, sustainable wine at a good price without any of the fluff and clutter typical of the industry.

Design core: The creative direction of the video content, photography and color throughout the site embodies the earth-first mindset that is the standard for the Shannon Family brand. The unique color palette evokes a sense of nature and a pioneering attitude, blazing its own trail. We set out to occupy a distinct place in the minds of consumers through bold typography, earthy colors and authentic imagery that gives a sense of place true to California’s Lake County.

Special navigational features: The site features an overlay window–like navigation that lets users see items within chosen categories while the page runs in the background. For example, when hovering on the Wines link, a carousel element with wine bottles comes into view; users can select a bottle and get directed to its page by clicking. When hovering on Blog, they can go through featured posts in the same carousel style, which acts as a quick-access tool to the latest news.

Technical features, such as lazy loading and image optimization, were needed to ensure we could add this type of menu without compromising the site’s loading times. We had to make sure that blog posts, content and wine information could be easily edited on the admin side as well.

Technology: We used WordPress for content management and Flywheel for hosting. For the site’s animations, we mainly used JavaScript libraries like BarbaJS and Greensock, along with some pure CSS animation.

One technical feature that proved challenging was connecting WordPress to our e-commerce platform. Ensuring that the data for wines, reservations and content was able to cross-communicate in a streamlined manner formed our main priority during development.