Making of a Recipe

/tl;dr

Leaving print constraints behind and rebuilding the native app Recipe experience around what makes ATK great.

the team: Kate Tetreault, Director of Product Design; Abi Solberg, Design Director; Ashley Tenn, UX Researcher; John Torres, Creative Director

/the
opportunity

As our app became the central star of our product ecosystem, we needed to rethink our Recipe experience from the ground up.

/goals

Turn a print-first experience into a digital-first one

Bring our differentiator, our testing process to the foreground

Move beyond the transactional and serve more of the cooking journey

/the
odyssey

ATK’s origins are in Cook’s Illustrated– a gorgeous, technical and in-depth piece of print magazine. As our brand was moving from a print-first to a digital (especially native-app-first) model, we needed to rethink our most visited content type. Without the limits by the footprint of the page, and with the freedom to rethink the form factor of the content, the possibilities were endless.

In print, the recipe has a distinct anatomy: instructions and ingredients. In the app, we wanted to move beyond providing the basics and help support a larger chunk of the home cook’s journey.

We went wide– introducing elements that helped with broader planning, including pairing suggestions or meal plans. If this wasn’t the right recipe for you, we provided a more robust related content to help you find other recipes like this one. We also went deeper– creating a new ‘Cook Mode” feature that offers step-by-step test cook guided videos to help with challenging techniques. The page itself referenced a more nuanced take on the cooking journey– providing tabs for planning, cooking, reflecting, and learning.

Pairing with out Editorial partners, we revisited the form factor of our content itself, chunking out our multi-sentence steps into smaller bite-sized ones that were easier to scan, and embedding the ingredient quantities along with them. We also dug into our rich, but often long and dense, comment section to pull forward the juicy bits, surfacing FAQs and Test Cook replies.

The cooking space is a crowded one, we weren’t doing enough to showcase the unique value ATK provides to its home cooks, namely our rigorous testing process. In our old template, test cooks were a byline, and not much more. In our redesign, we aimed to treat the test cook as a guide throughout the recipe process. We aimed for the feeling you get when you ask a test cook about their most recent recipe– a conversation that makes you excited to start cooking and learning. We brought their faces into the page, and reframed our “Before You Begin” section as a tip from your test cook.

Wireframes from Cook Mode

In the old system, a recipe’s development story was housed in a totally separate article– creating friction for the few folks who could even find it. In our new paradigm, we pitched pulling the recipe development story closer into the ‘solar system’ of the recipe. The recipe was no longer a ‘page’, it was a thoughtful and contextual package.

Our brand is built with home cooks at the center; they help us decide what recipes to develop and then test the recipes we do. We saw the opportunity to further center the home cook, building out a more robust ratings system and further integrating home cooks into our process