MudHen Brewing Company is a brewpub in Wildwood, New Jersey that needed a new website. The current website was static and did not display well on a variety of devices. The brewpub features a variety of their in-house craft beers, food, events, and a full bar. MudHen also offers distribution to bars and liquor stores throughout Pennsylvania and New Jersey, and catering services.
Objectives:
(1) create a more responsive website that worked well on all devices
(2) utilize a platform that would be easy for people to update.
Taking Inventory:
The company was using Wix - which was easy to update with WYSIWYG features only had a static width layout, which is not very good at displaying the site on a variety of devices. After running tests for website speed, due to a lack of CDN technology, bloated JavaScript code, and too many database queries; the site was loading very slowly. The site had also been built by multiple contributors, so there were lots of fonts, colors, and redundant information.
We chose to go with WordPress with Elementor Pro for it’s responsive design features, WYSIWYG plug-ins, and ease of use. For the first task, we took an inventory of the current pages. Not counting landing pages for events such as New Year’s Eve and various fundraisers there were 33 pages. There was a lot going on!
We looked at Google Analytics to determine the top hits were the menu, including specials; live music, and what beer is currently on tap. We wanted to make sure this information featured prominently on the website but there was also a challenge of how to define and keep separate the information about the MudHen craft beers, the catering services, and what’s happening when you visit the brewery. So we got to work and combined a lot of the redundant information and reduced the links in the navigation to 16! The process looked something like this:
Rethinking the Navigation
In the BEERS section, visitors can get information about what MudHen's craft beers. In the BREWPUB section, visitors can get all the information about the brewery, hours of operation, menus, etc. In the EVENTS section, visitors can get all the information they need about on-site, off-site events, and live music. In the CATERING section, visitors can get all the information about MudHen’s catering services. A SHOP page for merchandise and gift cards, and a STORIES page for blog posts and social media updates completed out main navigation menu.
Links of secondary importance such as contact, and jobs were put in the footer. We also created a new page in the footer for our merchandising department called PRESS KIT so when newspapers, or off-site festival event coordinators needed information or logos about the brewery, they could easily send them a link to get all the information, logos, and photos they would need.
There were several rounds of tweaks and changes to get the final approved menu organized, then we created a wireframe for all the pages on the website. We knew from our analytics research that we wanted to feature the menu, live music, and beer on the homepage. Plus, we looked at other small breweries slash brewpubs websites like Tröegs, and Iron Hill to compare what they featured on their homepage. We decided to include the address, phone number and hours of operation in the first section of the homepage as well as the most recent posts from the blog and social media. Posts are updated regularly, we felt continually fresh content on the homepage would be good for SEO.
MudHen Brewing Company
Homepage Wireframe
Wireframing and Style Guide:
Next, we began to choose colors and fonts. The core fonts for the site were difficult to read, some did not have numbers and special characters so we did some font pairing and decided to choose new fonts.
We stuck with HWT American since that font is used for the logo but instead of going with the distorted Shopworn font we chose the Solid version for easier reading. We paired it with a sans-serif font Olivetta to replace Caviar Dreams and removed Carnivalee Freakshow. These new choices created a much more readable pairing then the current font choices.
To choose colors for the website, we started with some detail photographs of the brewpub and chose colors that matched the experience of visiting the brewpub.
Sciarra Restaurants
