Side Launch Brewery
Side Launch is an award winning brewery in Collingwood, Ontario. They brew four different types of beer year round along with seasonal and special offerings throughout the year. They’re best known for their Wheat beer, the mastermind of brew master Michael Hancock.
The Team
2 UX designers and 1 UI designer (that would be me).
The Challenge
We were tasked with redesigning the Side Launch website. The current website had a lot of good content, but was lacking on the user experience side and the overall design didn’t fully speak to the Side Launch brand. A lot of the interesting content was displayed in big blocks of text that made it hard for users to digest, this was a big consideration for our redesign along with reconfiguring the navigation of the site.
Some other areas of consideration included capturing a greater market share, increasing merchandise sales, and overall brand awareness.
The Research
Research began with a comparative/competitive analysis of other Canadian craft beer brewers. We looked at:
We looked at factors like theme and colour to see how we could either differentiate ourselves from the competition or build upon other ways of displaying information, especially when it came to explaining the flavours and other characteristics of each beer. We also looked at whether or not our competitors had a merchandise store, an explanation of their brewing process, an events page and a beer finder as well as which social media channels they used to promote their brand.
It was surprising to find that most breweries don’t include any information on their brewing process, especially considering the fact that craft beer is for people who really appreciate the flavour and effort put into creating specialized brews. Lucky for us, this is something Side Launch is already offering their users, and they do a pretty good job at it! The rest of the data was on par with what Side Launch was already presenting to users through their current website. Although we did find that most of the breweries had a beer finder to help users find their beer either in store or in bars/restaurants, a feature which Side Launch doesn’t currently provide.
We then set out to create and distribute a survey to find out about our current and potential users. What do they think of craft beer? Do they drink it? What do they like and what entices them to try certain brands? Who/what influences their beer purchasing decisions? Where do they buy their beer? And many more questions about their beer buying/drinking habits.
We had 38 survey responses to lead us in our design. Here are some of the important bits of data we pulled from the survey:
Design
While my UX teammates were busy going over the data and turning that into user personas, journey maps, and eventually low-fi and mid-fi wireframes, I began to dig into the visual design components. Side Launch being an already established brand I had to keep certain fonts, colours and other assets in line with what was already being used by the brand. After speaking to our client and getting a good idea of the direction they were hoping for in regards to the brand’s visual identity, I created this mood board to get the creative juices flowing:
My first order of business was to update their logo. It was clear from personally showing the logo to friends and family that they didn’t realize they were looking at a ship! With the nautical theme being such a huge part of their overall branding, it was really important to make a few adjustments to the logo. On request of the client I began by removing the brand name from inside the ship icon so that it could be used as a stand alone to represent the brand. The brand name was brought underneath ship. I then went about adding some negative space in between different components of the ship and to top it off I added some waves to really hit home the nautical theme of the brand.
For typography I stuck with the DIN Condensed font as it is a big part of the Side Launch brand identity. I then complimented this main font with a serif for body text. I went with Lustria as it was a more modern font than the current body text being on the site. When it came to colours, I used yellow as my main colour inspiration as it’s the colour of their best known beer. I also used a soft green that is associated with their Pale Ale. I simply toned down the saturation of each colour to be more web-friendly and overall easier on the eyes. Iconography for the brand was kept very simple and I incorporated the yellow when possible. For the most part though I kept things in black/white/grey to maintain a clean design.
The Results
In the end I feel the redesign accentuates and speaks to the overall branding desires of Side Launch much better than the current site. It’s clean while maintaining the fun, adventurous feel the client was going for. The over all user experience has been rejigged to create easier navigation and the new layout, especially when it comes to the history of the brand, helps to better tell the brand story with the more in-depth content being displayed in digestible chunks of text with added imagery to break up the extensive content of those pages.
Here’s a side by side look at the history and beer collection pages:
If you want to experience the clickable prototype here is the link:
