Mise UI: Design System
Create a system of repeatable components to drive the pace of creation and innovation within our cross-functional digital team.
the team: Kate Tetreault, director of UX; Tabitha Rodrigue, design director; and Olivia Sheldon, product designer
Overview
-
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.
America’s Test Kitchen Themed Components
Cook’s Country Themed Components
Cooks’ Illustrated Themed Components
In progress component documentation
Up Next:
Currently I am pairing with a Senior Front End Developer to create a documentation system for our components. Organizing our storybook resource to have a source of truth for all teams to understand Mise; product, design, development and QA.