The America’s Test Kitchen brand & business has *a lot* of moving parts. First and foremost, ATK isn’t just one brand– it’s three (or more!) brands under one umbrella. Take those three brands, multiple business lines and content offerings, and multiply by a decade or so of online presence: you’ve got a fractured, inconsistent and often inaccessible experience. Not only do those inconsistencies contribute to increased cognitive load for our users, it’s an inaccurate representation of some of the core aspects of the ATK identity (meticulous, transparent, best-in-class).

Design, dev and QA weren’t working off of the same source of truth, and it bogged us down in different code bases, tech debt, and communication challenges. With aggressive company growth goals on the horizon, we knew something big needed to change.

• Create the source of truth for all UI styling, behavior, language and use across brands, content types, user states.

• Streamline the process for creating new pages with development partners

• Ensure an accessible and consistent experience for all users

• Speed up the time necessary for iterations and testing

In 2019, we assembled a small cross-functional group of UX, Design, Development and Product partners. To create a tool that solved cross-functional problems and had cross-functional users, we needed to involve them in the process. It was also important to us that the new system was equitable from the ground up, so we worked closely with the amazing folks at Perkins Access to ensure that disabled home cooks’ specific needs were being met.

Our design system had to work hard! Components not only needed to accommodate 10+ content types and 5+ user states but they also needed to flex to fit within each of our three brand environments. We created “themes” for America’s Test Kitchen, Cook’s Illustrated, and Cook’s Country; recognizing that brand voice comes from the content itself, we designed our components to elevate our brands’ photography and editorial– not distract from it.