Copperhead Brewery
Fun & colourful. A full redesign of Copperhead Brewery's website to give customers a taste of what's to come
Client: Copperhead Brewery, Texas USA
Role: UI asset creation/Web Designer/Illustrator
Software used: SketchApp, Adobe Creative Suite, InVision Prototyping
01
The Brief
Project Aims & Goals
Copperhead Brewery is a craft-brewery based in Conroe, Texas USA. I have been developing their brand as the sole designer since they started the company in 2013. From designing all of their beer labels and packaging to creating their logo design and merchandise. This has culminated in sales of over 1,000,000+ products, stocked in all main retail shops in and around the Houston Texas area with a population of 6.77 million +
Copperhead Brewery's beer labels are always fun, colourful and eye-catching. Therefore I wanted to carry the beer label's fun visual style over to the new website so that we could create a strong, consistent brand which could be easily recognised across all platforms.
The aim was to design and build a responsive website to showcase the range of beers Copperhead have available and to get users to subscribe to their mailing list. In the future we will look to add a B2B section and an ecommerce platform.
02
UX Design
Wireframing With UX In Mind
Firstly I had an in-depth look at Copperhead's current website. Then together with the senior developer, we created a site audit that pointed out key aspects which could be improved. The audit included any pain points, user-friendliness, and the overall aim of the website. With these key issues in mind and the goals of the site laid out, I went on to create the initial wireframes. These wireframes were created with the user experience at the forefront.
The main aim of the new website was to help the user experience the Copperhead Brewery's culture, to inform them about each beer, and to subsequently sign up for the newsletter or visit the taproom. When designing these wireframes I used the 12 column Bootstrap grid as that's the framework the design would be built in.
03
Branding
Brand Colours & Typography
I took colour spots from the Copperhead logo I had designed a few years ago and this gave us a brand colour palette to transfer over to the web design. I think the use of vibrant bright colours represents the brand's youthful and welcoming vibe in a visual way.
As Copperhead's brand personality is quite light-hearted, friendly and welcoming I wanted a typface that would also reflect that. Firstly I started looking at informal san-serif fonts. Many fonts later I came across the fun typeface Quicksand, which I thought was perfect paired with another san-serif font, Raleway.
JAFFA
HEX: EA853E
RGB: 234, 133, 62
AMERICAN MUSTARD
HEX: F4C32F
RGB: 244, 195, 47
CHERRY
HEX: 81051A
RGB: 129, 5, 26
SHOE RED
HEX: BA232A
RGB: 186, 35, 42
DUSK
HEX: 2F2F2F
RGB: 47, 47, 47
Quicksand (Bold)
Quicksand (Light)
Raleway (Regular)
04
Digital Design
UI Assets & Web Design
Copperhead's beer labels are heavily illustrated so to keep the website consistent I designed and illustrated all of the elements and artwork on Copperhead's site, from the playful snakes, to the intricate beer/hops background. To coincide with the artistic feel of the site I also illustrated each team member at Copperhead Brewery for the team section as seen below. These hand drawn illustrations help reflect the light-hearted, hand-crafted company that Copperhead Brewery is.
05
Development
Responsive Web Development & Handoff
With the final designs signed off, the templates were then implemented by the senior developer into WordPress templates.
06
The Outcome
The Outcome
The final result is an engaging, responsive website that builds a strong identity between Copperhead and their drinkers. At this moment in time the backend of the site is still in development. In the future we will be looking to add an ecommerce section to the site as well as a B2B section.
