User Experience & Design Review

First Impression: Marie Catrib’s Restaurant Website & Online Bakery

The moment I stumbled across Marie Catrib’s, I was delighted. When a website design gives you that “claps hands like seal” feeling, you know something awesome went into the making of it.

Continue reading for user experience perspectives, photography points and an assessment of the company’s social presence and integration into the business of this unique restaurant in Grand Rapids, Michigan.

The Site Design

Marie Catrib’s site uses a non-typical, soothing color scheme reflective of a Martha Stewart palette that has a few elements that are carried in from the physical space itself, like the hand-drawn font which you can see on a menu board inside the restaurant. This is something we try to do with client sites if we can as it is a way to integrate the physical space with the digital space. (Aside: for a plastic surgeon site, we took pictures of the space and used them liberally throughout, as well as using similar colors to the offices so people who found them online would feel connected when they went in for a consultation. For the Arrowhead stadium site, we used the same patterns in the footer as they have on the carpets in their luxury suites and event spaces.)

Design elements don’t have to knock people over the head to be effective… a subtle touch here and there will register in people’s brains to form that “this feels familiar” memory hook.

The introductory website sliders grab your attention and give you a mouth-watering taste of Marie’s baked goods and menu items… good for local folks, annoying for those of us that can’t drop by for lunch today! (So well done.) Go see these large and in your face (click on the dots on right hand side to see all the sliders.)

The footer is a delight because for a restaurant, what does everyone want to know most immediately?? If you guessed location, address/map, phone number and hours you’ve guessed right! And Marie’s has it all in the footer which is excellent. It also has a torn paper effect which we may be kind of fond of. Cough, cough, cough.

The Online Menus

Friends of ours probably know about my aggravation with most restaurant sites, but if you haven’t been subjected to my many loud-mouthed opinions, feel free to read or listen to them.

Marie’s site does not commit the faux pas of having PDF menus one has to download to read, but I do wish there were a PDF option, as printing this menu is going to result in a non-branded black and white boring piece of paper. Users can easily copy/paste each menu selection that looks good to them, like this one… holy crap, doesn’t this sound amazing??

The Adult Grilled Cheese

A sinful combination of feta, goat, and cream cheeses with a drizzle of olive oil and cracked red pepper grilled with fresh tomatoes and basil on your favorite bread.

So that’s a good thing. What would send this over-the-top is the plugin I dream of having a developer make that makes this menu instantly shareable, so I can send a menu item to my friends on Twitter and say “Let’s do lunch here!” Another awesome feature would be to hover over each of these items and see the dish popup in all its caloric glory.

A nice menu selector is at the top of the screen because there are 3 menus to select from, once again driving the point home that Michigan on a Saturday morning is the place I need to be, but oddly, there is no Catering menu on the site and that feels like a missed opportunity. Even a sample of a catered menu they have done for someone would be nice in terms of marketing and showing off their menu-coordinating prowess. I’d also recommend removing the email for reasons of spam-bots and driving the contact traffic to the Contact form that already exists, which ironically has a spam protection question on it.

The Deli menu has an option for printing, but there are no menu items listed on the page so that should be corrected if the Deli menu truly changes so much it’s impractical to list any menu items for it. An advanced feature that might be cool would be to add deli/bulk catering options and order form to the website so nearby offices could place orders for lunch meetings. (Bear in mind we don’t know how often this even happens, just a thought.)

One thing I need to point out about the photo galleries on this site is that they aren’t always obvious. Most pictures have more behind them but you don’t see the arrow indicators unless moused over and though most seem to rotate, it seems that sometimes they don’t. That’s probably because my mouse is hovered over the gallery and has stopped it. A small nit to pick for such a clean screen display but wanted to mention it as a detail to be aware of.

Note that aside from the homepage, this menu page is the only place that points to Facebook, and it’s VERY subtle. Though we want users to stay on the site (and drive them to shop online, actually), for local customers Facebook is important and we will talk about that below when we address the social presence.

The Online Store

Marie’s makes a number of Vegan and/or Gluten-Free baked products and that seems to be the focus of the online bakery. After all, shipping homemade stuffed meatloaf made with local beef and pork, stuffed with cheese, roasted red pepper and spices and served open-face with provolone cheese and marinara sauce on your choice of grilled bread just sounds messy. Good heavens!! How do they dream this stuff up??? But I digress…

The store has lovely little ribbons denoting an item as being Vegan, Gluten-Free, or both. There are number of little things I’d like you to notice in the store.

