Recipe Research

Brown Butter Chocolate Chip Cookies from Bon Appetit

Description

The cookies are rooted in classic Toll House flavor, but browning the butter amps up the toasty notes and is key to developing the balance of crisp edges, while a high ratio of brown sugar to white sugar ensures chewy chocolate chip cookie centers. The amount of flour and the quality of the pure vanilla extract is important here. We highly recommend weighing your flour with a scale; if you don't have one, use a spoon to scoop the flour into a measuring cup until overflowing, and a straight edge (such as the back of a butter knife) to level it off.

Ingredients

  1. 1 1/2 cups plus 1 tbsp (200g) all-purpose flour
  2. 1 1/4 tsp (4g) Diamond Crystal or 3/4 tsp (4g) Morton kosher salt
  3. 3/4 tsp (4g) baking soda
  4. 3/4 cup (1.5 sticks; 169g) unsalted butter; divided
  5. 1 cup (200 g) packed dark brown sugar
  6. 1/4 cup (50g) granulated sugar
  7. 1 large egg
  8. 2 large egg yolks
  9. 2 tsp vanilla extract
  10. 6 oz (170g) bittersweet chocolate, coarsely chopped, or semisweet chocolate chips

Instructions

  1. Place racks in upper and lower thirds of oven; preheat to 375 degrees. Whisk flour, salt, and baking soda in a sall bowl; set flour mixture aside.
  2. Cookk 1/2 cup unsalted butter in a large saucepan over medium heat, swirling often and scraping bottom of pan with a heatproof rubber spatula, until butter foam foams, then browns, about 4 minutes. Scrape melted butter and any brown bits to a large heatproof mixing bowla nd let cool 1 minute. Cut remaining unsalted butter into small pieces and add to brown butter (it should start to melt but not foam and sizzle, so test with one piece before adding the rest)
  3. Once butter is melted, add dark brown sugar and granulated sugar and whisk, breaking up any clumps, until sugar is incorporated and no lumps remain. Add 1 large egg and 2 large egg yolks and whisk until sugar dissolves and mixture is smooth, about 30 seconds. Whisk in vanilla extract. Using rubber spatula, fold reserved dry ingredients into butter mixture just until no dry spots remain, then fold in 6oz bittersweet chocolate (the cookie dough will be soft but should hold its shape once scopped; if it slumps or oozes after being scooped, stir dough backk together several ties and let rest 5-10 minutes until sccoops hold their shape as the flour hydrates).
  4. Using a 1 1/2 oz scoop (3 tbsp) portion out 16 balls of dough and divide between 2 parchment-paper-lined rimmed baking sheets. Bake cookies, rotating sheets if cookies are browning very unevenly (otherwise, just leave them alone), until deep golden brown and firm around the edges, 8-10 minutes. Let cool on baking sheets.

Sample Imagery

ingredients cookie dough baked cookies cookie close-up

Recipe Website Examples

Bon Appetit is the recipe site I chose to use for this project. Something I think it does well is reiterate the amount of each ingredient in the instructions to clarify how much to use so the user doesn't have to scroll up to view the ingredients list. Additionally, the ingredients and their amounts in the instructions are bolded, differentiating it from the rest of the text. Something I wish this recipe had was images to allow the user to understand what the recipe should be looking like at the various stages of making the cookies

Broma Bakery is another example of a recipe site. At the top of the page, there is a "jump to recipe" button that allows the user to skip over all the description and explanations that would take a while to scroll through. Another feature on this website that I think is user-friendly is being able to toggle between US measurements versus Metric measurements, widening the usability for a wide breadth of users.

Tasty is another example of a recipe site. Something that I think it working well on this site is the use of two columns—one for the ingredients and another for the instructions. This way, the user can refer to both at once without having to scroll to find measurements for ingredients listed in each step.

Other Websites

Garden Design is an example of a non-recipe website. This page of the site explains how to properly grow a plant. I think something I can take inspiration from here is how the text and images are treated. Each step of the process is split into three sections with more detailed steps and is accompanied by one supporting image. This layout is something I can implement in my site.

This page on the Nike site is another example of a non-recipe site that integrates short video clips with instructions on how to tie shoe laces 4 different ways. The short video clips explaining how to tie the shoe each way could be something I take inspiration from for my recipe site to further help with clarity of steps.

This page on wikiHow is a third example of how instructions and images can be integrated. Each step is accompanied by an illustration that displays the step, furthering clarity by visually demonstrating each step.