Friends & Allies Brewing

Passion Project


the opportunity

Friends & Allies Brewing (F&A) is a new brewery to the exploding microbrewery scene in Austin, Texas.  Currently, their main focus has been brewing four staple beers, advertising through social media, and hosting as many events as possible.  In order to outshine their competitors and make their mark as top brewery in the Austin beer scene, F&A needs to have a website that will conquer both.  Their current website and mobile platform leave plenty of opportunities to create a better experience for both the beer connoisseur as well as first time patron.  As of now, the entire main navigation have disappeared and their customers are unable to click through the mobile version of their website. Since most customers prefer to use mobile devices to find and look up breweries, I chose to create a mobile site for Friends & Allies Brewing.  

The current version of the F&A website

 

Tools & skills

  • Screener
  • User Interviews
  • Card Sort 
  • Paper & Pen
  • Adobe Photoshop
  • Axure RP
 

research

I initially began my research phase with looking at the F&A mobile version of their website.  I quickly found that users were unable to do much on this website.  Important informational links disappeared and visitors could only stay on the landing page.  There was plenty of room to improve their site.  I began with creating a survey screener to find participants to interview.  I through user interviews and the screener I quickly found that most people quickly want to find the basic information on a brewery.  They wanted to quickly find Hours, Location,  Contact Information, Food Availability, and Events.  

01.01.00_Screener_Survey_Questions.png
 

Plan

From my user interviews, I also conducted a card sort using Optimal Sort.  The card sort helped me figure out my navigation system and categories for my mobile website.  The card sorting activity lead to 6 main navigation categories to house all the information users were looking for.  I wanted to keep the design and categories as simple as possible so customers could find the information they wanted as quickly and easy as possible. 

 
 Cart Sort results to help create the main navigation categories. 

Cart Sort results to help create the main navigation categories. 

 

 I wanted the design of the mobile site to simple and easy to navigate.  I created a simple landing page to catch the eye of the customers visiting the page.  The navigation would slide in from the right utilizing the hamburger menu icon.  There would be 6 categories to pick from to keep a simple way to navigate that is easy for the user to find what they are looking for. 

  The 6 main categories created from Optimal Sorting.

The 6 main categories created from Optimal Sorting.

 Design to showcase each beer they brew.

Design to showcase each beer they brew.

 

Design

I used axure to create the Friends & Allies Brewing mobile website.  I wanted to keep the design simple and clean.  Since the brewery is new to Austin, TX, I wanted the logo, beer, and the owners to shine. The main menu slides in from the the right, with the intention of the main navigation menu to be a fixed header.  That way the user can scroll but still find what they are looking for without having to scroll back up.  I used a simple color palette for designing the mobile version of their site. I used their already created logo as well as incorporated colors from their beer designs to keep consistency throughout.   

 

Testing/Next steps

This is currently not a live website.  It is a personal passion project and there is more I want to do with it.  This prototype in the very early stages, as I am still in the process of completely building out the entire website. I still need to build out the "Shop" and "Taproom" pages. 

I recently made many huge changes to the layout, format, and content.  The biggest design change was getting rid of the hamburger menu button.  I decided to use the F&A logo as the menu button, to try out a new way to navigate.  Another design change was I found the Contact Us and Visit Us tab to be similar and didn't need their separate pages.  I combined them to have all that important information together.  I then added a new tab called, "Taproom".  This will be eventually built out to have a space showcasing upcoming events, if they will have a food truck, etc.

Additionally, some initial user testing will be next.   I would like to get users reactions to the site and their overall opinions to it.  See if it is straight forward, easy to navigate, and if people would visit the brewery based off the site.

I created this mobile version to get better at prototyping in Axure as well as try new design trends.  I wanted to play with flat design and attempt complexion reduction design.  There is still lot to be done but overall I feel the prototype is better than the current website.