Caviar & Bananas

Our neighbors at Caviar & Bananas came to us for a fancy new website to match their fancy new logo and identity system (branding compliments of J. Fletcher Design). Their gourmet cafe and market regularly provides our office coffee fix, solves our lunchtime dilemmas, and sweetens our afternoons. It had been a a 7 year stretch since we made their last website (c. 2008) so their business had expanded quite a bit, gained notoriety and accolades. And they definitely knew all the neighbors by now.

If you’ve never designed a food-industry website  before, the only rule is this: ONLY WORK AFTER A LARGE MEAL. Otherwise, you’ll gnaw off your mouse-hand.

With all of the delicious imagery shot by our pal Brennan Wesley, we knew we couldn’t go wrong. We wanted you to feel the energy to pop off the page. Catch the buzz, without drinking the espresso.

Started the page off with a full page video loop and strong headline “Gourmet. Every day.” Because, well, that’s what they do. To add emphasis to the video, the navigation bar is located at the bottom of the screen on load and then scrolls up with you and sticks in place at the top of the screen.

Screen Shot 2015-12-14 at 2.42.11 PM

We wanted to make ordering online as easy as pie. We added it prominently in the main navigation, added a button on the very first panel and added a link with the rest of the menus on each interior page…more on that later.

Screen Shot 2015-12-14 at 2.00.33 PM

Since they have a great story and are very focused on embracing the neighborhood around them, we wanted to tell their story as soon as possible. And their Instagram will convince you that you really can eat another risotto ball, even if you just finished your lunch. And oh, doesn’t that chocolate chip cookie the size of your friggin’ head look divine? So of course, we had to pull in their Instagram feed, front and center.

Screen Shot 2015-12-14 at 1.57.35 PM

So when you go to a restaurant / cafe website you typically want to know

  • What kind of food?
  • Where is the food?
  • What time can I get the food?

Screen Shot 2015-12-14 at 2.00.55 PM

Straight from the home page, you can see the hours and address for each location. Either by clicking the Menu + Details button for a particular location (teaser) or by using the main navigation, you’ll be taken to a page dedicated to that location. Which, by the way, will soon be up to 4 locations (Market Street – Charleston, George Street – Charleston, the Charleston Airport and Greenville)!

Screen Shot 2015-12-14 at 2.02.24 PM

The location detail pages house the menu’s pertinent to that location, a teaser for their Catering information, and a little boilerplate about what they do. This content comes in handy when we use these as landing pages for digital marketing campaigns.

Screen Shot 2015-12-14 at 2.02.31 PM

Because they are awesome, their menu is constantly being updated and featuring new deliciousness and seasonal favorites. We built a menu admin tool (CMS) so they could make these updates on their own whenever necessary.

Screen Shot 2015-12-14 at 2.02.03 PM

Are you hungry yet?

Our copy director Jenny Badman worked up a mini-manifesto describing the vibe of the brand and their story. We wanted to place that on the interior pages so that we’d have the ability to use any location’s detail page as a landing page for digital / print campaigns.


And that’s the only kind of food we make. Fresh, real, good food, made from scratch every day. As a husband and wife team, we’ve built an extended family through a staff that’s as passionate about food as we are, loyal customers, and neighborhoods that have embraced us both personally and professionally. Whether we’re your go-to coffee spot, indispensable caterer, or gourmet sandwich shop, we’re grateful you love what we love to do.

But my FAVORITE PART is the footer. J.Fletcher did a really cool circular mark for their logo which is going to be featured on signage so we wanted to incorporate it into the design.

Screen Shot 2015-12-14 at 2.01.20 PM