My work with the BrewBox Co. began at the start of 2014, and what started as a simple logo design, slowly developed into one of the most diverse, challenging and at the same time satisfying projects I’ve come to work on. (And this is where I’d like to give a shout out to the rest of the team behind this venture. The guys behind BrewBox are some of the most hardworking, talented and generally awesome people I’ve had the pleasure of working with). The initial idea was simple; a beer delivery and discovery service for craft beer loves, by craft beer lovers.
The Brand
This was one of the first things I started with. Before we did anything else, we needed a brand. The initial consult was quick and simple, and armed with a few pages of notes, some rough sketches and a moodboard, I set to work.
The next day we sat down again and went through the first round of logos, and I gathered the team’s feedback. Over the next few hours we went through a number of iterations, slowly narrowing down the selection.
In the end we decided to eschew the colour logos for something more simple. Something that would work equally well on a clean modern design, as well as on a vintage postcard. My general notes at that point were
- Black and White
- Circular logo
- Potential ribbon/stamp/bottle cap motif
- Include Barley and Stars
- Liked the idea of a ribbon
It was a tough decision but after some final voting and tweaks, we settled on option 5, and the BrewBox logo was born. As time went on the logo was used on everything from the site to business cards, coasters, banners, postcards, information leaflets and etc… if it could hold ink or light up a pixel, it had the logo. I also created a version of the logo without the tails of the ribbon for cases where horizontal space was more limited.
The Landing Page
While we were working on the branding, we also needed to establish a web presence. For social media, this was easy but for the site, it took a bit more planning.
We put together a quick landing page to gauge interest while the rest of the team worked on the initial wireframes. As with all start ups, time was a factor and unfortunately there never seemed to be enough of it. So to start, the landing page was simple.
- Fullscreen masthead.
- Quick intro.
- Call to action.
There was also a quick “About Us” section below the fold, with the top of the circle peaking up at the bottom of the viewport. This was still fairly early on and we continued experimenting with the general aesthetic of the brand and products at this point. I ended up keeping some of the elements from this layout, such as the circular About Us graphic and used it elsewhere, but the design was cleaned up a bit for a more contemporary, less skeumorphic look going forward.
The Site
In the end we decided to do something a bit different with this team. I put together the initial mock ups based on the wireframes, but also assembled an elements library the team could then reference for quick mock ups and prototyping down the line.
Though while’ we’re at it we also decided to have some fun with a few error pages before moving onto….
The Beer Encyclopedia
The last bit of UI work I did with the team was for an upcoming section dubbed the Beer Encyclopedia. In case it wasn’t already clear, these guys know their beers. With each BrewBox they send out info cards with tasting notes and a small primer on each beer in that month’s selection. So why not start to catalogue all this knowledge? Well that’s precisely what they thought too, which lead to this idea…
The design had to be flexible and look good while also being easy to navigate, regardless of whether we had to feature a 100 beers and breweries, or just 1.
We ended up taking a 2 step approach. The first level of the encyclopedia features a fullscreen masthead with a short intro and a spot for either company branding or a featured brewery.
There is a progress tracker on the left that stays at the top of the page once you scroll past the masthead. The tracker also shows a list of all the breweries to help you keep your place within the page as your scroll through or quickly navigate to a specific brewery. Each brewery’s logo is overlaid a featured image/product shot on the right. Clicking on any of the images takes you to that brewery’s encyclopedia entry.
Once on the brewery’s page, the basic composition of the layout remains the same, but with more content and a few more points of interaction.
The progress bar is still present on the left but remains collapsed by default. It can be activated to show the full list of beers by hovering over the marker itself. After a short delay, the full list of beers appear in place of the descriptions. As on the previous page, each beer gets it’s own featured product shot on the right, with a short description and tasting notes on the left. Many breweries also design unique logos and branding for each of their beers, so I decided to feature these logos as watermarks behind each description.
Conclusion
Out of all the start ups I’ve worked with, these guys have definitely been one of my favourites. I’m as happy to see them going places, as I am to have had the privilege of being along for the ride. If you’re in Ontario and want to try some of the best, local craft beers our province has to offer, check out their site. (This is stuff you won’t find at your local LCBO… Oh and it’s delivered straight to your doorstep. Awesome, right?)
My working relationship with this team continues to this day and I’m sure they’ll have some more new and challenging things for me to work on down the line, so I’ll update this post as time goes on.
If you got any questions or feedback regarding my work with The BrewBox Co., feel free to leave a comment or shoot me an email. You can also see more of my work and get in touch at http://lehelbabos.com Thanks for reading, as always your feedback is greatly appreciated!
