Outcome
McClatchy's atomic design system created a more cohesive and streamlined experience for its news sites and established a scalable framework for dynamic experiences for readers across all publications. Working closely with design, product, and engineering teams, I refined type styles, simplified the color palette, and implemented a card-based design to pave the way for personalization.
Our process for the Saratoga Design System started with identifying four problem areas across McClatchy's news sites that we wanted to improve. These problem areas translated into the foundational goals for our design decisions.
To break down each high-level page to it's fundamental components, I sketched initials ideas for content cards, page layout and navigation structures. These sketches helped me think through how different types of content work together, how readers navigate between stories, and how the design system builds consistency.
Throughout my design process, I was quickly learning more about Atomic Design principals and the best way to apply them. I iterated on the smallest elements within each page—such as typography, colors, and card styles—and workshopped more complex modules and layouts from that foundation. The homepage contained many content types and design patterns, making it a great starting point for atoms and molecules.
By starting with a one-to-one redesign of the homepage, we improved readability and hierarchy through simple changes. We updated the headline styles from slab to serif and made labels more prominent, immediately establishing a more serious and journalistic tone. We also established a repeatable pattern for headline packages that is implemented throughout all modules and pages.
I repeated this process across other entry points—such as topics pages, story pages, and section fronts—to pressure test our initial set of atoms and molecules. We consolidated redundant styles and defined new ones for additional use cases. As the design system grew, it was important to develop a shared language for these components and guidelines for implementing them.
I worked with the engineering team to establish definitions and use cases for each atom, molecule and organism. The final set of components included card styles, headline packages, button groups, media players, and recirculation modules.
Modular and scalable components built on Atomic Design principals enabled our designs to easily translate across screen sizes and devices. A responsive layout with interchangeable building blocks was critical for solving our early goals: a design adaptable across platforms, simplified color palette and text styles, and card styles that enhanced media content.
