Problem

Joffrey's Coffee & Tea company is a small Tampa based coffee roaster that creates the most wonderful coffees. We had tried Joffrey's coffee many times and enjoyed the European Espresso Blend and some of the special flavored coffees, but always thought the packaging and image could do with an update. When José Ward, became head of marketing, one of his missions was to create better branding and gain higher visibility on supermarket shelves where the old image was just too dark and unappealing.

Solution
When we talked the project over, the problem that emerged was that the brand positioning - one of a fun, counter-culture, international and somewhat funky company was not properly reflected. We agreed to move away from the tourist-brochure style Web site and strange black and purple pinstripe packaging towards a more hip, funky and slightly humorous approach.

We wanted the buyer to be able to imagine the taste of the flavored coffees by seeing great images of the ingredients and flavorful foods. But there was no budget for custom illustration, so using stock images and a lot of Photoshop we were able to create interesting compositions showcasing the flavors and tastes in fun way.

The typography for the logo and packaging headlines and well as the Web site is a font called Litterbox which is quite rebellious and fun with a touch of humor. We used Neutra for all the informational text. On the Web site, the really important thing was to make it easy to order and to see the flavor and blends. So we used the labels themselves as identifiers that can be clicked to enlarge them so you can read the flavor meter which tells you the strength of the coffee and also the product description.

The Web site functions not only as a retail site to buy coffee from but also as a portal for business customers to find out more information about selling Joffrey's products and franchise opportunities. We kept the pallet of colors and other graphic elements consistent with the packaging to reinforce the brand image. The navigation is simple, straight across the top, with drops downs to access specific needs.