I'm a Developer.
I like to design things.
But love to turn Ideas to code.

Initial Inquiry

Showcasing - Client Sample Inquiry Image

Overview - Client Sample Image Sent

Angelina's Delicatessen Inquiry

Angelina's Delicatessen contacted me with an inquiry on June 2022 about a quota for designing and implementing dynamic menu systems to replace their current static wall menu system. A 'test sample' menu was requested, using a concept image the owner liked on youtube for their newly installed juice bar. I inquired if the delicatessen would like custom images of their food items or if stock images would suffice in order to prepare my camera gear. The feedback was stock images.

My goal then was to take that image along with their entire juice bar menu and give it life. The showcased image above is the client sample sent to me. Below it is the gif image I responded with.

Showcasing - Client Sample Response

Overview - Client Sample Test Sample Response

Angelina's Delicatessen Test Sample Response

The main goal of the recreation was to capture the feel of their juice bar based on their menu. The menu largely consisted of organic choices and so the color pallet I choose was a color closer to orange than was sent, off-white, and a transparent teal.

A bubble background was incorporated to highlight the use of berries prevalent in many of their menu items as well as the tapioca used for the bubble tea menu item. I also included a sample of 'highlighted menu item' boards to transition between the menu and these highlighted items based on the delicatessen's most popular items. Orange was used as a background bubble behind prices to make them better pop as opposed to the dullness of the image sent.

Project Description

Showcasing - Static Menu System

Overview - Static Menu System

Angelina's Delicatessen Job Request

After the initial test sample, Angelina's Delicatessen requested a quota for a 5 story board menu package in hopes of transitioning from their static menu board wall system. Once negotiations were settled, I was tasked with designing and implementing 3 original story board menus for breakfast, lunch and mexican food. Additionally there was a 'required' story board that needed to be designed and implemented.

Showcasing - Boar's Head Concept

Overview - Required Boar's Head Concept

Mandatory Sponsor Menu - Boar's Head

As the delicatessen is sponsored by Boar's Head, they were required to have a story board dedicated soley to Boar's head. This came with a unique opportunity to use a concept image on the official Boar's head website to act as a template for the menu. This image was designed originally as a 'Craft A Gourmet Charcuterie Board' and is showcased to the right, and with this I gave the final statement of work to Angelina's Delicatessen.

Summary of Statement of Work

Story Board Overview

Brief Description

