Gooey Butter Cake

What is it?
This gooey butter cake has a rich cake mix crust topped with a luscious baked cream cheese layer. It's super easy to make.

Source: All Recipes | Gooey Butter Cake | By Barbara

Ingredients:

1 (18.25 ounce) package yellow cake mix
½ cup butter, melted
4 large eggs, divided
2 teaspoons vanilla extract, divided
1 (8 ounce) package cream cheese
4 cups confectioners' sugar


Directions:

step 1:

Preheat the oven to 350 degrees F (175 degrees C).

step 2:

Mix together cake mix, butter, 2 eggs, and 1 teaspoon vanilla in a large bowl until well-combined. Pat mixture into a 9x13-inch dish.

step 3:

Mix cream cheese, remaining 2 eggs, and remaining 1 teaspoon vanilla with an electric mixer in a bowl. Slowly beat in confectioner's sugar. Pour over cake layer.

step 4:

Bake in the preheated oven until golden brown, 40 to 45 minutes. Cool before serving.


Photo Inspo:










Recipe Research

Recipe Website References

Eat with Clarity: I like this website due to its use of photos at each step (ex: ingredients, batter, finished product, etc.) I do, however, think the photos take up too much space on the page, requiring the user to scroll more than necessary. Resizing them and possibling wraping text around the image would benefit the user. Additionally, I think utilizing numbered steps instead of just chunking out the text would allow for greater ease of use when rereading the recipe.


Delish: My favorite part about this recipe site is the inclusion of prep time, total time, and yield at the top of the page. Including the ingredients and then the recipe directly below it also logically makes sense. I would like to see the image of the finished product at the top, however, so the user can easily see what they are making.


All Recipes: This site entices the user from the beginning by including images of the final product and keeps instructions nice and short with plenty of spacing between each step so they don't blend together. The inclusion of a video at the top which continues in the right corner as the user scrolls is very helpful, especially if they want to look at the ingrdients list while watching the tutorial. The large margins on the right side also aid in readability.


General Website References

Shopify: Shopify's website is full of short paragraphs of text, ensuring that the user is not loosing interest. Additionally, the use of columns in the page allows for these short paragrpahs to be displayed in a way that does not waste space. The page also rotates which column images are located in so the user can vary what is in their visual field.


Wikihow: The inclusion of photos at each step, large numbered steps, and the seperation of each step from the background greately assist in the readability of this site. I also enjoy that the title of the aritcle follows you as you scroll down the page so you are constantly reminded what you are reading.


Medium: The articles on Medium prioritize readability. The typeface is easy to read and the font size is rather large. Large margins on both sides of the text and short paragraph structure also allow for easy reading and skimming. Additionally, most articles include images to break up large sections of text.