The "Me" Button
CPSC 581 Fall 2021 - Project 1
CPSC 581 Fall 2021 - Project 1
Created By: Marcello Di Benedetto, Abraham Beauferris, Christopher Rodriguez
This "Me" button was themed after Chef Gordon Ramsay, best known for his television presence on the programs Hell's Kitchen and Master Chef. His brutally honest and vulgar nature is an immense source of entertainment on his programs and serves as the main inspiration for the theming of this project. We wanted a way to present many of our favorite Gordon Ramsay quotes in an auditory form as a result of the user's interactions with the application. Since Gordon demands perfection, we predicated many of our design concepts on the simulation of testing skills in the kitchen, but limiting this to interactions with a single button. To create a more engaging interaction while operating within these constraints, our concepts and final product align with gamified, timing based interactions to create a fast-paced experience.
Our design process for this ideation phase was for each team member to individually compose ten concepts predicated on Gordon Ramsay, our decided topic individual. The following ten sketches are the those among the thirty that were most seriously considered for the next phase of design.
Beef wellington is a common dish on Gordon's show, Hell's kitchen, and the difficulty in gauging the doneness of the meat results in this dish being both over and under-cooked quite often. This concept aims to replicate the "moment of truth" in sawing open a beef wellington. This interaction would be performed through consecutive mouse clicks anywhere on the screen, progressing an accompanying animation. As the user would not have any influence over the doneness of the meat, this would be a random element in the design, followed by auditory praise or criticism from Gordon. This concept did not end up being pursued due to our objective being a more engaging interaction based on reflex based inputs.
This concept simulates cooking a steak over a stove. As people have varying preferences on how they would like their steak cooked, this timing based minigame requires you to stop cooking the steak once it has reached the correct temperature. The temperature is displayed as a steadily increasing meter, with an indicator on where this meter should stop. With a mouse click anywhere on the screen, the meter will be stopped. The user will then recive auditory praise or criticism from Gordon depending on how close they were to the correct temperature.
This concept requires the user to interact with four buttons that control four burners on a stove. Each burner has a pot of water that will boil over if the burner is left on too long. The pots will flash red when they need to be turned off, requiring the user to click the corresponding button. If the user misses, they will recive auditory criticism from Gordon. This detail did not end up being pursued due to it's reliance on multiple buttons and we wanted to focus more on operating within the limits of a single button input.
This concept was inspired by Gordon Ramsay's infamous tweet responses to pictures of homemade dishes. The user would drag ingredients onto a photo to compose a dish. When the user clicks the "tweet" button, they will tweet a photo of the dish to Gordon. Gordon will then respond to their photo with his usual twitter criticism. This concept did not end up being pursued due to it's over reliance on multiple forms of input aside from a single button.
When one of Gordon's cooks hand him a badly cooked fish, he has a habit of slapping it on the table, reuslting in chunks of fish flying everywhere. This concept is simple: click the screen to slap a piece of fish, with an accompanying quote from Gordon. This concept did not end up being pursued due to our objective being a more engaging interaction based on reflex based inputs.
Stick to the recipe! This concept would display each step of a recipe visually and in an animated fashion. Recipe step details would also be displayed. The user would click anywhere on the screen to progress to the next steep of the recipe, allowing them to follow along. This concept did not end up being pursued due to our objective being a more gamified and fast-paced interaction.
Many people seem to love posting their food on social media for everyone to see. The user would click and drag the mouse to aim a camera at a dish, then click to take a photo. The composition of their photo would be evaluated based on the rule of thirds. This concept did not end up being pursued as there was not enough emphasis on the cooking aspect of our theme.
This concept was inspired by "Where's Waldo?" and Gordon's infamous and arguably overused quote of "Where's the lamb sauce?!". The user will need to click on the lamb sauce within a crowded kitchen scene. This concept did not end up being pursued due to our objective being a more gamified and fast-paced interaction.
Since the main inspiration for this project was to present audible Gordon Ramsay quotes, this concept was a fitting addition. The user needs to simply click a button and a randomized Gordon quote will play. This concept was not individually pursued as it could be integrated into any of our more gamified concepts.
Inspired by Gordon's classic "idiot sandwich" moment. The user would click anywhere on the screen to trigger two pieces of bread to be slapped on the side of a person's head. Naturally, this would be accompanied by a Gordon quote. This concept did not end up being pursued due to our objective being a more gamified and fast-paced interaction.
From the ten concept sketches outlined above, we chose Concept #2 to be iterated upon in the next phase of design. This choice was from a standpoint where we wanted to adhere to the limitation of the inclusion of a button, include a variety of audio clips, and include pleasing art and animation all while keeping the scope managable. Concept #2 seemed to be quite flexible, as we would be able to vary the visuals in interesting ways, with different cuts of meat. Also, since this concept is still quite broad and reliant on the user's reflexes, it gave us an opportunity to not only include a wide breadth of randomized audio (like concept #9) but have it be contextual to the user's manner of interaction (whether they hit or miss). This interaction also seemed fun and fast paced due to the minigame like inspiration. This differs from many of our ideations, which were mostly passive interactions without variance in tempo or reflex. All in all, this concept just seemed to allow for flexibility in the context of the user's interactions, giving more meaningful feedback as a result of a simple button press.
The following ten sketches are variations and additional details on Concept #2 from the ideation phase.
This detail represents a possible flow for the application. Firstly, you recieve an order specifying the doneness of the steak to be cooked. Then, the user clicks the screen to stop cooking. The steak will visually follow a gradient from raw to well done. Gordon will evaluate if you cooked it correctly or not.
This detail represents the asset of interaction for the user being the dial located under the stove. To stop the cook, the user will click this dial. The dial will also visually change positions for more visual feedback.
This variation shows an alternate display for the steaks temperatures. A digital meter inserted in the steak will tick upwards at a constant speed showing the internal temperature. The user will interact with the burner dial to stop the cook when this temperature is within the order's desired range. Temperature ranges for doneness will be displayed as a visual asset.
This detail shows a temperature meter to display the doneness of the steak. This meter is shown as a gradient from blue to red to signify a transition from cold to hot temeperatures. The desired doneness of the current steak is displayed as an arrow on the meter. Another indicator moves along the meter and this indicator must be stopped within the acceptance region signified by the arrows.
This is another variation on the temperature meter and acceptance regions. In this case, an indicator moves back and forth and must be stopped in a slim region in the middle of the meter.
This variation is a play on the "whack-a-mole" concept from the ideation phase, but recontextualized to fit the theme of steak cooking. Steaks will change from raw to cooked, and the user must shut off burners with finished steaks before they overcook.
This variation puts emphasis on Gordon's sound clips in the context of a minigame mechanic rather than just feedback from an interaction. When the user hears Gordon, the dial must be clicked to stop the steak cooking.
This detail is a streak/ high score display, which can easily be implemented alongside any of these details/variations. For each well-cooked steak, the streak tally will be increased. A high score can also be stored and displayed.
This is a variation on the temperature meter design, with an additional threshold alongside the "finish cooking" threshold. The first threshold requires a well-timed mouse input from the user to flip the steak, then the final threshold requires another input to finish the cook. This design is to align this simulated steak cooking with the real world.
This variation requires click and drag inputs from the user to grab raw steaks from the left, place them on the grill, then remove cooked steaks from the grill and drag them onto the endless supply of plates on the right.
For the final design, we chose to go with the temperature meter display shown in Variation/Detail #4, along with the high score and streak display from Variation/Detail #8. We felt that the temperature meter was the most intuitive display and better supported the fast-paced interaction we were going for as the meter indicator could easily move at varying speeds and could be finely tuned through playtesting. With this gamified design, the high score and streak display felt appropriate, and would not come with too much development overhead.
The overall implementation and design of the codebase were my responsibilities on this project. Though my practical knowledge in javascript was next to nothing going into this project, the resulting implementation leverages HTML, CSS and Javascript due to the ease in deployment and portability. The specific libraries used include Howler.js for audio playback and jQuery for DOM manipulation and animation. The site was hosted on GitHub pages. The assets used in the application were all rotoscoped from google images resulting in a more consistent and "cartoony" art style.
Site Link: https://marcellod1.github.io/gordons-kitchen
Source Code: https://github.com/Marcellod1/gordons-kitchen