Project Overview

Web-based Video Display Menu for a Local Coffee House

Client Engedi Cafe
  • Leanne Madore: Manager
  • Matt Henry: Web Developer
  • Graphic Designer
  • Web Developer
  • User Experience Designer

Our goal was to create a coffee house video menu that could have various elements updated: quote of the day, hours, a supported weekly organization, and any price or product updates.

Since we only had to support a single screen within a closed environment, we were free to choose a browser capable of advanced HTML5/CSS3 rendering options (for 2010) without worrying about compatibility. Chrome offered those options and also allowed a full-screen option that hid all additional UI elements.

Like a traditional restaurant menu, it was important to think about placement for each menu item. I decided that on the left column coffee drinks and extras would be displayed, smoothies in the center and all additional product types would appear on the right.

It was exciting to implement CSS3 properties that were unavailable in other browsers to create a menu with depth, dimension, and design. With the use of a video screen rather than print signage, there's potential to create product transition loops and animated elements for additional promotional opportunities.

Notes There's an accompanying website I designed and developed with the same look and feel:
As with all user-centered projects, it was important to think about how a person might view a menu.
The final menu rendered using HTML5/CSS3
The menu on display inside the coffee house.