Go with the Flow

/tl;dr

Home cooks needed a digital-first recipe experience that kept them focused and ‘in flow’ when cooking from their phones.

the team: Kate Tetreault, Director of Product Design; Abi Solberg, Design Director; Ashley Tenn, UX Researcher; Daniella Barrera, Product Designer; Taylor Gonzales, UX Designer; Tabitha Rodrigue, Design Director; John Torres, Creative Director

/the
opportunity

The instruction on ATK’s recipe detail pages is gold, but the experience was a hefty tax to pay. Despite being the most visited page type across our ecosystem, it wasn’t living up to our ‘we do the work so you don’t have to” brand promise.

/goals

Reduce friction for home cooks cooking from their phones

Serve the right information at the right time

Enable deep discovery

/the
odyssey

Home cooks told us they were constantly darting up and down the page mid-cook to cross-reference ingredients and instructions; they were losing their place in the flow and getting their phones dirty, scrolling with messy hands. For a brand that promises to ‘do the work’ so that the home cook can enjoy the cooking process, we were putting users through ~a lot.

How could we redesign the page so that it better supported keeping users “in the flow”? We focused on a few key moments: “how much flour do I need to add, again?” “the technique in this step is tricky, I need some guidance” and “what step am I on again?” We designed an interaction, ‘Quickview’, that let users bring the ingredient list into full view with the tap of a pinned button, no matter where they were in the recipe and without losing their place on close. We added check boxes to the ingredient list so that users could mark their progress while shopping, doing mise en place, or cooking ‘a la minute.’ We gave the instructions more space, and larger step markers that made it easier to scan and anchor focus. After hearing in interviews that our step-by-step videos were users’ go-tos when encountering a tricky new technique, we kept it accessible by pinning it scroll for larger break points.

Quickview proved a reusable and valuable pattern across breakpoints. We used it whenever we wanted to encourage discovery without sacrificing additional page load or place-finding: step-by-step illustrations, nutritional information, or product details.

Screen shots from the ATK app, where we’ve picked up Apple’s sheet pattern for a more native experience

To make sure the design held up under pressure, we conducted extensive usability testing. We paired with Dev to stand up a working prototype and watched our own kitchen interns bake from it. We extended the same assignment virtually to our co-design panel and to a group of home cooks outside of our brand. We did a home visit! User testing revealed even more gems. Folks cooking from their phones often had them propped up feet away, signaling to us that the text needed to be much larger than one would need for, say, reading a long-form article on the couch.

They appreciated that quickview offered them an accessible, but not overwhelming, rabbit hole on a new-to-them ingredient and other recipes they could make with it. They also appreciated that in-page advertising was scaled way back and carefully curated, sending the message that their time and membership dollars were valued.

Observational research was a real unlock for this project

While many features were scoped out due to development resources, leadership’s renewed focus on ‘the product’ of a flexible recipe experience means we’re picking up where we left off. A cross-functional Recipe Experience team is conducting in-kitchen observational research sessions, pairing with recipe developers, and talking to prospects about what it means to be ‘in flow’ in the kitchen.