McClatchy's atomic design system creates a more cohesive and streamlined experience for our 30 local news sites, including the Miami Herald, and establishes a scalable framework for dynamic experiences across all our readers and publications.
Working closely fellow product designer Farhin Dorothi, developer Jay Pilgreen, product manager Shannan Bowen and my manager Jessica Gilbert, we refined type styles across our sites, simplified the color palette to reduce visual noise and implemented a card-based design to pave the way for personalization. After the defining the atomic system in Sketch, we worked with the engineering team to establish a shared language for each atom, molecule and organism.
As the project progressed, I took ownership of managing, evolving and growing our design system.
The design system
Atoms: All text styles, image styles, icons and layer styles within our design system.
Molecules: Text packages (including headlines and page headers), labels, icon sets and buttons in our design system.
Content Organisms: All organisms related to editorial content, including story cards, feature cards and list cards.
Call-to-Action Organisms: Modules that link to other pages, including read next, related stories and subscription promotions.
Multimedia organisms: Video, gallery and playlist modules for various use cases.
Implementations
Video page: McClatchy’s video pages build on the design system to create a new experience for McClatchy sites. These pages enhance the viewing experience for readers and guide them to related stories and videos. View project
Topics Page: McClatchy’s topic pages build off the existing foundation of the homepage and section fronts to bring a new type of content organization to readers. View project
'Behind the Story card: The ‘Behind the Story’ card is a collaboration between the product team and reporters to better connect them with our audience and provide a more complete view of the journalistic process. The card provides an inside look at various articles, including investigative and ongoing pieces. View project
Process
I started by sketching some initials ideas for improving hierarchy, user flows, modular design and page composition.
Improving four main issues
Designing for personalization: Implementing a more modular, customizable design that adapts to all platforms and grows with our audience.
Reducing visual clutter: Elevating editorial content through a card-based design and removing market-level color.
Increasing hierarchy: Reducing the number of text styles to create clear differentiations between different types of content.
Elevating multimedia: Enhancing the design of video and photo cards to increase engagement.
Screenshots from the previous design system reveal these four problem areas. Ads blend in with content, red calls-to-action add a negative connotation to the page and multimedia content is downplayed in the design.
Refining the atomic system
By starting with a one-to-one redesign of the homepage, we were able to improve 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.
Consistent across platforms
Each atomic element in the system is consistent across desktop and mobile platforms, making our design more adaptable and responsive. We also worked to ensure that multimedia experiences remained prominent across all screen sizes.
