Dirigible Brewing Co.

The Challenge

I undertook redesigning of Dirigble Brewing Company’s homepage as a project for my UX Design for Emerging Platforms class.

The weekly schedule alert notification utilized most of the website’s Above the Fold. Along with unreadable links in navigation, and large design elements, this made for a poor user experience.

When creating the new web layout, I wanted to highlight the important information and purpose.

The Draft

The first task I wanted to accomplish with this initial sketch was to encorporate the weekly events into the main design of the website to allow the other design elements to show Above the Fold, as Dirigble Brewing company is very community focused in the town of Littleton, MA.

The second consideration was revamping the website navigation. This included simplifying and removing redundant options, updating language, and increasing legibility. Changing ‘Menu’ to ‘Our Beer’ was more welcoming, for example.

The final major overhaul was in unifying all of the page’s visual design elements, such as overly large text and misaaligned menus to match the weight of importance.

The First Iteration

The first design created from the sketch successfully translated most of the information from the original homepage above the fold. The weekly events were now integrated into the main design of the page, the main navigation links were more legible, the address and phone number were now located at the top of the page. One element I struggled with in this version was using the golden brown color from the logo more through-out the website.

There was still room for improvement. After getting some feedback on the design from the class, there were two major flaws to the current iteration…

First, there was too much negative space on the homepage. While the weekly events was now a part of the design, not a notifcation, an issue carried over where the space was not being used efficiently.

Second and most importantly, at first glance, the webpage did not read as one for a brewery. Reusing the image of the hoppers on the current design of the homepage, along with the logo of a dirigble in the sky, was reading more as a carwash. I suspected the sky background in the logo was being likened to water and suds. I didn’t properly highlight Dirigible’s main product, it’s beer.

Design Sprint – The Second Iteration

With the feedback on my first iteration, I began working on the second.

Changing the UI for the weekly events from a list, to an interactive calendar also helped accomplish a few major goals.

Firstly, moving it to the left allowed me to add more visual interest by showcasing the slogan “Grab a pint, catch a flight” front and center, and include a map with the location and address of the brewery. Secondly, the visual calendar decluttered all of the information that was presented to the user at once. Having the calendar cycle through the schedule, or having user select which day they are interested in will deliver the most relevant information to the user.

The quickest update, and by far the most helpful was changing the background image from the hoppers, to a flight of beer. The homepage was now highlighting the main product, and was reading as a brewery. Additionally, this allowed the golden colors from the logo to be integrated into the website and tie all of the elements together.