]

Oink and Moo BBQ

May 14th, 2012

It’s always great when a project falls into your lap that ties three of your passions together. That’s what happened to me when I got a call from chef and entrepreneur Josh Sacks, the proprietor of Oink and Moo BBQ. I love designing logos and building websites, I love BBQ and I love food trucks. This project was the trifecta and also presented some interesting opportunities and challenges.

I first spoke to Josh in July of last year and we discussed what he was looking for and I provided Josh with a quote and some estimates. He mentioned to me that things would take some time to get funding and get the project off the ground and we left it at that. In early January, I got the call from Josh that it was go time! We made plans to get together shortly thereafter to start coming up with a plan. It started out as just a website, but as we talked the plan evolved and one of the first things we worked on was coming up with a proper identity.

Logo

Original Oink and Moo logoJosh gave me a great starting point and helped me to see what his vision was for his brand. I loved the name and the idea of using a cow and pig head, but knew that in order to come up with a logo that was strong and memorable, it would need to be a strong, simple and unified image. The first thing I did was google “BBQ” and see what came up, which was a lot of grills, fire and sauces. Not bad for the secondary imagery, but a bit too cliche’ for the logo.

Original Logo SketchesJosh’s original logo used the nose of the cow and pig as focal points so I tried to combine that into a single image using the nose as the shared element and using perspective to show both a cow and pig. I tinkered with it for a while, but it never looked right and was too complicated.

Oink and Moo LogoMy stomach lead me in the direction of the next logo idea. I was working late and all the BBQ imagery was making me hungry and I started to think about what I wanted for dinner. One of my favorite things to grill are nice thick porterhouse steaks so I began thinking about the shape of the steak with the long strip steak on one side and the shorter, chunkier filet on the other. Maybe my hunger was causing me to hallucinate, but in my head I could see the shape of pig’s head in the filet and a cow’s head in the strip steak. The metaphor worked well in my head since both pork and beef have cuts that are similar to this shape. I decided this was the direction I was going to focus on and started working on sketches. Once I got it into a good place, I brought it into Illustrator and refined the design so I could present it to Josh. He liked it and we bounced some additional ideas off of each other, made a few tweaks and come up with a great solution. The color was chosen for the “Oink” half since it represented the color we often associate with pigs (thanks Porky). The maroon used for the “Moo” half wasn’t an exact representation of the color of a cow, but I took a brown and tweaked to color that was a bit more appetizing and could easily make people think about barbecue sauce and beautifully carmelized babyback ribs. The color also needed to be the anchor and most used color in the website design. The circle around the logo uses the colors of main brand imagery, as well as representing the shape of a round charcoal grill viewed from overhead.

Website

The truck won’t be hitting the streets until September, but we wanted to make sure the site was up early enough so that Josh could get the word out as well as make tweaks before the truck hit the streets. The site needed to be simple and only have four pages, but the information on those pages was important, especially the Twitter stream and schedule. Without those, the truck wouldn’t be able to let customers know where the truck was and where they could get some food. I had to look through dozens of food truck websites to find representations of everything I wanted to have on the site. Besides the schedule and Twitter stream, we wanted to have a descriptive menu page with photos as well as a photo stream on the home page.

The first thing I presented to Josh after speaking about his needs was to come up with two different homepage wireframes and it was decided to go with the top navigation, splitting the navigation in half and putting the logo in the middle. The logo was so strong, I believed it worked best, front and center. I also presented a mobile wireframe for when the site was viewed on a mobile phone.

After receiving approval on the wireframes, I started on the design. The first round used the pink, maroon and black from the logo with the addition of yellow since that was the color of the truck that Josh had purchased. Fortunately, after some discussion, we decided to simplify the color pallet and remove yellow. Josh was happy with the original design I came up with looks very similar to the actual site with some font and style tweaks.

Responsive

Oink and Moo's Responsive LayoutsIn building the site, I knew from the beginning that I was going to built the site to be responsive and that it was going to be in WordPress. It was important to have the site be responsive since we are projecting that the majority of customers will be getting information on the truck’s location on mobile devices. This approach assured that no matter what device the user was on, they would be sure to get the information they needed to find some mouth-watering BBQ.

The site was built using WordPress because I knew that Josh would want to make frequent changes to the site – changing the schedule, updating menu items, adding photos and posting news and information. Besides being able to do those things, it needed a user-friendly interface when making those changes. WordPress was able to fit the bill on both of those. The theme used was built from scratch using a blank template that I have modified and use for all my new WordPress builds. I customized the Twitter Widget Pro plug-in to post latest tweets in the sidebar. The Types plug-in is used to create custom post types, providing users with a simple, user-friendly interface for adding and updating content. These custom Types were used for the schedule, menu items and latest photo sections of the site.

The site is coded in HTML5 and CSS3 and uses Modernizr to provide support for older versions of IE.

Fonts

It was important to find typefaces that were open source for both print and web, but that were also beautiful and carried the right emotion. For the headline text, I chose the serif font Chunk from the League of Moveable Type because I wanted something bold and in-your-face, but still playful. I had to I stay away from BBQ and Western cliche’ typefaces like Mesquite or Rosewood. Those are great fonts and they would work for a BBQ restaurant in Carson City, Nevada that’s been around for a hundred years, but just wouldn’t work for a start-up food truck cruising around New Jersey. For the body copy, I had originally used Open Sans, but I felt it was a little too bland for the site so I switched to Museo Sans 500 from MyFonts.com. This gave the copy a bit more swagger and personality, especially with the beautiful upper- and lowercase “k,” which is used extensively.

Truck

While I was designing the look of the website, I got an email from Josh with a photo of the truck he had purchased. At this point, it was just an old DHL delivery truck, not the BBQ oasis on wheels it was destined to become. Since the website was for the BBQ truck, I knew that the website would be stronger if it had truck imagery, so I asked Josh if he was interested in having me design me design the truck. He was all for it. I took the color pallet I established on the logo and website and applied it to the truck.

It was a blast designing the truck, and to be honest, it was nice having the physical design restraints of the truck instead of the mysterious world of sizes and devices we work with on the web.

After coming up with the general design, I tried making the truck’s main color each of the logo’s three colors – pink, maroon and black. Josh had said the wanted to the truck to be eye-catching, but the pink was way too…pink. The black looked pretty cool, but looked a bit too much like the truck the A-Team would have if they were pivoting from soldiers of fortune to mobile food entrepreneurs. The red looked just right. Actually, we thought it just looked awesome. Hopefully all you BBQ fans will agree!

I used the pink bar headline treatment from the website and used it on the truck to display the website URL and twitter handle. I made the design decision to use both black and white text to differentiate the words since the phrase oinkandmoobbq can be a confusing to someone new to the brand. This separated out the words out and made them a little easier to differentiate and distinguish while still seeing it together.

Wrapping Up

This was such a great opportunity and I had such a great time working on this project. Not only was the project fun, I actually got to taste the products of my labor. The night we met up to put the final touches on the site before going live, Josh brought me a half-rack of his babyback ribs. They were absolutely delicious – meaty, smokey and just the right amount of sweetness. Besides being a great guy (and great chef), Josh was an ideal client. He knew what he wanted, but trusted my opinion on design and development decisions.

If you are in New Jersey, I highly recommend following Oink and Moo and get out there and grab some BBQ. I’ve had BBQ in North Carolina, Texas and New York City (New York City?? You know what I mean) and this is some of the best I have ever tasted. I wish him the best of luck and look forward to working with him again.

One Response

  1. woody polacik says:

    need to know where truck will be in new york city

Leave a Reply