The Photography

All of the store photos and many of the dishes shown have been photographed on simple white dishes. Some, like the cake plate shown, have a subtle vintage feel (think of an old milk glass cake plate) but don’t have enough detail to distract from the food.

Some of these food items are not that exciting, so the photographer got creative with the display of them… stacking up flat dessert squares or adding bakery tools to a boring pudding product and often showing multiples of something. The photos, with the clean white dishes and macro food shots sell this site as being a serious contender for both a place to visit and a place to buy from.

Store Navigation

Though the store is pretty simple with only about 20 items, the designers still built in navigation to see all products or just vegan or gluten-free, a nice touch.The shopping cart is always visible and shows how many items you have in your cart and what the price is so far which is a wonderful best practice.

Product Detail and Shopping Cart

The detailed info offers a description, ingredient list, price and bulk purchase discount but no nutrition guide, which would be a nice touch. After looking at these Chocolate Crumbles all day I’m inclined to buy one but would like to know what it’s going to take off my daily calorie count.

Sometimes, a site can look this good and then you head to the cart and it just looks like something ugly out of a developer’s box of tools that no one paid attention to. I’m pleased to say that’s not so in this store. I cannot tell if this site uses a proprietary CMS (it’s not WordPress) but the cart is coming from Foxy Cart.

The Shipping and Returns page is pretty thorough and it appears this company goes out of their way to offer guarantees of satisfaction, methods of payment and shipping to multiple locations. Good job on this!

Social Media Presence & Integration

The site appears to have social platforms integrated, if you notice the homepage you’ll see some lovely rough-drawn Twitter and Facebook icons and integrated tweets, and the call to “Sit at the Friends Table” couldn’t be more inviting.

But… the tweets are now 8 months old, so what felt like a good social media strategy at the time this site was designed has now been abandoned. (We will have some suggestions in the Free Advice section below.)

There really is no social sharing integrated into the site, which is a little disappointing because from a marketing strategy, you’d want the store products and certain information to be easily shared.

The Facebook Presence

We mentioned earlier that Facebook is important for local customers. That’s because daily specials and soups of the day are posted everyday. I noticed something a little disappointing though, and that is the utter lack of photography on the Facebook page. If you click on Photos you will see some remodeling pictures mostly, which is interesting, but not mouthwatering. There are no timeline photos at all, yet the timeline is chock-full of original and investigation-worthy dishes that are made everyday.

I created a mockup with a picture of similar ingredients I found online. Adding food photos on restaurant timelines is so critical for turning prospects into customers, and casual customers into more frequent customers. A photo post is far more likely to be shared also… people are Liking and Commenting but there are virtually no Shares on this Facebook page. Multiple images of either the same dish, or the various specials offered that day, will result in even MORE interest because when your Facebook fans see the album of images (in this case, awesome looking food they will be hungry for!) they are curious enough to keep digging.

The overall impact of the Facebook page is a disconnect from the adorable, cute n’ funky website. I’ll be honest, I’m dying to get my paws on it and make it better, it just needs so much help and they have so much potential! (See Free Advice below for what I’d do with it.)

The Twitter Presence

Twitter also has the same brand disconnect and image problem. The two accounts look alike and use default Twitter backgrounds, and there is no style there in addition to the problem of infrequent updates, the last being 8 months ago.

Free Advice

The bulk of my advice has to do with bringing the social media presence up to the brand image of the site and quality of the remodeled restaurant/deli/bakery, because the site is pretty darn awesome as-is and was deliberately designed with minimum clutter and maximum simplicity I believe.

1. Dress up the Facebook Timeline

It’s wonderful that someone is in the habit of updating Facebook every day. But the site needs pictures of the specials on the timeline to really send customers into a feeding frenzy. If the person updating doesn’t have a smartphone, that would be good investment, or find out if one of the employees has one they can borrow. It won’t take too much experimentation to find a well-lit spot in the restaurant where you can dish up the special or bowl of soup and then post that along with the well-written descriptions instead of just text. These pictures do NOT have to look as if they come from a commercial photographer, like the site photos do, to be valuable to your fans.

2. Dress up the Facebook Page to Resemble the Website

The website is so darling I’ve spent half the day writing about it and studying it, to present it as a good example of branding online. Use that on Facebook!! The slider images from the homepage would make cute Timeline Covers, and with the holidays coming up, special covers featuring things to buy online or in the store are very appropriate and needed marketing.

