McClatchy’s topic pages builds off the existing foundation of the homepage and section fronts to bring a new type of content organization to readers. Topics allow more timely and curated grouping of stories, providing a better reading experience for community-focused coverage. I worked with editorial product managers to align my designs with their strategy and vision for these pages.
Existing Atomic Structure
With homepage and section fronts already designed within our atomic system, I had a good inventory of atomic, molecules and organisms to pull from for topics pages. I started with a story card grid and explored the impact card as a new page header variation. It was important for the design to distinguish topics from sections as a more curated and intentional group of stories.
Atoms
Existing layer styles, image styles and text styles used on topic pages.
Molecules
Various headline packages, button styles and video icons added a second atomic layer to topic pages.
Organisms
The topics page is largely comprised of content organisms.
New Molecules
I also designed a centered page header variation, featuring the topic title and description, to better visually connect the featured story with the story grid.
The process
To help visually distinguish topic from section pages, I wanted to create a new featured story style within the atomic system. In early iterations, I explored text overlay, new grid layouts and page header variations. After many iterations and feedback from the rest of the design team, the impact story card provided a fresh and scalable solution for the main feature.
The final design
The final design established a template in our atomic system for curated pages, such as blogs and topics.
