ClearMenu Part 1: Design
October 17th, 2011
ClearMenu is a project by the folks at Unit Interactive, including me, as a design experiment and commentary on the state of web design in the food industry. You can read more about the project and all the mini-sites at the ClearMenu site. This is a multi-part series on my contribution, “SportsBar”. This first part will focus on the design, while part two will focus on layout development.
Character
When approached about doing a self-directed restaurant menu redesign, a particular restaurant immediately came to mind. I am a big fan of supporting local restaurants over their chain counterparts. There are several restaurants in the area at which my wife and I are recognized on sight. These local places have a special uniqueness (because they are literally unique) that you just can’t find at chains. Often the owners are your server and their places ooze with their personal character. It is sad then to see just how little of that character ever gets transferred into their online menus.
The purpose of an online menu for a destination restaurant (as opposed to a place that delivers or has a drive-through) is to entice a potential customer to actually make the trip to the physical location. So, for my design I decided to focus heavily on creating a large amount of impact to replicate, insomuch as possible, the excitement of sitting in a sports bar while your favorite team is playing.
Perhaps this is seen most obviously in the choice of colors which are vibrant and set into large fields. The slightly masculine oranges, yellows, and blues are placed into alternating bands denoting the different sections of the menu. The constant shifting of highly saturated colors lends some of the energy of game day to the page while the subtle background pattern of diagonal lines and sports balls adds movement while providing the “sports” context.
A Little Off-Kilter
Along with the energy provided by the background elements, I wanted to add some details that would make the user’s experience feel slightly … inebriated. The logo and headline font is Adrianna BigSmalls which purposefully mixes up capital and lowercase letters. The effect isn’t obvious at first but it provides just the right amount of “goofy” for my purposes. The copy is set in Adrianna which, of course, matches the headlines beautifully.
Another detail that will likely only play on the subconscious of a user is the use of drop shadows on called-out elements. The angle of the shadows is different for headlines, featured items, and images. This again supplies the page with extra energy.
It’s About The Food
Of course it is! One thing that almost every online menu gets wrong is treating the unlimited space provided by the internet as though it were print. I feel strongly that every online menu item should have an image to look at. There are usability reasons for this, but from a business perspective I want potential customers to see the food. Text descriptions are great, but nothing will make someone hungrier than actually looking at the food. Well, smell would probably be a better trigger but until we clear that technical hurdle images are the next best thing.
Yet, clicking to view each image didn’t seem good enough to me. I wanted each menu item to be “featured” - to be treated like the hero. To accomplish this I devised a system for the larger resolutions that swaps out the image and the item call-out as the user scrolls down the page. As an added benefit, this system encourages the user to give attention to each item on the menu and to continue scrolling to the bottom of the page.
You might notice that the images repeat. For an actual menu each item would have its own picture, but since I don’t actually own a restaurant I just pulled some food images from my Instagram. This actually led me to an epiphany. I expect most small business owners don’t have a particularly large photography budget which is why restaurants often have little, or very poor, food photography. However, with a tool like Instagram, high quality and controlled photos can be taken virtually for free and added to the site quite easily. My design is wholly intended to represent what could be possible using only an iPhone for photography.
Responsive Considerations
One of the main goals of this project was to showcase responsive design techniques. At smaller sizes the persistent images drop out of my design in favor of a more straight-forward and touch-focused experience. The images live instead in a simple lightbox and the “featured” items are treated a bit more traditionally with the owner having the ability to highlight the house specialties.
At the smallest sizes, the navigation drops from the top of the page - where a desktop user will usually expect it - to the bottom of the page. This follows the theory that someone on a mobile device is generally more interested in viewing the content straight away and will look for navigation only once they are done perusing the content they already have. The navigation is always the last thing in the HTML so the site has no need of a “skip to content” link for accessibility purposes.
Designing such a large menu for responsiveness was quite a challenge. I’ll take a closer look at how I realized this design in part two of this series.