In this section I briefly present all 5 story boards, stating any key details during the their individual creation. A list is provided per board of the chosen 'highlighted items' (with the exception of the sponsored Boar's Head board) but I will choose not to demonstrate each for the sake of avoiding reduncancy. Instead I go over the overall structure of each as they all follow a similar pattern per board.

The following 5 are said story boards:

• Breakfast Menu
• Dual Lunch Menu (Split Between General and Heros)
• Mexican Food Menu
• Boar's Head Menu (Required* Sponsor Board)
• Juice Bar Menu

General Structure Of Boards

The general structure of the boards is to transition between a 'Story Board Menu' to a 'Highlight Item'. These highlighted items are their own 30 second transition. The positioning of these boards goes in the order that they are listed above. The partitioning of animation positions are the following:

• Highlight Item Start
• Menu Board Start
• Highlight Item Start
• Default Transition 1
• Menu Start

After a specified time, all boards transition simultaneously to the following state (looping indefinitely):

• Menu Board
• Highlight Item
• Menu Board
• Default Transition 2
• Highlight Item

The initial menu did not specify direct seperation of the food items and so for each board, a subset of items are contained within their own block of course all falling under the same overall category.

Important Note: For the sake of minimizing storage space, the animated showcases have been shortened to 4 seconds per 'transition' (that is board to 'highlight item'). The actual time frame implemented is an interval of 30 seconds between transition. For user convenience,

Breakfast Menu

Showcasing - Breakfast Menu

Story Boards - Breakfast Menu (Original Design)

Design Explanation

The central theme of this board was to portray an 'ease' to getting morning breakfast. As breakfast items are offered all day at the establishment, consideration for this was also taken and so the neutral color of a light lime was chosen. Each food item is carefully broken up into multiple transparent green block sections. These sections are of 'Omelettes', 'Sandchiches', 'Pancakes', 'Waffles', 'French Toast', 'Coffee & Tea', 'Oatmeal', 'Salads' and 'Breads Available'.

With the foresight of potentially pairing the designs of 2 boards to avoid the clashing of multiple designs, this palette was also considered for the lunch board design. Pairing these 2 boards was the most intuitive, being closer related in the context of food establishments than say 'Breakfast' and 'Mexican Food' or 'Juice Bar'. Their positioning was also considered.

Highlighted Food Items

The highlighted food items list consists of:

• Pancakes
• Waffles
• French Toast
• Chicken & Waffles
• Pastrami Egg Cheese
• Roast Beef Egg Cheese

Color palette matching was used, making use of gradual darker shaded green blocks used to draw attention to the left-hand side containing the information of the item. The underlinings of each price item are animated throughout the display to stress the price early on while being visually appealing.

Lunch Menu

Showcasing - Lunch Menu

Story Boards - Lunch Menu (Original Design)

Design Explanation

Paired with the Breakfast board, the central theme of this board is also to portray an 'ease' to getting lunch on a work break. This board is broken up into 2 story boards as the establishment has an incredible amount of choices. These 2 sections are of 'General Lunch' and 'Angelina's Specialty Sandwiches'.

The 'General Lunch' board contians the subsets of 'Burgers', 'Flounder', 'Sandwhiches', 'Soups', 'Wings' and 'Breads Available'. The 'Angelina's Specialty Sandwhiches' board contians a single subset but for ease of use, the 'Breads Available' subset is also included for the common case of a customer desiring a different type of bread.

The 'Angelina's Specialty Sandwhiches' two subsets are seperated by a sideways 'Hero' image. The end result is extremely appealing to the eyes. The same concept of block color palette matching was used with the darker shaded green blocks used to draw attention to the left-hand sides containing the information of the item. Just as with the Breakfast board, the underlinings are also animated.

Highlighted Food Items

The highlighted food items list consists of:

• Chopped Cheese
• Cheese Burger
• Philly Cheesesteak
• Flounder Sandwich
• Chicken Fantasia

Just as with the Breakfast board, color palette matching was used, making use of gradual darker shaded green blocks used to draw attention to the left-hand side containing the information of the item. The underlinings of each price item are animated throughout the display to stress the price early on while being visually appealing.

Mexican Food Menu

Showcasing - Mexican Food Menu

Story Boards - Mexican Food Menu (Original Design)

Design Explanation

Interestingly, this board was the board of most interest to the owner of the establishment as the establlishment was the only place within a considerable range to sell Mexican Food, their native styled food from Puebla, Mexico. For this reason, the color palettes commonly found in Mayan and Aztec culture was used.

The food item substes are instead in transparent brown blocks to compliment the yellow background. The food subsets for this board include 'Burritos', 'Quesadillas', 'Tortas', 'Tacos', 'Rice Bowls', and a more general 'Mexian Food' subset containing the native styled foods.

Highlighted Food Items

The highlighted food items list contain mainly native food and consists of:

• Chilaquiles (Verdes & Rojos)
• Burritos
• Enchilladas (Verdes & Rojos)
• Rice Bowl
• Tostadas de Tinga de Pollo
• Nachos with Cheese and Jalapeno
• Tacos Dorados de Pollo
• Huevos Divorciados

For the highlighted food items in this board, no blocks were used. Instead a focus on the overall colors and font color was emphasized. In addition to the animated underlining for drawing attention to the prices, as Mexican Food is often a collection of muliple components such as with rice bowls, an animated circling of customizable options was implemented.

Boar's Head Menu

Showcasing - Boar's Head Menu

Story Boards - Boar's Head Menu (Official Design)

Design Explanation

As previously mentioned in the Project Desciption subsection, the design inspiration of this board is from an official static Boar's Head image for 'Characuterie Boards'. As the board was to only contain the items in the establishment that are from Boar's Head, this design was extremely beneficial towards this limit. The 'transitions' are between two types of Characuterie Boards, taking advantage of the natural visual appeal of the combination of these items.

Boar's Head Item Subsets

The establishment only offers meats and cheeses from Boar's head with the variety being impressingly wide. Because of this, both sides of the board highlight and list these two sets with the listing and price styles modified to fit within the constraints of both sides.

Instead of having both sides be transparent as in the image design, a solid color was chosen to accomadate the animations that take place within them. This is especially true for the image transitions.

Juice Bar Menu

Showcasing - Juice Bar Menu

Story Boards - Juice Bar Menu (Design Recreation)

Design Explanation

The initial design of this board came from a screenshot of a tutorial video of how to create a story board the owner of the establishment found. The owner sent me this image and desired for a 'sample' of what I could produce for him. The goal for this board was to then to expand on this design and go from a static image to a live story board.

The changing of the color palette was done for 2 reasons. To bring more life to the board and to emphasize on the 'heathy option' food item theme. The palettes used were bright colors as close as possible to the color of oranges without being hard on the eyes. A 'bubble' white and grey background was used to accentuate the use of bubble like items in each item such as tapiaco for bubble teas and berries for smoothie drinks or salads. The use of trasparent cyon blocks were used to seperate subsets in this board.

The food subsets for this board include 'Bubble Tea', 'Milk Shakes', 'Smootheis', 'Acai Bowls', 'Yogurt Parfait' and 'Veggie Shots'.

Highlighted Food Items

The highlighted food items list contain mainly native food and consists of:

• Acai Bowl
• Yogurt Partfait
• Fresh Juice (Squeezed Orange)
• Ginger Shots
• Bubble Tea
• Wheat Grass Shots

The end result was a board full of life with the color palettes emphasizing the 'healthy food option' theme. An increase of new costomers stopping by just for a freshly blended smoothie or other items from this section was noted by the establishment.

QR Code

Showcasing - Free QR Code Flyer

Story Boards - Free QR Code Flyer (Original Design)

Design Explanation

The design of this QR Code flier was taken from the already implemented 'Mexican Food' board. This was a choice done so from the owner of the establishment pride in his ethnicity and what he has to offer. The scanning of this code takes you to the static menus of all boards without the 'highlight item' concept. This was done so in an effort to minimize customer displeasure at having to wait an interval to read their desired menu again. Additionaly, it was done so to help in advertising the food options the establishment offers as there was no such system in place before.

Scanning the QR code is possible from this image.