The url for this page is terrible. It needs to be changed to a much shorter and easy-to-remember url to live up to the brand promise of clarity, cleanliness and simplicity offered at the site:

http://www.facebook.com/pages/Marie-Catribs-of-Grand-Rapids/107407791126

3. Take Advantage of Facebook Custom Tabs to Sell, Intice & Explain Services

Tabs to promote the Vegan and Gluten-Free products as well as holiday gifts and catering would be a wonderful addition to the Facebook page. Nearly 9k fans have liked this page. Give them something to do, see and interact with here. This can be in the form of simple static tabs that look cute and provide some info or can be more advanced and interactive for contests, giveaways, event space signup, gift card purchase, etc. If you’ve got people interacting here everyday (and Marie’s does) it’s time to look at how to meet their needs while marketing what you have.

4. Consider More Fan Engagement on Facebook

A restaurant staff is very busy, normally. Doing a lot of hanging out on social media platforms is not usually something most employees can do unless you have one that has time to hop on and off the computer regularly. But Marie Catrib’s has a great reputation locally from what I can tell online, and if you want to do some fun things like invite people to tell you their stories or get into deeper engagement about what it means to live a Vegan or Gluten-Free or Less Meat lifestyle, Napkin Labs has some free tools you can use for this that will invite engagement, and there are many other strategies and tactics that could be part of a plan if they wanted to get much more involved with their social presence.

I assume general customer service questions are answered now since Marie’s is online daily posting specials. If not, this is the minimal level of engagement that any company with a Facebook page MUST deliver.

5. Consolidate Twitter into One Account

With no one tweeting, two accounts is one too many, so these need to be consolidated into one generic account. (I’d keep the one with the most followers and announce to the other account you’re using it.)

6. Change the Name of the Twitter Account & Connect Facebook to It

I think the Twitter names are too specific, given the entire menu at Marie’s is not just Vegan or Gluten-Free. I recommend changing the name of the most populated account to something more general, and then connecting Facebook’s posts to it so that now tweets are coming out every time a special is announced, which seems to be pretty much every day. That is Step 1.

Step 2 involves having a coder adjust the homepage so that the tweets displayed are not coming from the two accounts, but now you see four tweets from this one account. That will pose minimal disruption to the site, yet instantly remove the problem of outdated tweets displaying prominently on the homepage of the site.

7. Dress Up Twitter to Match the Brand

A Twitter background that incorporates the look on the sliders with quirky handdrawn text and large food images along with the textures and colors would be so cute and take this Twitter page from drab to fab!

8. Use the Twitter Account for Customer Service

Instead of trying to worry about marketing via Twitter, think of it as a customer service tool and set up alerts for one responsible staff member so that they are notified if the Twitter account is mentioned. Then, respond if appropriate. It’s really that easy!

9. Consider Providing Topical Information via Twitter

If Marie’s wanted to go further, they could follow people who are Vegan or Gluten-Free sources, in addition to food vendors they use and people who are like-minded with their philosophy of living and feeding people, and share (retweet, respond) these tweets from others as sort of a public service for the people who follow them that care about these topics.

10. Have Fun on Twitter

Like the Facebook contests or giveaway ideas, Twitter is an excellent place to reward followers via Trivia answers or other little fun games, especially with the holidays coming up and an ecommerce store just ready for buyers!

11. Integrate Share Buttons into the Store

At the very least, products in the store need to be easily shared. What if I want to tell my vegan, gluten-free friends about something I see here? This is a marketing component that should be addressed.

12. Consider Online Marketing

There’s too much to get into here, but a number of online marketing options exist that could help the ecommerce store be found online. Web ads, blog reviews, email marketing, gathering opt-in names for email offers, Facebook ads, search engine ads, to name a few. Especially with holidays fast approaching I would put together a plan of attack for marketing these great products to people who have never heard of this restaurant or online bakery.

The Bottom Line

This is a really special brand and I’d love to see it succeed online like it seemingly has in Grand Rapids due to the love and care of Marie Catrib for the people she feeds. Like the website, the lady seems to be one of a kind… I found this very interesting profile on her and if you are lucky enough to be in or near Grand Rapids, I’d check out the restaurant in person!

 


First Impression is a blog series by Kristi Colvin that provides an independent user experience and design review of sites or products she finds appealing and that represent good examples of branding, marketing, website design or ecommerce buying. If you’d like your site considered for review, contact us.